EXTJS表格列xtype详解

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

以雨泽漫画的后台为例，需要在列末尾增加几个按钮，“完结状态“、“推荐”、”编辑“、”预览“等按钮。

如下图所示：



代码实现：(主要在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);
}
});

一、列类型的主类 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.RowNumber xtype rownumber

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

简单了解：

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

数据字典

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

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