Grid组件

1. 表格面板类Ext.grid.Panel基本属性。（两个别名xtype:gridpanel, grid）

 

    重要的配置参数：
       （1）columns : Array 列模式(Ext.grid.column.Columnxtype: gridcolumn)
        列里面的常用配置参数：
                text : String 列的标题 默认是""
                dataIndex : String 和Model的列一一对应的
                field: {} //配合插件使用，告诉插件在那一列起作用
                xtype:默认为gridcolumn
                renderer : function(value) //可以列里面值显示之前，做一些改变。

                                                   //参数value就是列的值，我可以在函数处理后，返回其改变后的值。
       （2）title : String 表格的标题，如果不写默认表格是没有头标题那一栏。
       （3）renderTo : Mixed 把表格渲染到什么地方，即展示到那个元素里面。
       （4）width : Number 宽 
       （5）height: Number 高            
       （6）frame : Boolean 是否填充渲染这个Panel（渲染的比较好看）
       （7）forceFit : true 设定表格列的长度是否自动填充
       （8）store : store 数据集合
       （9）tbar: [] 头部工具栏，里面可以放置各种按钮
       （10）bbar：[] 底部操作栏，一般放分页面板 
       （11）dockedItems : Object/Array 更具有位置的灵活性,当你用这个属性时,

                                                     可以指定工具条停靠在表格中上下左右位置；可以用来替换tbar与bbar。 
        
       （12）selType : 'checkboxmodel'/'rowmodel'/'cellmodel',

                             选择模式即选中记录方式：选择框/鼠标单击或双击行选择/鼠标单击或双击单元格选择

                            （用多选框模式时,forceFit属性最好不启用，或则样式不好看）
       （13）multiSelect :true,//允许多选 与上面属性联合属性
       （14）plugins :[] 插件的形式，为表格添加一些特殊的功能（eg：单元格编辑、行编辑以及行拖拽等）

 

         例子可以参考上面MVC里面view层里面的grid定义。

 

2. 常用表格的列都有哪些类型。

 

    （1）Ext.grid.column.Column xtype: gridcolumn 普通列
    
    （2）Ext.grid.column.Action xtype: actioncolumn
        在表格中渲染一组图标按钮,并且为他赋予某种功能，类似于链接
          altText : String 设置应用image元素上的alt
          handler : function(view,rowindex,collndex,item,e);
          icon     : 图标资源地址
          iconCls : 图标样式
          items   : 多个图标的数组   //在使用MVC的时候建议不要用  如果大家有好得放大请与uspcat联系 
                function(o,item,rowIndex,colIndex ,e)
          stopSelection : 设置是否单击选中不选中
            
   （3）Ext.grid.column.Boolean xtype: booleancolumn
          falseText,

          trueText
        
   （4）Ext.grid.column.Date xtype: datecolumn
          format:'Y年m月的日'
        
   （5）Ext.grid.column.Number xtype: numbercolumn
          format:'0,000'
        
   （6）Ext.grid.column.Template xtype: templatecolumn
          xtype:'templatecolumn',
          tpl :"${字段的名称}"  可以进行动态的组合字段的值，作为该字段的值。

   （7）Ext.grid.RowNumbererxtype: rownumberer    //显示行号

