从服务器端获取列和数据动态创建Ext.grid.EditorGridPanel

时间:2024-06-28 13:03:56

1、添加列的方法

 var addColumn = function(){
this.fields = '';
this.columns = '';
this.addColumns=function(name,caption){
if(this.fields.length > 0){
this.fields += ',';
}
if(this.columns.length > 0){
this.columns += ',';
}
this.fields += '{name:"' + name + '"}';
this.columns += '{header:"' + caption + '",dataIndex:"' + name + '",sortable:true,hidden:true}'; };
15 };

2、从服务器端获取列,然后动态添加到ColumnModel中

  Ext.Ajax.request({
url : '/action',
success:function(response,option){
if(response.responseText==""){
return;
}
data = new addColumn();
var res = Ext.util.JSON.decode(response.responseText);
for(var i=0;i<res.data.length;i++){
data.addColumns(res.data[i].id,res.data[i].name);
}
//动态生成GridPanel
makeGrid();
},
failure:function(){
Ext.Msg.alert("消息","查询出错----");
}
});

3、将列添加到grid中

                //动态生成GridPanel
var makeGrid = function(){
var cms = new Ext.grid.ColumnModel(eval('([' + data.columns + '])'));
cms.defaultSortable = true;
var fields = eval('([' + data.fields + '])');
var store = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({ url : '/action'}),
reader:new Ext.data.JsonReader({totalProperty:"total",root:"data",fields :fields })
});
store.load({params:{start:0,limit:50}});
var grid =new Ext.grid.EditorGridPanel({
id:'rigthBW',
viewConfig:{forceFit:true,autoScroll:true},
store:store,
bodyStyle:'width:100%',
cm:cms,
height:540,
autoWidth:true,
layout : 'fit',//自适应布局
border:"1",
renderTo:"showBW",
bbar:new Ext.PagingToolbar
({
emptyMsg:"没有数据",
displayInfo:true,
displayMsg:"显示从{0}条数据到{1}条数据,共{2}条数据",
store:store,
pageSize:50,
refreshText:"刷新列表"
})
});
grid.loadMask.msg='正在加载.........';
}
}

相关文章