ExtJs的列模式column详解

来源：互联网发布：javascript内置函数编辑：程序博客网时间：2024/05/24 05:04

概述：列模式，就是在grid组件创建的时候，指定的列模式，我们可以将数据更好的展示和列的功能按钮扩展等。

一、列模式的主类 Ext.grid.column.Column xtype:gridcolumn

1.Ext.grid.column.Actionxtype:actioncolumn

在表格中渲染一组图片按钮，并且为它赋予功能

alertText:String设置应用image元素上的alt

handler:function(view,rowindex,colIndex,item,e);触发的点击事件

icon：图标的资源地址(图片资源)

iconCls:图片样式，指定的一个css的类名

items:多个图片的数组，在使用MVC的时候建议不要用

stopSelection设置是否单机选中不选中

2.Ext.grid.column.Booleanxtype:booleancolumn boolean类型的列模式

falseText当值为false的时候显示什么信息

trueText 当值为true的时候显示什么信息

3.Ext.grid.column.Datextype: datacolumn 日期的列模式

format指定的是格式如 Y年m月d日

4.Ext.grid.column.Numbernumbercolumn number的列模式

format指定的显示数值的格式0,000

5.Ext.grid.column.Templatextype:templatecolumn 模版类型的列模式常用于显示model的其他属性，比如描述等。

tpl指定显示信息，当使用到model的属性时候可以用{属性名}来，则可以显示出数据

二、不在column包下面的列模式指定

Ext.grid.RowNumberxtype rownumber

直接创建这个类，当作列模式指定的对象

简单了解：

我们可以将一些固定的数据做成缓存，直接在前台中调用，如果没有就去请求后台来加入

数据字典

业务数据字典：风险等级，城市

不变的数据字典：男，女是，否人的血型

代码实现：(主要在view层中来指定列模式，其他的事件等model改动的代码暂不显示了)

Ext.define("AM.view.List",{

extend:"Ext.grid.Panel",

title:"GridDemo", //标题

frame:true, //面板渲染

alias:"widget.userlist", //设置别名

//forceFit:true,//设置是否自动填充

width:1000,

height:280,

columns:[ //列模式并设置前台编辑

Ext.create("Ext.grid.RowNumberer",{}),

{text:"Name",dataIndex:"name",width:100},

{text:"Age",dataIndex:"age",width:100},

{ //个性化显示数据

text:"性别",

dataIndex:"sex",

renderer:function(value){

if(value=="女"){

return"<font color='green'>女</font>";

}elseif(value=="男"){

return"<font color='red'>男</font>";

}

{text:"Email",dataIndex:"email",width:200,

field:{

xtype:"textfield",

allowBlank:false

}

},{//显示boolean类型

text:"isIt",

xtype:"booleancolumn",

dataIndex:"isIt",

trueText:"是",

falseText:"不是"

},{

text:"生日",

xtype:"datecolumn",

dataIndex:"birthday",

format:"Y年m月d日",

width:150

},{//显示number类型

text:"收入",

xtype:"numbercolumn",

dataIndex:"deposit",

format:"0,000",

width:150

},{//templatecolumn列模式的使用

text:"描述",

xtype:"templatecolumn",

tpl:"名字是{name},年龄是{age}",

width:150

},{//Action模式的使用，增加事件机制，在controller层用别名查找方式来指定事件，也可以用handler字段

text:"Action",

xtype:"actioncolumn",

id:'del',

icon:"app/view/image/delete.jpg",

width:50

}

tbar:[ //上方工具栏

{xtype:"button",text:"添加",iconCls:"table_add"},

{xtype:"button",id:'delete',text:"删除",iconCls:"table_delete"},

{xtype:"button",text:"修改",iconCls:"table_edit"},

{xtype:"button",text:"查看",iconCls:"table_comm"}

dockedItems:[{

xtype:"pagingtoolbar",

store:"Users",

dock:"bottom",//指定在那个位置

displayInfo:true //设置显示

}],

//设置前台编辑，首先在列模式中指定，然后使用插件机制来添加插件

plugins:[

Ext.create("Ext.grid.plugin.CellEditing",{

clicksToEdit:2

})

selType:"checkboxmodel", //设置选择模式，设置成多选框的模式

multiSelect:true, //设置成多选

// renderTo:"griddemo",

store:"Users",//指定数据集

initComponent:function(){

this.callParent(arguments);

}

});