ExtJS 的一些使用总结（适用于3.x版本）——第二弹

最新推荐文章于 2019-07-03 16:55:51 发布

Highnesss

最新推荐文章于 2019-07-03 16:55:51 发布

阅读量984

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJs 文章标签： extjs

本文链接：https://blog.youkuaiyun.com/javahighness/article/details/47447841

ExtJs 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用ExtJS实现动态生成表格列和自定义单元显示内容，包括验证输入类型、回车事件处理及树形节点添加右键菜单的功能。

这些方法大多运行在ExtJS3.2到3.6版本，极个别方法也可以用于4.x版本，请使用前先测试。

动态生成表格列
有时候表格显示的列不固定，或者是从数据库中读取某一个表的字段来显示的，Extjs表格需要一个fields属性和一个columnModel属性，所以后台需要动态生成这两个对象。

JSONObject jsonObject = new JSONObject();				
jsonObject.put("name", object.get("zdmc"));

JSONObject jsonObject2 = new JSONObject();							
jsonObject2.put("header", object.get("zdmc"));//显示的列名称			
jsonObject2.put("dataIndex", object.get("zdmc"));
jsonObject2.put("width", 150); // 每一列的宽度
jsonObject2.put("align", "center"); // 内容居中显示

// 判断 各种类型 的字段 ， 并添加 验证信息
if ("短整型".equals(object.get("type")) || "长整型".equals(object.get("type")) || "单精度".equals(object.get("type")) || "双精度".equals(object.get("type"))) {
	StringBuilder numField = new StringBuilder();
	numField.append("new Ext.form.NumberField( { ");
	numField.append("maxLength : " + object.get("size")); // 允许最大长度
	if (!"true".equals(object.get("flag"))) {
		numField.append(", allowBlank : false"); // 是否允许为空
	}
	//
	if ("短整型".equals(object.get("type"))) {
		numField.append(", validator : function(value){"); 
		numField.append("if(value >= -32768 && value <= 32767 && value.toString().indexOf('.') == -1){return true;}else{return '该字段为短整型,范围为-32768 到 32767';}");		 
		numField.append("}");
	}
	if ("长整型".equals(object.get("type"))) {
		numField.append(", validator : function(value){"); 
		numField.append("if(value >= -2147483648 && value <= 2147483647 && value.toString().indexOf('.') == -1){return true;}else{return '该字段为长整型,范围为-2147483648 到 2147483647';}"); 
		numField.append("}");
	}
	
	numField.append(" } )");
	jsonObject2.put("editor", numField.toString());
	
}else if ("字符型".equals(object.get("type"))) {
	StringBuilder textField = new StringBuilder();
	textField.append("new Ext.form.TextField( { ");
	textField.append("maxLength : " + object.get("size")); // 允许最大长度
	if (!"true".equals(object.get("flag"))) {
		textField.append(", allowBlank : false"); // 是否允许为空
	}
	textField.append(" } )");
	jsonObject2.put("editor", textField.toString());
}else if ("日期".equals(object.get("type"))) {
	StringBuilder dateField = new StringBuilder();
	dateField.append("new Ext.ux.form.DateTimeField( { ");
	dateField.append("format : 'Y-m-d H:i:s'");
	if (!"true".equals(object.get("flag"))) {
		dateField.append(", allowBlank : false"); // 是否允许为空
	}
	dateField.append(" } )");
	jsonObject2.put("editor", dateField.toString());
	jsonObject2.put("renderer", "Ext.util.Format.dateRenderer('Y-m-d H:i:s')");
}

上面代码是一个数据列的，可以通过for循环把需要显示的列都放入一个jsonArray数组中

jsonArray_fields.put(jsonObject);
jsonArray_columnModel.put(jsonObject2);

返回一个json对象，分别包含了fields属性和columnModel属性

JSONObject json = new JSONObject();
json.put("fields", jsonArray_fields);
json.put("columnModel", jsonArray_columnModel);

在前端js中，解析request请求返回的数据 json

var json = new Ext.util.JSON.decode(resp.responseText);

生成表格代码：

var reader = new Ext.data.JsonReader( {
        fields : json.fields
});
var cm = new Ext.grid.ColumnModel( json.columnModel );

至此，动态生成表格grid的列功能实现。

自定义（格式化）单元格显示内容
比如，在每一行添加一个操作按钮，这个功能在easyui中很容易实现，使用列属性中的单元格formatter(格式化器)函数即可。但在extjs中稍微麻烦了一点，代码如下：

var cm = new Ext.grid.ColumnModel(json.columnModel);
/*
 * 用户格式化操作列 
 */
var cm_index = cm.getColumnCount() - 1;//最后一列(我这里选择的是最后一列，这一列是我手动生成的没有数据的一列，可以根据实际情况改变)
cm.setRenderer(
		cm_index ,
		function(value, metadata, record, rowIndex, columnIndex, store){
			var html = '<a href="javascript:void(0)" onclick="delete("'+record.json.ID+'")" >删除</a>';
			return html;
		}
);

注：csdn编辑器有问题，代码里html中的双引号我是用的转义字符，如下：
var html = '<a href="javascript:void(0)" onclick="delete("'+record.json.ID+'")" >删除</a>';

输入框键入“回车”触发事件

new Ext.form.FormPanel({
	plain : true,
	frame : true,
	labelWidth : 80,
	border: false,
	bodyStyle : 'padding:5px 40px 0 ',
	items : [
	  new Ext.form.FieldSet({
		width:'100%',
		items: [{
			id : 'user_name',
			xtype : 'textfield',
			fieldLabel : '用户名',
			border: false,
			enableKeyEvents : true, // 开启键盘监听，默认false
			width : 180,
			listeners : {
				'keypress' : function(f, event){
					if(event.keyCode == 13){ // 回车
						// 登录操作
					}
				}
			}
		},{
			id : 'pass_word',
			xtype : 'textfield',
			fieldLabel : '密码',
			inputType : 'password',
			border: false,
			selectOnFocus : true,
			enableKeyEvents : true,
			width : 180,
			listeners : {
				'keypress' : function(f, event){
					if(event.keyCode == 13){ // 回车
						// 登录操作
					}
				}
			}
		}]
	})],
	listeners : {
		'render' : function(){
			// 渲染后 用户名输入框 获取焦点
			Ext.getCmp('user_name').focus(false, 200);
		}
	}
});

树形节点添加右键菜单

var menuArr = new Array();
var obj = new Object();
obj.text = "修改";
obj.handler = function (){
	//操作函数
};
menuArr.push(obj);

var myMenu = new Ext.menu.Menu( {
		items : menuArr
});
//添加右键菜单
tree.on("contextmenu", function(node, e) {
	var id = node.attributes.ID;

	if (node.isLeaf()) {// 子节点
		e.preventDefault(); // 阻止浏览器对事件的默认处理
		node.select();  // 触发此节点的选中状态
		myMenu.showAt(e.getXY());  //指定X、Y的位置显示当前菜单
	}
});