Ext.define("AM.view.List",{
 extend:'Ext.grid.Panel',
 title : 'Grid Demo',//标题
 alias: 'widget.userlist',
 frame : true,//面板渲染
 width : 1000,
 height: 280,
 columns : [ //列模式
    Ext.create("Ext.grid.RowNumberer",{}),
    {text:"Name",dataIndex:'name',100},
    {text:"age",dataIndex:'age',100},
    {text:"email",dataIndex:'email',200,
     field:{
      xtype:'textfield',
      allowBlank:false
     }
    },{
     text:'sex',
     dataIndex:'sex',
     50,
     DDName:'sy_sex',
     renderer:function(value){
      if(value){
       if(value == "女"){
        return "<font color='green'>"+value+"</font>"
       }else if(value == "男"){
        return "<font color='red'>"+value+"</font>"
       }
      }
     }
    },{
     text:'isIt',
     dataIndex:'isIt',
     xtype : "booleancolumn",
     50,
     trueText:'是',
     falseText:'不是'
    },{
     text:'birthday',
     dataIndex:'birthday',
     xtype : "datecolumn",
     150,
     format:'Y年m月d日'
    },{
     text:'deposit',
     dataIndex:'deposit',
     xtype:'numbercolumn',
     150,
     format:'0,000'
    },{
     text:'描述',xtype:'templatecolumn',
     tpl:'姓名是{name} 年龄是{age}',
     150
    },{
     text:'Action',xtype:'actioncolumn',
     id:'delete',
     icon:'app/view/image/table_delete.png',
     50//,
//     items :[
//      {},{}
//     ]
//     handler:function(grid,row,col){
//      alert(row+" "+col);
//     }
    }
 ],
 tbar :[
    {xtype:'button',text:'添加',iconCls:'table_add'},
    {xtype:'button',id:'delete',text:'删除',iconCls:'table_remove'},
    {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,//运行多选
 store : 'Users',
 initComponent:function(){
  this.callParent(arguments);
 }
});

3. 选择模型Ext.selection.Model的用法（嵌套在一些高级组件使用）以及表格的一些特性功能。

 

     选择模型Ext.selection.Model的用法

    （1）选择模式的根类Ext.selection.Model (通过选择模式里面提供的方法进行操作行的选择)
           重要方法：
                撤销选择 deselect( Ext.data.Model/Index records, Boolean suppressEvent ) : void
                得到选择的数据getSelection( ) : Array
                得到最后被选择数据getLastSelected( ) : void
                判断你指定的数据是否被选择上isSelected( Record/Number record ) : Boolean
                选择你指定的行selectRange( Ext.data.Model/Number startRow, Ext.data.Model/Number endRow, [Boolean keepExisting], Object dir ) : void
                keepExisting true保留已选则的项,false重新选择，不保留已选则的项
            
   （2） 隐藏了一个单元格的选择模式 selType: 'cellmodel'    (从这发现的Ext.grid.plugin.CellEditing)
           重要方法
                得到被选择的单元格getCurrentPosition() Object
                    Ext.JSON.encode()
                    itemclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object options )

                selectByPosition({"row":5,"column":6}) 很实用，选中你要特殊处理的数据单元格
            
   （3） Ext.selection.CheckboxModel 多选框选择器
        重要方法
    
   （4）Ext.selection.RowModel      rowmodel 行选择器（通过鼠标单击表的行记录进行选择）
         重要属性
              multiSelect 允许多选
              simpleSelect 单选选择功能
              enableKeyNav 允许使用键盘上下键选择

 

    表格的一些特性功能 

   （1）Ext.grid.feature.RowBody  表格的行体（在行的下面来一个空白行，显示你所需要的信息）
          重要方法
                getAdditionalData( Object data, Number idx, Ext.data.Model record, Object orig ) : void
                如果你要展示这个面板那么必须复写这个方法
                features: [
                        Ext.create("Ext.grid.feature.RowBody",{
                            getAdditionalData:function(data,idx,record,orig){
                                ......
                            }
                        })
                ],    
                2.必须返回行体的对象
                var headerCt = this.view.headerCt,
                    colspan  = headerCt.getColumnCount();
                return {
                    rowBody: "",
                    rowBodyCls: this.rowBodyCls,
                    rowBodyColspan: colspan
                };
                
   （2）Ext.grid.feature.AbstractSummary negative 能够在表格数据的最后做一些统计功能。

                                                                   （eg：统计某一列的平局值等）
          Ext.grid.feature.Summary
               实用方法是在
                    第一步
                    features: [{
                        ftype: 'summary'
                    }],
                    第二步
                    columns中配置summaryType: 'count', (count,sum,min,max,average)
                    summaryRenderer: function(value, summaryData, dataIndex) {
                       return Ext.String.format(' : '+value); 
                    }    
    用于对某一列，进行求平均值等。            
                            
   （3）Ext.grid.feature.Grouping        
          在store中设置可以分组的属性
            groupField : ' '
          在view中增加代码
            Ext.create("Ext.grid.feature.Grouping",{
                    groupByText : "职业分组",
                    groupHeaderTpl : "职业{name}  一共{rows.length}人",
                    showGroupsText : "展示分组",
                    startCollapsed : true
                
            }   

        
  （4）其它功能:

            重要事件
                  groupclick
                  groupdblclick
                  groupcontextmenu
                  groupexpand
                  groupcollapse

  （5）Ext.grid.feature.GroupingSummary

  （6）Ext.grid.feature.Chunking

Ext.define("AM.view.List",{
 extend:'Ext.grid.Panel',
 title : 'Grid Demo',//标题
 alias: 'widget.userlist',
 frame : true,//面板渲染
 width : 1100,
 height: 450,
 features: [
  Ext.create("Ext.grid.feature.RowBody",{
      getAdditionalData: function(data, idx, record, orig) {
          var headerCt = this.view.headerCt,
              colspan  = headerCt.getColumnCount();
          return {
              rowBody: record.get('email'),
              rowBodyCls: this.rowBodyCls,
              rowBodyColspan: colspan
          };
      }
  }),{
   ftype: 'summary'
  },Ext.create("Ext.grid.feature.Grouping",{
     groupByText : "性别分组",
     groupHeaderTpl : "性别{name}  一共{rows.length}人",
     showGroupsText : "展示分组"
    
  })
 ], 
 columns : [ //列模式
    Ext.create("Ext.grid.RowNumberer",{}),
    {text:"Name",dataIndex:'name',100},
    {text:"age",dataIndex:'age',100,
     summaryType:'average',
     summaryRenderer: function(value, summaryData, dataIndex) {
              return Ext.util.Format.number(value,"00.0")
           } 
    },
    {text:"email",dataIndex:'email',200,
     field:{
      xtype:'textfield',
      allowBlank:false
     }
    },{
     text:'sex',
     dataIndex:'sex',
     50,
     DDName:'sy_sex',
     renderer:function(value){
      if(value){
       if(value == "女"){
        return "<font color='green'>"+value+"</font>"
       }else if(value == "男"){
        return "<font color='red'>"+value+"</font>"
       }
      }
     }
    },{
     text:'isIt',
     dataIndex:'isIt',
     xtype : "booleancolumn",
     50,
     trueText:'是',
     falseText:'不是'
    },{
     text:'birthday',
     dataIndex:'birthday',
     xtype : "datecolumn",
     150,
     format:'Y年m月d日'
    },{
     text:'deposit',
     dataIndex:'deposit',
     xtype:'numbercolumn',
     150,
     format:'0,000'
    },{
     text:'描述',xtype:'templatecolumn',
     tpl:'姓名是{name} 年龄是{age}',
     150
    },{
     text:'Action',xtype:'actioncolumn',
     id:'delete',
     icon:'app/view/image/table_delete.png',
     50//,
//     items :[
//      {},{}
//     ]
//     handler:function(grid,row,col){
//      alert(row+" "+col);
//     }
    }
 ],
 tbar :[
    {xtype:'button',text:'添加',iconCls:'table_add'},
    {xtype:'button',id:'del',text:'删除',iconCls:'table_remove'},
    {xtype:'button',text:'修改',iconCls:'table_edit'},
    {xtype:'button',text:'查看',iconCls:'table_comm'},
    {xtype:'button',id:'selection',text:'selection',iconCls:'table_comm'}
 ], 
 dockedItems :[{
    xtype:'pagingtoolbar',
    store:'Users',
    dock:'bottom',
    displayInfo:true
 }],
 plugins:[
    Ext.create("Ext.grid.plugin.CellEditing",{
     clicksToEdit : 2
    })
 ],
 //selType:'rowmodel',//设定选择模式
 selType:'cellmodel',
 //multiSelect:true,//运行多选
 //enableKeyNav :true,
 store : 'Users',
 initComponent:function(){
  this.callParent(arguments);
 }
});

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
 init:function(){
  this.control({
   'userlist':{
    itemclick:function(View,  record,  item,  index,  e,  options ){
     var sm = View.getSelectionModel();//.getSelection();        
        //alert(Ext.JSON.encode(sm.getCurrentPosition()));
     sm.selectByPosition({"row":1,"column":2});
    }
   },
   'userlist button[id=selection]':{
    click:function(o){
     var gird = o.ownerCt.ownerCt;
     var sm = gird.getSelectionModel();
     //sm.deselect(0);
     //alert(sm.getLastSelected().get('name'))
     //alert(sm.isSelected(0));
     //sm.selectRange(1,2,true);
     sm.selectByPosition({"row":2,"column":3});
    }
   },
   'userlist button[id=del]':{
    click:function(o){
     var gird = o.ownerCt.ownerCt;
      var data = gird.getSelectionModel().getSelection();
      if(data.length == 0){
       Ext.Msg.alert("提示","您最少要选择一条数据");
      }else{
       //1.先得到ID的数据(name)
       var st = gird.getStore();
       var ids = [];
       Ext.Array.each(data,function(record){
        ids.push(record.get('name'));
       })
       //2.后台操作(delet)
       Ext.Ajax.request({
        url:'/extjs/extjs!deleteData.action',
        params:{ids:ids.join(",")},
        method:'POST',
        timeout:2000,
        success:function(response,opts){
         Ext.Array.each(data,function(record){
          st.remove(record);
         })
        }
       })
       //3.前端操作DOM进行删除(ExtJs)
      }
    }
   },
   "userlist actioncolumn[id=delete]":{
    click : function(o,item,rowIndex,colIndex ,e){
     alert(rowIndex+" "+colIndex);
    }
   }
  });
 },
 views:[
  'List'
 ],
 stores :[
  "Users"
 ],
 models :[
  "User"
 ] 
});

