extjs - 如何使用过滤后的数据保留 ExtJS 网格中的选择？

Question

我正在使用 ExtJS 4.1.2，并且我有一个 Ext.grid.Panel，带有复选框选择模型和标题中的文本框，用于过滤网格中的项目:

var nameStore = new Ext.data.Store({
    ...
    proxy: { type: 'ajax' ... },
    fields: [ { name: 'name', type: 'string' }, ... ],
});

var headerBar = new Ext.toolbar.Toolbar({
    xtype: 'toolbar',
    dock: 'top',
    layout: 'fit',
    items: [{
        xtype: 'textfield',
        ...,
        listeners: {
            change: function(fld, newVal, oldVal, opts) {
                var grid = ...;
                if (newVal.length > 0)
                    grid.store.filterBy(function(record, id) { return record.get('name').indexOf(newVal) !== -1; });
                else
                    grid.store.clearFilter()
            }
        }
    }]
});

var nameGrid = new Ext.grid.Panel({
    ...
    selType: 'checkboxmodel',
    selModel: { mode: 'SIMPLE' },
    store: nameStore,
    columns: [ { dataIndex: 'name', flex: true }, ... ],
    dockedItems: [ headerBar ],
    bbar: [ { xtype: 'tbtext', text: '0 items selected' ... },
    listeners: {
        selectionchange: function(selModel, selected, opts) {
            var txt = ...;
            txt.setText(Ext.String.format("{0} items selected", selected.length));
        }
    }
});

如图所示，nameStore 的过滤器根据 headerBar 文本框中的值应用(或删除)。此外，当选择/取消选择项目时，底部栏中的文本字符串也会更新。

这些功能中的每一个都可以单独顺利运行。但交互给我带来了麻烦:如果选择了一个项目，然后被过滤掉，那么它会被取消选择，然后在清除过滤器时仍然如此。

如何维护“隐藏”项目的选择(或至少对用户来说是这样)，以便在应用程序的其他地方使用或在清除过滤器时重新选择？谢谢!

Answer 1

您无需单独添加所选网格。这只能在一个网格中完成。简单的方法是在页面范围内有一个数组变量，并捕获网格选择事件或 itemclick 事件，无论你想要什么。

例如，如果您使用选择事件，它将为您提供记录。

select( this, record, index, eOpts )

您可以获取记录 ID 并将其推送到您声明的数组变量中。一旦你过滤掉网格。您可以循环遍历过滤后的记录并通过获取选择模型来调用 select 方法。例如

grid.getSelectionModel().select(record);

希望这会有所帮助。