我如何获得分页工具栏中的检查行数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/