4.插件使用以及其它的特性使用。

 

（1）可编辑插件的根 Ext.grid.plugin.Editing
        Ext.grid.plugin.Editing
             Ext.grid.plugin.CellEditing  这个不讲(之前课程讲过)
             保存修改的两种办法：
             a、设立保存按钮,用户单击的时候保存数据
            
                st.sync(); //数据与后台进行同步，一般不用，他会把整个记录传到后台
                           //如果不写这句，下面的语句是得不到数据的
                var records = st.getUpdatedRecords();
                Ext.Array.each(records,function(model){
                    model.commit(); //前台的小红点会消失
                });    

                我们可以selectModel来获得修改的数据，组装后在往后台传入。
                
            b.注册edit事件
                e.record.commit(); //前台的小红点会消失
        Ext.grid.plugin.RowEditing
             使用方法:(有Bug推荐4.0.1a版本还是不要用这个功能)
             Ext.create('Ext.grid.plugin.RowEditing', {
                    clicksToEdit: 1
             })                

（2）Ext.grid.plugin.DragDrop 表格拖拽
       主意:配置有变化
       viewConfig:{
          plugins:[
            Ext.create('Ext.grid.plugin.DragDrop', {
                ddGroup:'ddTree', //拖放组的名称
                dragGroup :'userlist', //拖拽组()名称
                dropGroup :'userlist'  //释放租名称
                enableDrag:true, //是否启用
                enableDrop:true
            })]
       }        
      处理事件
      listeners: {
        drop: function(node, data, dropRec, dropPosition) {
              var st = this.getStore();
              for(i=0;i<st.getCount();i++){
                  st.getAt(i).set('index',i+1);
              }
        }
      }        

