extjs Ext.js增加了额外的排序功能,当第三次点击列标题时,可以清除网格中的排序

tag5nh1u  于 9个月前  发布在  其他
关注(0)|答案(1)|浏览(79)

我有一个ext.js 7.2网格面板。现在,我有默认功能,
1.第一次单击标题列时,将显示向上箭头,网格将按ASC排序
1.当第二次单击标题列时,将出现向下箭头,网格将按DESC排序。
然而,现在我想要一个额外的第三次点击,这样,当第三次点击标题列时,我想要清除排序。
我现在拥有的是一个基本类,它扩展了“Ext.grid.Panel”并继承了它的默认排序行为。
此外,我找不到一个函数,将有效地删除排序。这会抛出一个错误。

var store = this.getStore();
    var dataIndex = column.dataIndex;
    var sorters = store.getSorters();
    var currentSorter = sorters.getByKey(dataIndex);

    sorters.remove(currentSorter);
    store.reload()

注意:我不想在标题列中显示的菜单中添加此功能。我只想用箭来对付它。

azpvetkf

azpvetkf1#

请查看下面的示例代码,其中添加了“clickCount”标志变量,每次单击时,它都会递增。当点击3次时,排序被清除,当点击1或2时,分别执行ASC或DESC排序。当点击计数再次达到0时,它将恢复默认顺序。样品提琴

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: '[email protected]',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: '[email protected]',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: '[email protected]',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: '[email protected]',
                phone: '555-222-1254'
            }]
        });
        var clickCount = 0;
        var lastClickedColumn = null;

        Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            text: 'Name',
            dataIndex: 'name',
            sortable: true,
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1,
            sortable: true,
        }, {
            text: 'Phone',
            dataIndex: 'phone',
            sortable: true,
        }],
        height: 200,
        width: 400,
        renderTo: Ext.getBody(),
        listeners: {
            headerclick: function (ct, column, e, t, eOpts) {
                if (column === lastClickedColumn) {
                    clickCount++;
                    if (clickCount === 3) {
                        var GridStore = this.store;
                        GridStore.sorters.clear();
                        GridStore.load();
                        clickCount = 0;
                    }
                } else {
                    lastClickedColumn = column;
                    clickCount = 1;
                }
            }
        }
    });
}

});

相关问题