Extjs3 动态生成grid

由于业务需要,grid列不确定的情况下,动态生成列及添加数据。
基本流程是grid列的数据从后台先取得,然后填充列数据。
代码片段如下:

// 明细标题信息
var cmItems = [];
// 明细标题信息列model
var cm = new Ext.grid.ColumnModel(cmItems);
// 明细record信息
var cmRecord = [];
Ext.Ajax.request({
url: 'xxxx/xxxxxxTitle',
method: 'post',
success: function(response, options){
var cmtitle = [];
var cmConfig = {};
cmtitle = Ext.util.JSON.decode(response.responseText);
// rowid
cmConfig = new Ext.grid.RowNumberer()
cmItems.push(cmConfig);
// 商品属性
cmConfig = {
header: '商品属性',
dataIndex: 'baccy_attribute',
width: 100,
sortable: true
};
cmItems.push(cmConfig);
cmConfig = {
name: 'baccy_attribute',
type: 'string',
mapping: 'baccy_attribute'
};
cmRecord.push(cmConfig);
// 商品编码
cmConfig = {
header: '商品编码',
dataIndex: 'baccy_v3_code',
width: 100,
sortable: true
};
cmItems.push(cmConfig);
cmConfig = {
name: 'baccy_v3_code',
type: 'string',
mapping: 'baccy_v3_code'
};
cmRecord.push(cmConfig);
// 商品名称
cmConfig = {
header: '商品名称',
dataIndex: 'baccy_name',
width: 200,
sortable: true
};
cmItems.push(cmConfig);
cmConfig = {
name: 'baccy_name',
type: 'string',
mapping: 'baccy_name'
};
cmRecord.push(cmConfig);
//动态添加头信息***************************
for (var i = 0; i < cmtitle.length; i++) {
cmConfig = {
header: cmtitle[i].data,
dataIndex: cmtitle[i].column,
width: 120,
sortable: true
};
cmItems.push(cmConfig);
cmConfig = {
name: cmtitle[i].column,
type: 'string',
mapping: cmtitle[i].column
};
cmRecord.push(cmConfig);
}
// id
cmConfig = {
name: 'goodsupplyId',
type: 'string',
mapping: 'goodsupplyId'
};
cmRecord.push(cmConfig);
cm = new Ext.grid.ColumnModel(cmItems);
//1.定义明细信息数据结构。
var list_StudentRecord = Ext.data.Record.create(cmRecord);
//按列排序。
cm.defaultSortable = true;
//2.定义明细list数据结构。
var list_store = new Ext.data.Store({
name: 'list_store',
//设置服务器端映射。传入id作为查询条件。
proxy: new Ext.data.HttpProxy({
autoLoad: true,
url: 'xxxx/xxxxxList'
}),
//autoLoad如果有值传入,那么store的load会自动调用,发生在autoLoaded对象创建之后
//定义数据结构
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, list_StudentRecord),
remoteSort: false //True要求服务器提供一个更新版本的数据对象以便排序,反之就是在Record缓存中排序(默认是false)。
});

//3.定义货源明细信息Grid。
var list_grid = new Ext.grid.GridPanel({
id: 'list_grid',
store: list_store,
region: 'center',
loadMask: true,
height: document.body.clientHeight - 80,
cm: cm,
//定义底部信息bar
bbar: new Ext.PagingToolbar({
pageSize: 999,
store: list_store,
displayInfo: true
})
});
//4画面load之前给变量赋值
list_store.on('beforeload', function(){
Ext.apply(this.baseParams, {
start: 0,
limit: 999,
goodsupplyId: baccy_provide_id
});
});
//5.定义明细信息Form。
var list_form = new Ext.form.FormPanel({
id: 'list_form',
labelAlign: 'center',
frame: true,
defaultType: 'textfield',
width: document.body.clientWidth,
height: document.body.clientHeight - 30,
items: [list_grid]
});
//6.定义明细查询窗口。
var list_win = new Ext.Window({
id: 'list-win',
modal: true, // 模态窗口
el: 'list-win',
layout: 'fit',

width: document.body.clientWidth,
height: document.body.clientHeight,
title: '显示明细信息',
closeAction: 'hide',
items: [list_form],
buttons: [{
text: '返回',
iconCls: 'goBack',
ref: '../gpBackButton',
handler: function(){
list_win.hide();
list_form.getForm().reset();
}
}],
listeners: {
'show': function(){
//window宽和高设定
Ext.getCmp('list-win').setWidth(document.body.clientWidth);
Ext.getCmp('list-win').setHeight(document.body.clientHeight);
//form宽和高设定
Ext.getCmp('list_form').setWidth(document.body.clientWidth);
Ext.getCmp('list_form').setHeight(document.body.clientHeight - 30);
//grid高设定
Ext.getCmp('list_grid').setHeight(document.body.clientHeight - 80);
}
}
});
},
// 取得货源明细标题信息失败方法。
failure: function(){
}
});

后台请求title返回grid头列表,请求list返回和头相对应的列表。
小宝制造。

你可能感兴趣的:(extjs,grid,动态生成,Extjs3)