（3）Ext.toolbar.Paging 分页组件

       //第一种常用分页
       dockedItems: [{
          xtype: 'pagingtoolbar',
          store: store,
          dock: 'bottom',
          displayInfo: true
      }],
    
      //第二种分页的形式(条状，拨动分页)
      Ext.Loader.setPath('Ext.ux', 'http://www.cnblogs.com/../extjs4/examples/ux');
      Ext.require([
          'Ext.ux.data.PagingMemoryProxy',
          'Ext.ux.SlidingPager'
      ]);    
      bbar: Ext.create('Ext.PagingToolbar', {
         pageSize: 10,
         store: store,
         displayInfo: true,
         plugins: Ext.create('Ext.ux.SlidingPager', {})  ---- 重点是这
      })    

（4）Ext.grid.property.Grid
      属性配置框面板
      当通过页面自动配置一些属性时候了可以考虑用
    
（5）列锁定
      {text:"age",dataIndex:'age',100,locked:true},类似于excel里的冻结功能

（6）复杂表头
       列里面又包含列(不能和字段过滤一起使用)
       columns：{
          text:'other',columns:[
            {text:"age",dataIndex:'age',100,locked: true},
            {text:"int",dataIndex:'index',100}]
        }

（7）字段过滤
    Ext.require([
        'Ext.ux.grid.FiltersFeature'
    ]);
    Ext.define("AM.class.filters",{
        alias: 'widget.filters',
        ftype: 'filters',
            encode: false, 
            local: true, 
            filters: [{
                    type: 'boolean',
                    dataIndex: 'visible'
                }
         ]
    })
    view层中
    features: [Ext.create("AM.class.filters")],
    列中添加配置{filterable: true,text:"age",dataIndex:'age',100,filter: {type: 'numeric'}}

