Ext 动态读取grid 列数
在公司做项目,为了实现代码的通用性,要求开发一些通用的组件,实现组件的复用性。Ext通过json读取xml文件里的配置信息返回相应的json数据给前台,让前台生成相应的Ext.grid.ColumnModel()。
相信的内容可以参照:【Ext读取xml文件生成动态表格和表单】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | var result = {};
var grid;
var store;
var sm = new Ext.grid.CheckboxSelectionModel();
// 获取显示查询结果部分的表格控件
function getInsertGrid() {
var columns = new Ext.grid.ColumnModel(result.columnHeaders);
//result.columnHeadersl来自后台返回的json对象
columns.defaultSortable = true;// 默认可以排序
grid = new Ext.grid.GridPanel({
id : 'grid',
frame : true,
title : '物资明细',
region : 'center',
loadMask : true,
height : 800,
autoExpandColumn : 0, // 自动扩展宽度的列
autoScroll : true,
loadMask : {
msg : "数据加载中,请稍等..."
},
emptyMsg : '没有相关数据...',
cm : columns,
sm : sm,
store : store,
viewConfig : {
forceFit : true,
columnsText : '请选择显示的列',
scrollOffset : 10,
sortAscText : '升序',
sortDescText : '倒序'
},
tbar : new Ext.PagingToolbar({
pageSize : result.limit,
store : store,
plugins : new Ext.ux.grid.PageSizePlugin(),
displayInfo : true,
prevText : "上一页",
firstText : "首页",
lastText : "尾页",
nextText : "下一页",
beforePageText : "当前第",
refreshText : "刷新",
afterPageText : "页,一共{0}页",
displayMsg : '第{0}条到{1}条,一共{2}条记录',
emptyMsg : '对不起,没有您查询的信息'
})
});
grid.on('rowclick', function(grid, rowIndex, event) {
var record = grid.getStore().getAt(rowIndex);
form.getForm().loadRecord(record);
});
return grid;
}
// 获得界面初始化的一些数据
function getInitData(xmlObj) {
result.columnHeaders = [];
// 获取表格表头的界面数据和rcord记录的数据格式
var fields = xmlObj.getElementsByTagName("field");
result.columnHeaders.push(sm);// 插入多选框
result.columnHeaders.push(new Ext.grid.RowNumberer({
width : 20
}));// 插入行号
for (var i = 0; i < fields.length; i++) {
var item = {};
var record = {};
var array = [];
var field = cleanWhitespaces(fields[i]);
var renderDate = function(value) {
return value ? value.dateFormat('Y-m-d') : '';
}
// 生成grid表格中store数据记录
record.name = field[0].firstChild.nodeValue;
record.mapping = field[0].firstChild.nodeValue;
if (field[1].firstChild.nodeValue == '日期') {
record.type = 'date';
record.dateFormat = 'Y-m-d';
item.renderer = Ext.util.Format.dateRenderer('Y-m-d')
} else if (field[1].firstChild.nodeValue == '数值') {
record.type = 'auto';
} else {
record.type = 'string';
}
result.gridRecords.push(record);
// 生成grid表格表头数据记录
item.dataIndex = field[0].firstChild.nodeValue;
item.header = field[2].firstChild.nodeValue;
// item.width=field[3].firstChild.nodeValue;
item.sortable = true;
if (field.length == 7
&& field[5].firstChild.nodeValue.toUpperCase() == 'TRUE') {
item.hidden = true;
// item.hideable=false;
}
if (field.length == 6) {
item.hidden = false;
}
result.columnHeaders.push(item);
}
return result;
}; |
Recent Comments