Extjs grid checkbox 根據資料初始化選中
阿新 • • 發佈:2019-02-11
背景:根據業務需求,需要在grid裡面載入很多資料,再根據每條資料的某個屬性確定該條資料是否被選中。
過程:google了一下,發現一個老外提供了下面的方法。
Ext.Ajax.request({ method: 'POST', url:'index.php/mapper/get_tag_subfields/', scope: this, params : { id:this.gridB.getSelectionModel().getSelection()[0].data.id, }, success: function(xhr){ var json =Ext.decode(xhr.responseText); // make sure to decode for loadData to work // data is formatted, just needto load data storeMapperSubfields.loadData(json.data); // mark checkboxes if(json.data.length){ for (var i = 0; i <json.data.length; i++){ var rec =this.gridC.store.getById(json.data[i].id); // json.data[i].getId() if(rec.data.field_type == 's'){ // select all records have have 's' this.gridC.getSelectionModel().select(rec,true,false); } } } }, failure: function() { Ext.getBody().unmask(); alert('AJAX FAILURE: Unableto process call'); } }); }, this);
但是我用的時候紅線部分報錯。說views[0]找不到。
下面是我的程式碼:
Ext.Ajax.request( { url : '/aaaaaaaaaaa/bbbbbbbbbbbbbbb.do', method : 'post', params : { methodName:'aaaaaaaaaaa', policyid:policyid, appid:appid }, success : function(response, options) { var result = Ext.JSON.decode(response.responseText); var editTitle='採集策略'+policyName+'操作請求修改'; var editPolicyPanelOpers = new PM.view.policy.PolicyEditOpers({ title: editTitle//, //data: result.data }); //設定policyid Ext.ComponentQuery.query('window#policyeditopers textfield#selectPolicyid')[0].setValue(policyid); Ext.ComponentQuery.query('window#policyeditopers textfield#selectAppid')[0].setValue(appid); var operGrid = Ext.ComponentQuery.query('window#policyeditopers grid#oper_grid')[0]; var opersStore = Ext.getStore('BusinessOperStore'); if("undefined" != typeof opersStore) { opersStore.loadData(result.data); operGrid.reconfigure(opersStore); for (var i = 0; i < result.data.length; i++){ var rec = operGrid.store.getById(result.data[i].businessoperid); // json.data[i].getId() if (rec.data.selected == true){ // select all records have have 's' operGrid.getSelectionModel().select(rec,true,false); } } } //設定appid editPolicyPanelOpers.show(); }, failure : function() { var o = Ext.JSON.decode(response.responseText); // alert(o.msg); Ext.Msg.alert('提示資訊',o.message); } });
查閱了select(rec,true,false)的方法。說rec這個引數要麼是index,要麼是record的例項。
詢問同時,他說是渲染的問題。說我呼叫的地方不對。
接著就是自己瞎折騰:查閱了原始碼,發現屬性selected為私有。不能通過它設定選中與否。
幾個小時過去後,又想到同事的話。
最後自己耐心地去實踐了一下。果然是這個問題。這個問題解決了,但花去了一下午加一晚上的時間。
下面是程式碼片段:
init:function(){ this.control({ 'policyeditopers grid#oper_grid':{ afterrender:this.selectModel } }); }, selectModel:function(){ Ext.Msg.alert('selectModel','test'); var operGrid = Ext.ComponentQuery.query('window#policyeditopers grid#oper_grid')[0]; for (var i = 0; i < operGrid.getSelectionModel().store.data.items.length; i++){ var rec = operGrid.store.getById(operGrid.getSelectionModel().store.data.items[i].data.businessoperid); // json.data[i].getId() if (rec.data.selected == true){ // select all records have have 's' operGrid.getSelectionModel().select(rec,true,false); } } }