editorGridPanel根据其他列的值动态改变本列编辑器对象

最新推荐文章于 2019-06-27 21:02:04 发布

jianle888

最新推荐文章于 2019-06-27 21:02:04 发布

阅读量349

点赞数

分类专栏： ext

本文链接：https://blog.csdn.net/jianle888/article/details/31393947

版权

ext 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍如何使用ExtJS创建可编辑的Grid面板，并通过监听器动态改变单元格编辑器。示例中定义了一个ArrayStore数据存储，ColumnModel列模型，并实现EditorGridPanel。根据数据的不同类型动态设置单元格编辑器为TextField或NumberField。

摘要由CSDN通过智能技术生成

一、原始grid

store、columnModel、editorGridPanel的声明

var store;
(function() {
	var data= [ [ 'a', '1' ], [ 'b', '2' ], [ 'c', '3' ], [ 'd', '4' ] ];
	store = new Ext.data.ArrayStore({
		fields : [ {
			name : 'kind'
		}, {
			name : 'value'
		} ]
	});
	store.loadData(data);
})();

var cm = new Ext.grid.ColumnModel({
	// specify any defaults for each column
	defaults : {
		sortable : true
	// columns are not sortable by default
	},
	columns : [ new Ext.grid.RowNumberer({
		width : 26
	}), {
		id : 'kind',
		header : '种类',
		dataIndex : 'kind',
		width : 120
	},{
		id : 'value',
		header : '值',
		dataIndex : 'value',
		width : 120,
		header : '<span style="font-weight:bold">标称下限</span>',
		tooltip : '可编辑列',
		editor : new Ext.form.NumberField({
			id : 'lowerOffsetEditor',
			allowBlank : false
		})
	} ]
});

var gridPanel = new Ext.grid.EditorGridPanel({
	region : "center",
	frame : false,
	store : store,
	cm : cm,
	loadMask : true,
	tbar : [ '-', {
		text : '保存',
		id : 'savePhysical',
		icon : '../../../resource/images/btnImages/disk.png',
		handler : function(){
			// 保存用js代码
		}
	} ]
});

二、使用listener动态改变编辑器

修改后gridPanel如下：

var gridPanel = new Ext.grid.EditorGridPanel({
	region : "center",
	frame : false,
	store : store,
	cm : cm,
	loadMask : true,
	tbar : [ '-', {
		text : '保存',
		id : 'savePhysical',
		icon : '../../../resource/images/btnImages/disk.png',
		handler : function(){
			// 保存用js代码
		}
	},
	listeners : {
		'beforeedit' : function(e) {
			var kind = e.record.get("kind");
			if (kind == "a" || kind == "b") {
				this.getColumnModel().setEditor(e.column, new Ext.form.TextField({
					editable : true,
					allowBlank : false,
					regex : /^1E-(\d)+$/
				}));
			} else {
				this.getColumnModel().setEditor(e.column, new Ext.form.NumberField({
					allowBlank : false
				}));
			}
		}
	}