Ext.define("AM.util.filters",{
 alias: 'widget.filters',
 ftype: 'filters',
        encode: false, 
        local: true, 
        filters: [{
                type: 'boolean',
                dataIndex: 'visible'
            }
     ]
})

Ext.define("AM.view.List",{
 extend:'Ext.grid.Panel',
 title : 'Grid Demo',//标题
 alias: 'widget.userlist',
 frame : true,//面板渲染
 width : 500,
 height: 380,
 columns : [ //列模式
    //{text:"Name",dataIndex:'name',100,locked:true},
    {text:"Name",dataIndex:'name',100},
    //{text:'others',columns:[
     {text:"age",dataIndex:'age',100,filterable: true,filter: {type: 'numeric'}},
     {text:"email",dataIndex:'email',250,
      field:{
       xtype:'textfield',
       allowBlank:false
      }
     },{
      text:'index',dataIndex:'index',100
     }     
    //]}
 ],
 features: [Ext.create("AM.util.filters")],
 tbar :[
    {xtype:'button',text:'添加',iconCls:'table_add'},
    {xtype:'button',id:'delete',text:'删除',iconCls:'table_remove'},
    {xtype:'button',text:'修改',iconCls:'table_edit'},
    {xtype:'button',text:'查看',iconCls:'table_comm'},
    {xtype:'button',text:'save',id:'save',iconCls:'table_comm'}
 ], 
 dockedItems :[{
    xtype:'pagingtoolbar',
    store:'Users',
    dock:'bottom',
    displayInfo:true,
    plugins: Ext.create('Ext.ux.SlidingPager', {}) 
 }],
 //plugins:[
//    Ext.create("Ext.grid.plugin.CellEditing",{
//     clicksToEdit : 2
//    })
//    Ext.create('Ext.grid.plugin.RowEditing', {
//              clicksToEdit: 1
//          })
 //],
 viewConfig:{
  plugins:[
         Ext.create('Ext.grid.plugin.DragDrop', {
          ddGroup:'ddTree', //拖放组的名称
             dragGroup :'userlist', //拖拽组名称
             dropGroup :'userlist',  //释放租名称
             enableDrag:true, //是否启用
             enableDrop:true
         })],
  listeners: {
         drop: function(node, data, dropRec, dropPosition) {
                var st = this.getStore();
                for(i=0;i<st.getCount();i++){
                    st.getAt(i).set('index',i+1);
              }
         }
     }          
 }, 
 //selType:'checkboxmodel',//设定选择模式
 //multiSelect:true,//运行多选
 store : 'Users',
 initComponent:function(){
  this.callParent(arguments);
 }
});