Ext4.2之Grid擴展,擴展選擇策略,自動設置分頁組件,讓Grid使用更簡潔

1.概述：

     在Ext項目開發中，Grid是用的最多的組件之一，在使用過程當中發現不少的配置都是相似的，在此對Grid作個簡單的封裝。

     任務1.在grid工具欄中常常會有新增、編輯、刪除等操做，咱們但願當用戶選擇一條記錄時編輯和刪除都可點擊，當選擇多條記錄是刪除可點擊，編輯被禁用，當不選擇時，編輯和刪除均不可用，通常這些工做都在Controller中增長selectionchange事件和render事件來完成，這樣作太繁瑣，工做量大，在這裏更簡潔的解決方案是給grid增長兩個選擇屬性，singleSelects和multiSelects，即單選策略和多選策略來完成，具體方法以下一一介紹。

     任務2.grid中分頁工具欄通常是必須的，因此也作個封裝，不用在具體的grid中在設置分頁組件了。

2.效果：（沒什麼可看的，就是一個普通的grid）

 

3.代碼（重點在這裏）

Ext.define('app.view.LinkView',{
    extend:'ux.Grid',
    alias : 'widget.linkview',
    singleSelects:['edit'], //單選策略 id
    multiSelects:['delete'],//多選策略 
    store : 'LinkStore',
    columns : [
                { text : '行號', xtype: 'rownumberer', align : 'center', width:40 },
                { text : '標題', dataIndex: 'linkTitle',align : 'left'},
                { text : '鏈接', dataIndex: 'linkUrl',align : 'left'}
              ],
    tbar : [
            {
                id : 'add',
                text : '新增',
                iconCls:'Plus-Circle'
            },
            '-',
            {
                id : 'edit',
                text : '編輯',
                //glyph : 0xf044 ,
                iconCls:'Pencil-Color'
            },
            '-',
            {
                id : 'delete',
                text : '刪除',
                //glyph : 0xf1f8,
                iconCls:'Minus-Circle'
            },
            '->',
            {
                xtype : 'textfield',
                id : 'key',
                name : "key",
                emptyText:'標題...',
                enableKeyEvents: true,
                width : 148
            }, {
                id : 'userSearch',
                glyph : 0xf002,
                id:'search',
                tooltip:'搜索',
                text : '搜索'
            }

    ],
    initComponent : function(){
        Ext.setGlyphFontFamily('FontAwesome');
        this.callParent(arguments);
    }
});

說明：變得簡潔了很多吧，紅色的部分算是擴展部分。

　①singleSelects:['edit'] :表示只有選擇一行記錄是edit纔可點擊，其餘狀況被禁用，edit表示按鈕的id。

   ② multiSelects:['delete'] : 表示當選擇不止一條記錄時可點擊。delete爲按鈕id

   ③ 沒有看到設置分頁組件的代碼，可是有分頁組件，這都在ux.Grid.js中完成。

   ④ 還有許多其餘默認屬性均在ux.Grid.js中設置。

4.ux.Grid.js

/**
 * 擴展Ext Grid,增長singleSelects和multiSelects,默認有分頁組件，說明以下
 */
Ext.define('ux.Grid',{
    extend:'Ext.grid.Panel',
    alias : 'widget.uxgrid',
    frame:false,
    border:false,
    layout:'fit',
    
    forceFit : true,
    columnLines : true,
    //選擇策略
    singleSelects:null, //單選策略 //當選擇一條記錄是啓用,其餘狀況禁止
    multiSelects:null,  //多選策略 //當選擇一條或多條記錄是啓用,不選擇是禁用
    
    selType : 'checkboxmodel',
    multiSelect : true,
    store : 'LinkStore',
    emptyText : '未找到任何數據!',
    
    initComponent : function(){
        this.callParent(arguments);
        var grid = this;
        var singles = this.singleSelects != null?this.singleSelects:[];
        var multis = this.multiSelects !=null?this.multiSelects:[];
        grid.on('render',function(){
                for(var i=0;i<singles.length;i++){
                    Ext.getCmp(singles[i]).disable(true);
                }
                for(var i=0;i<multis.length;i++){
                    Ext.getCmp(multis[i]).disable(true);
                }
        });
        grid.on('selectionchange',function(selectModel, selected, eOpts){
            if(selected.length==1){
                for(var i=0;i<singles.length;i++){
                    Ext.getCmp(singles[i]).enable(true);
                }
                for(var i=0;i<multis.length;i++){
                    Ext.getCmp(multis[i]).enable(true);
                }
            }else if(selected.length > 1){
                for(var i=0;i<singles.length;i++){
                    Ext.getCmp(singles[i]).disable(true);
                }
                for(var i=0;i<multis.length;i++){
                    Ext.getCmp(multis[i]).enable(true);
                }
            }else{
                for(var i=0;i<singles.length;i++){
                    Ext.getCmp(singles[i]).disable(true);
                }
                for(var i=0;i<multis.length;i++){
                    Ext.getCmp(multis[i]).disable(true);
                }
            }
        });
        //設置分頁組件
        grid.addDocked(
            {
                xtype : 'pagingtoolbar',
                store : grid.getStore(),
                dock : 'bottom', 
                displayInfo : true,
                plugins:[
                    //靠左邊的頁碼進度
                    //Ext.create('Ext.ux.SlidingPager', {}),
                    //右邊顯示進度
                    Ext.create('Ext.ux.ProgressBarPager',{})
                ]
            }
        );
    }
});

 說明：

 Ext.create('Ext.ux.SlidingPager', {}),Ext.create('Ext.ux.ProgressBarPager',{})，這是在Ext.ux.*包中的分頁組件風格，要想使用，必須將他們導入到你的項目中，默認在ext的examples包中，把他們考到src目錄下便可。
 加載路徑：