我如何獲得分頁工具欄中的檢查行數Ext js 4.2？

Question

我想顯示在我的分頁工具欄中選中的行數？ 所以我有這樣的：

 dockedItems: [ 
      { 
       xtype: 'pagingtoolbar', 
       dock: 'bottom', 
       displayInfo: true, 
       plugins: 'pagesize' 

      } 
     ] 

在同一頁面中我有這個功能看到檢查哪些行：

getSelectedItems: function() { 
    var me = this; 
    var selItems = me.dyn.view.getSelectionModel().getSelection(); 
    var selItemsLength = selItems.length; 
    var selItemsIds = []; 
    var i = 0; 
    if (selItemsLength) { 
     for (i = 0; i < selItemsLength; i++) { 
      selItemsIds.push(selItems[i].internalId); 
     } 
    } 
    return selItemsIds; 
} 

我怎麼能我的getSelectedItems鏈接到我的pagingtoolbar： - ？向我顯示檢查了多少行： - ？

Answer 1

您可以擴展Ext.toolbar.Paging並添加適當的元素並將selectionchange事件處理程序附加到網格的選擇模型。例如：

Ext.define('Ext.ux.toolbar.Paging', { 
    extend: 'Ext.toolbar.Paging', 

    config: {   
     selectionModel: null 
    }, 

    initComponent : function() { 
     var me = this; 

     me.prependButtons = false; 
     me.items = [ 
      {xtype: 'tbtext', itemId: 'selectedItem', text:'Selected: 0'} 
     ]; 

     me.callParent(); 
    }, 

    applySelectionModel: function (model, oldModel) { 
     var me = this; 

     if (oldModel) { 
      oldModel.un('selectionchange', me.onSelectionChange, me); 
     } 
     if (model) { 
      model.on('selectionchange', me.onSelectionChange, me); 
     } 
     return model; 
    }, 

    // Update text on selection change 
    onSelectionChange: function (model, selected) { 
     this.down('#selectedItem').setText('Selected: ' + selected.length); 
    }, 

    // Autobind model if toolbar is attached to grid 
    afterRender: function() { 
     var grid = this.up('grid', 1), 
      model = this.getSelectionModel(); 

     this.callParent(); 
     if (!model && grid) { 
      this.setSelectionModel(grid.getSelectionModel()); 
     } 
    } 
}); 

工作樣品：http://jsfiddle.net/8zpb6tv5/2/