1. 程式人生 > >Extjs grid checkbox 根據資料初始化選中

Extjs grid checkbox 根據資料初始化選中

背景:根據業務需求,需要在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);
            }
        }
	}