Extjs5 自动生成列权限代码,JS代码库,德仔网

代码语言

代码分类

【JS】 Extjs5 自动生成列权限

作者:fengbin8606 / 发布于2014/12/30/ 712

fieldType : 以"_"开头表示初始化editor,否则不被编辑 hide : true表示不渲染该列，可用于权限控制同样适用于复杂表头的Grid


	初始化grid的时候给items

	type : 'cusgrid',
	items : [ {
	 text : 'ID',
	 dataIndex : 'id',
	 fieldType : '_int'
	}, {
	 header : '基本信息',
	 columns : [ {
	 text : 'Name',
	 flex : 1,
	 dataIndex : 'name',
	 //summaryType : 'count',
	 fieldType : '_',
	 }, {
	 text : 'Email Address',
	 //summaryType : 'count',
	 dataIndex : 'email',
	 fieldType : '_',
	 }, {
	 text : 'Sex',
	 dataIndex : 'sex',
	 hide : true,//表示不渲染该列
	 //summaryType : 'count',
	 fieldType : '_sex'
	 }, {
	 text : 'Tel',
	 dataIndex : 'tel',
	 fieldType : '_percent'
	 } ]
	}, {
	 text : 'CreateDate',
	 dataIndex : 'createDate',
	 //summaryRenderer : Ext.util.Format.dateRenderer,
	 //summaryType : 'max',
	 fieldType : '_datetime'
	} ]

	

	在grid的initComponent里面调用

	app.view.widget.customgrid.ColumnsFactory
	 .getColumns(me.items);
	 me.columns = me.items;

	

	用于生成Grid的Columns的类

	/**
	* 用于生成Grid的Columns的类
	*/
	
	Ext.define('app.view.widget.customgrid.ColumnsFactory', {
	 statics : {
	 getColumns : function(columns) {
	 for ( var i in columns) {
	 var col = columns[i];
	 if (col.hide) {
	 columns[i] = null;
	 continue;
	 }
	 var eidtable = Ext.String.startsWith(col.fieldType, '_');
	 var type = col.fieldType;
	 if (!type)
	 app.view.widget.customgrid.ColumnsFactory
	 .getColumns(col.columns);
	 if (eidtable) {
	 type = type.substring(1);
	 }
	 var filed, editor;
	 switch (type) {
	 case 'sex':
	 filed = {
	 align : 'center',
	 width : 70,
	 renderer : Ext.util.Format.sexRenderer,
	 };
	 editor = {
	 xtype : 'combo',
	 editable : false,
	 store : Ext.common.store.sex
	 };
	 break;
	 case 'date':
	 filed = {
	 width : 100,
	 align : 'center',
	 renderer : Ext.util.Format.dateRenderer,
	 };
	 editor = {
	 xtype : 'datefield',
	 format : 'Y-m-d',
	 editable : false
	 };
	 break;
	 case 'datetime':
	 filed = {
	 align : 'center',
	 width : 160,
	 renderer : Ext.util.Format.dateTimeRenderer
	 };
	 editor = {
	 xtype : 'datefield',
	 format : 'Y-m-d h:i:s',
	 editable : false
	 };
	 break;
	 case 'bool':
	 filed = {
	 xtype : 'booleancolumn',
	 stopSelection : false,
	 processEvent : function(type) { // 加入这一句，可以防止点中修改
	 if (type == 'click')
	 return false;
	 }
	 };
	 editor = {
	 xtype : 'checkboxfield',
	 inputValue : 'true',
	 uncheckedValue : 'false'
	 };
	 break;
	 case 'int':
	 filed = {
	 format : '#',
	 renderer : Ext.util.Format.intRenderer,
	 };
	 editor = {
	 xtype : 'numberfield',
	 hideTrigger : true,
	 keyNavEnabled : false,
	 mouseWheelEnabled : false,
	 allowBlank : false
	 };
	 break;
	 case 'money':
	 filed = {
	 width : 110,
	 renderer : Ext.util.Format.monetaryRenderer,
	 };
	 editor = {
	 xtype : 'numberfield',
	 hideTrigger : true,
	 keyNavEnabled : false,
	 mouseWheelEnabled : false,
	 allowBlank : false
	 };
	 break;
	 case 'percent':
	 filed = {
	 align : 'center',
	 renderer : Ext.util.Format.percentRenderer,
	 width : 110
	 };
	 editor = {
	 xtype : 'numberfield',
	 step : 0.01
	 };
	 break;
	 default:
	 editor = {
	 xtype : 'textfield'
	 };
	 break;
	 }
	 delete col['fieldType'];
	 Ext.applyIf(col, filed);
	 if (eidtable)
	 Ext.applyIf(col, {
	 editor : editor
	 });
	
	 }
	 }
	 }
	});

试试其它关键字

　Extjs5　

同语言下

可能有用的

fengbin8606贡献的其它代码(7)