ExtJs的列模式column详解


概述:列模式,就是在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);

                     }    

});   

你可能感兴趣的:(function,table,delete,ExtJs,button,plugins)