web-dev-qa-db-ja.com

extjsでレコードのフィールドを動的に更新する

シナリオ

静的データを格納しているグリッド内の特定のレコードの列データを更新したい。これが私のストアです：

extend : 'Ext.data.Store',
model  : 'MyModel',
autoLoad:true,
proxy: {
    type: 'ajax',
    url: 'app/data/data.json',
    reader: {
        type: 'json',
        root: 'users'
    }
},

私のdata.json

 {
     'users': [{
         QMgrStatus: "active",
         QMgrName: 'R01QN00_LQYV',
         ChannelStatus: 'active',
         ChannelName: 'LQYV.L.CLNT',
         MxConn: 50
     }]
 }

レコードを更新するために私がしていること：

var grid = Ext.getCmp('MyGrid');
var store = Ext.getStore('Mystore');
store.each(function(record, idx) {
    val = record.get('ChannelName');
    if (val == "LQYV.L.CLNT") {
        record.set('ChannelStatus', 'inactive');

        record.commit();
    }
});
console.log(store);
grid.getView().refresh();

私の問題

ここでレコードが更新されていますが、グリッドパネルに反映されていません。グリッドは同じ古いストア（静的）を使用しています。静的データの問題はありますか？それとも私は何かが足りないのですか、それともどこか間違っていますか？この問題について私を助けてください。どうもありがとう。

私の編集

ステータスに基づいて列を色分けしようとしていますが、ストアを更新しているにもかかわらず、ここでは常にstatus = "active"を取得しています。

グリッドでやろうとしていること

{
    xtype: 'grid',
    itemId: 'InterfaceQueueGrid',
    id: 'MyGrid',
    store: 'Mytore',
    height: 216,
    width: 600,
    columns: [{
        text: 'QueueMgr Status',
        dataIndex: 'QMgrStatus',
        width: 80
    }, {
        text: 'Queue Manager \n Name',
        dataIndex: 'QMgrName',
        width: 138
    }, {
        text: 'Channel Status',
        dataIndex: 'ChannelStatus',
        width: 78,
        align: 'center',
        renderer: function(value, meta, record) {
            var val = record.get('ChannelStatus');
            console.log(val); // Here I am always getting status="active". 
            if (val == 'inactive') {
                return '<img src="redIcon.png"/>';
            } else if (val == 'active') {
                return '<img src="greenIcon.png"/>';
            }
        }
    }, {
        text: 'Channel Name',
        align: 'center',
        dataIndex: 'ChannelName',
        width: 80
    } {
        text: 'Max Connections',
        align: 'center',
        dataIndex: 'MxConn',
        width: 80
    }]
}
extjsgridpanelextjs4.2
9
Dev

抜本的な方法は、グリッドを再構成することです。これが最終的な解決策になるとは限りませんが、何が問題になっているのかがわかるかもしれません。

コール

grid.reconfigure(store)

の代わりに

grid.getView().refresh();

レコードを変更した後。各単一レコードでrecord.commit（）を使用する代わりに、単一のstore.commitChanges（）を使用することもできます。

10
Christoph

多分それは単なるタイプミスです、あなたはあなたの状態でvalを割り当てます。これを試してください（=から==）：

var grid = Ext.getCmp('MyGrid');
var store = Ext.getStore('Mystore');
store.each(function(record,idx){
      val = record.get('ChannelName');
      if(val == "LQYV.L.CLNT"){
         record.set('ChannelStatus','active');
      }
      else {
         record.set('ChannelStatus','inactive');
      }
      record.commit();
});
console.log(store);
grid.getView().refresh();
8
Christoph

コミットあなたのストアとリロードそれを試しましたか？

この方法を試してください。

yourstorename.commitChanges();
yourstorename.reload();
2
Shankar Damodaran

私はそれを使用して解決しました

grid.bindStore(myupdatedstore);

@Christophが述べたように

grid.reconfigure(store)

同様に正常に動作します。

1
Dev