如何在pagingtoolbar Ext js 4.2中获取已检查的行号?

时间:2014-09-19 09:30:00

标签: javascript extjs extjs4.1 extjs4.2

我想显示在我的pagingtoolbar中检查的行数?   所以我有这个:

       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: - ?显示检查了多少行: - ?

1 个答案:

答案 0 :(得分: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/