ExtJs的列模式column详解

Bertha 。 2021-09-14 10:32 889阅读 0赞

### 概述 ###

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

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

#### 1.默认的 xtype:gridcolumn ####

#### 2.Ext.grid.column.Actionxtype:actioncolumn ####

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

alertText:String设置应用image元素上的alt
    handler: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);
                         }    
    });