Question

所以我目前正在开发一个涉及使用模板列创建大量网格的项目，我想知道是否可以对模板列应用过滤？

注意我意识到我的解释有点模糊。

到目前为止我做了什么：我的网格：

Ext.define('uber.view.grid.OpenRequestsGrid',{
    extend:'Ext.grid.Panel',
    xtype: 'openRequests',
    layout: 'fit',
    store: 'currentRequests',
    emptyText: "<h3>You currently don't have any open requests</h3>",
    initComponent: function () {
        var me = this;
        me.store = Ext.create('uber.store.grid.CurrentRequests');
        me.store.load();
        this.columns = [{
            xtype: 'templatecolumn',
            align: 'left',
            flex: 1,
            tpl: [
                "<div class=''>" +
                    "<div class=''>" +
                        "<div class='title-section' style='display: inline; margin-left: 10px;'><b>Title:</b> {title}</div>" +
                        "<div class='subject-section' style='display: inline; margin-left: 10px;'><b>Subject:</b> {subject}</div>" +
                        "<div class='status-section' style='display: inline; margin-left: 10px;'><b>Status:</b> {status}</div>" +
                    "</div>" +
                    "<hr>" +
                    "<div class=''>" +
                        "<div class='description-label'><b>Description:</b></div>" +
                        "<div class='description-section'>{subjectDescription}</div>" +
                    "</div>" +
                "</div>",
                ]
        },{
            xtype: 'actioncolumn',
            width: 50,
            align: 'center',
            items:[{
                xtype: 'button',
                iconCls: 'x-fa fa-ellipsis-h',
                tooltip: 'Details',
                handler: function (grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
                    Ext.create('uber.view.session.SessionInfoWindow',{requestId: rowIndex.data.requestId}).show();
                }
            }]
        }];
        this.dockedItems = [{
            xtype: 'toolbar',
            items: [{
              // The combobox here is supposed to be what sets the filter (by subject)
              xtype: 'combobox',
              fieldLabel: 'Subject',

            }]

        },{
            xtype: 'pagingtoolbar',
            displayInfo: true,
            dock: 'bottom',
            store: me.store
        }];
        this.callParent(arguments);
    }
});

我的商店：

Ext.define('uber.store.grid.OpenRequests',{
    extend: 'Ext.data.Store',
    alias: 'store.openRequests',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '/UberTutor/main/main-page!displayCurrentTutorRequests.action',
        reader: {
            type: 'json',
            rootProperty: 'data',
            totalProperty: 'total'
        }
    }
});

使用停靠在网格顶部的工具栏中的组合框，我想使用组合框中的值对网格的服务器数据应用过滤器。

所以我的问题是，是否可以在这种网格上使用网格过滤，我将如何做这样的事情？

Answer 1

虽然问题有点模糊，但您可以使用随框架打包的许多功能。

存储过滤器： http://docs.sencha.com/extjs/6.2.0/classic/Ext.data.AbstractStore.html#cfg-filters

列过滤器： http://docs.sencha.com/extjs/6.2.0/classic/Ext.grid.filters.Filters.html

显示/格式化“过滤器”（即渲染）： http://docs.sencha.com/extjs/6.2.0/classic/Ext.grid.column.Column.html#cfg-renderer

所有这些都基于为您的网格供电的数据存储。

代码发布后

更新

在网格的dockedItems中的复选框配置中，您可以为change（或您想要侦听的其他任何事件）添加一个监听器

http://docs.sencha.com/extjs/6.2.0/classic/Ext.form.field.Checkbox.html#event-change

this.dockedItems = [{
        xtype: 'toolbar',
        items: [{
          // The combobox here is supposed to be what sets the filter (by subject)
          xtype: 'combobox',
          fieldLabel: 'Subject',

        // add listener here
        listeners: {
          change: function(component, newValue, oldValue, eOpts ) {
              // get the grid and the data store
              var grid = component.up('grid'),
                  store = grid.getStore();

              // now you can access the grids store and filter the underlying data using the documentation above.
              myStore.filter(
                'subject', // store model field
                'subjectPattern'  // some pattern.
              );
          }
        }

        }]

    },{
        xtype: 'pagingtoolbar',
        displayInfo: true,
        dock: 'bottom',
        store: me.store
    }];

Extjs将过滤器应用于网格模板列

1 个答案:

更新