1、建整个Panel1页面脚本
var right_gridPanel = Ext.getCmp(“right_gridPanel”);
if(right_gridPanel==null){
/*********************
* 设置列表的表头
**********************/
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({header:'序号',width:40}),
{
id: 'propId', //属性id字段
header: "属性名",
dataIndex: 'propName', //属性名对应字段
width: 60
}
]);
//根据浏览器分辨率计算列表高度与行数
var screenHeight=screen.height;
var gridPanelHeight=screenHeight-285;
right_gridPanel = new Ext.grid.GridPanel({
id:"right_gridPanel",
store:new Ext.data.Store(), //空grid列表
cm:cm,
border:false,
borderStyle:'border-left:0px;border-bottom:0px;',
tbar:[{text:'选中的属性'},{text:' '},"->",''],
height:gridPanelHeight
});
}
panel1=new Ext.Panel({
id:"panel1",
width:620,
autoScroll:true,
layout:'column',
items:[{
columnWidth:.65,
id:"left_panel",
autoLoad:left_gridPanel_loader, //left_gridPanel_loader为定义的载入left_gridPanel列表页面配置
autoScroll:false
},{
columnWidth:.35,
id:'right_panel',
items:right_gridPanel
//height:gridPanelHeight
}]
});
2、在left_gridPanel列表页面添加脚本如下：
//定义grid的checkbox选中与反选事件
var right_gridPanel = "right_gridPanel";
//sm_left_gridPanel.为left_gridPanel的gridPanel的列CheckboxSelectionModel定义对象
sm_left_gridPanel.on('rowselect', function(sm, rowIdx, r){ //选中
if(Ext.getCmp(right_gridPanel)){
var selectedGrid = Ext.getCmp(right_gridPanel);
var flag=false;
//由于发现在Store里找对象r老出现问题，新增方法里找不到但是却可以删除掉，执行一样的代码可进到两个方法里却一会儿找得到一会儿找不到。只好采用each方法循环Store中所有的记录来一一判断
selectedGrid.getStore().data.each(function(d){
if(d.data.propId==r.data.propId){
flag=true;
selectedGrid.getView().refresh(); //刷新列序号
return;
}
});
if(flag){ //已存在则不需要再添加
return;
}else{ //添加
selectedGrid.getStore().add(r);
selectedGrid.getView().refresh();
}
}
});
sm_left_gridPanel.on('rowdeselect', function(sm, rowIdx,r){//反选
if(Ext.getCmp(right_gridPanel)){
var selectedGrid = Ext.getCmp(right_gridPanel);
selectedGrid.getStore().data.each(function(d){
if(d.data.propId==r.data.propId){
selectedGrid.getStore().remove(d);
selectedGrid.getView().refresh();
return;
}
});
return;
}
});
//定义grid载入完数据后触发事件
Ext.getCmp("left_gridPanel").store.on("load",function(store,records,options){
if(Ext.getCmp("right_gridPanel")){
var selectedGrid = Ext.getCmp("right_gridPanel");
var checkedRecords = [];
selectedGrid.getStore().data.each(function(d){
for(var i=0;i<records.length;i++){
var r=records[i];
if(d.data.propId==r.data.propId){
checkedRecords.push(r);
break;
}
}
});
//在右边grid中已存在的则把左边grid中对应的记录选中
Ext.getCmp("left_gridPanel").selModel.selectRecords(checkedRecords,true);
}
});