Extjs column知识【DOC精选】.docxVIP

Ext.grid.column.Column类定义了表格内部与列相关的配置，其中包括列标题及数据展示。创建Ext.grid.Panel时，必须指定columns选项，该选项要么是Ext.grid.column.Column数组，要么是JavaScript对象，该对象中必须包含一个items属性，该属性值依然是Ext.grid.column.Column数组——总之，定义Ext.grid.Panel时，必须传入Ext.grid.column.Column数组来定义各数据列。1、Ext.grid.column.Column主要配置项配置项类型说明alignString设置列标题和数据的对齐方式，默认为leftcolumnsArray设置组列dataIndexString设置列与数据集中数据的对应关系，值为数据模型中的字段名称draggableBoolean列头是否可以拖动，默认为trueflexNumber列宽所占flex和的比例（flex只在当layOut为vbox,hbox中起作用。grid的默认layOut应该为vbox）groupableBoolean在使用Ext.grid.feature.Grouping分组特性的情况下是否禁用该列在标题菜单中的分组功能headerString列标题hideableBooleanfalse则阻止用户隐藏该列，默认为truemenuDisabledBooleantrue则禁用标题菜单，默认为falserenderFunction自定义渲染函数sortableBoolean是否允许进行排序，默认为true,将根据Ext.data.Store.remoteSort判断进行本地排序还是远程排序。textString列标题，header配置项优先widthNumber列宽2、Ext.grid.column.Column的子类Ext.grid.column.Column是所有列定义的基类，它包含如下图所示的子类。?2.1、布尔列Ext.grid.column.Boolean配置项配置项类型说明falseTextString渲染false值对应的文本，默认为falsetrueTextString渲染true值对应的文本，默认为true2.2、数字列Ext.grid.column.Number配置项配置项类型说明formatString设置Ext.util.Format.number函数的格式化字符串，默认为0,000.002.3、日期列Ext.grid.column.Date配置项类型说明formatString设置Date.format函数的格式化字符串，默认为Ext.Date.defaultFormat2.4、模板列Ext.grid.column.Template配置项类型说明tplString/XTemplate设置一个XTemplate模板对象或模板定义，模板数据将被传入其中2.5、行号列Ext.grid.RowNumberer配置项类型说明textString显示在列表标题中的文本或HTML代码段widthNumber行号列的宽度，默认为23px2.6、Ext.ux.CheckColumn第三方扩展的列类型，需要额外导入examples\ux目录下的CheckColumn.js文件，它会显示一个允许用户通过单击来改变boolean值的列。为了使用Ext.ux.CheckColumn列类型，除了需要导入examples\ux目录下的CheckColumn.js之外，还需要导入examples\ux\css下的CheckHeader.css样式单文件，并且要引入examples\ux\css\images目录下的图片。因此需要将它们复制到应用目录下。2.7、Ext.grid.column.ActionExt.grid.column.Action列则用于定义包含多个“动作”按钮的列，当开发者单击不同的“动作”按钮时，触发不同的事件处理函数，即可对数据进行相应的操作。如下示例示范了各种列类型的功能和用法。bodyscript type=text/javascriptExt.onReady(function(){??? // 初始化工具提示??? Ext.tip.QuickTipManager.init();??? // 创建一个Ext.data.Store对象??? var userStore = Ext.create(Ext.data.Store,??? {???????? // 直接使用data指定数据???????? data : [?????????????? {name: 孙悟空, isMarried: false , birthDate: 0178-12-12,?????????????