Just some sharing about java open source and life

Ext 动态读取grid 列数

日期:2009-10-22 11:17 | 作者:JavaChen | 分类目录:Extjs
329 views

在公司做项目,为了实现代码的通用性,要求开发一些通用的组件,实现组件的复用性。Ext通过json读取xml文件里的配置信息返回相应的json数据给前台,让前台生成相应的Ext.grid.ColumnModel()。
相信的内容可以参照:【Ext读取xml文件生成动态表格和表单】

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;
};
作者:JavaChen | 分类目录:Extjs | 标签:
回到顶部

无觅相关文章插件,快速提升流量