ExtJs的列模式column详解

概述

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

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

1.默认的 xtype:gridcolumn

2.Ext.grid.column.Actionxtype:actioncolumn

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

alertText:String设置应用image元素上的althandler:function(view,rowindex,colIndex,item,e);触发的点击事件icon：图标的资源地址(图片资源)iconCls:图片样式， 指定的一个css的类名items:多个图片的数组，在使用MVC的时候建议不要用stopSelection设置是否单机选中不选中 

3.Ext.grid.column.Booleanxtype:booleancolumn

boolean类型的列模式

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

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

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

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

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

6.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);                     }    });