时间戳

首页 > 解决方案 > 如何正确添加过滤器和过滤数据？

extjs - 如何正确添加过滤器和过滤数据？

问题描述

我有窗口 ExtJS：

let height = Ext.getBody().getViewSize().height,
width = Ext.getBody().getViewSize().width,
store = Ext.create('CRM.store.MessageCenter.Messages.List');

Ext.define('CRM.window.MessageCenter.Messages.List', {
    extend: 'Ext.window.Window',
    xtype: 'window',
    name: 'MessageCenter_Messages_List_Window',
    iconCls: 'mails',
    title: 'MessageCenter_Messages',
    width: width,
    height: height - 26,
    x: 0,
    y: 26,
    layout: 'fit',
    dockedItems: [{
        xtype: 'pagingtoolbar',
        dock: 'bottom',
        displayInfo: true,
        extend: 'Ext.PagingToolbar',
        displayMsg: 'Shown {0} - {1} from {2}',
        emptyMsg: "There is no data to display",
    }],
    initComponent: function() {
        var that = this;
        that.store = store;
        that.dockedItems[0].store = store;
        this.callParent();
    },
    items: [{
        xtype: 'grid',
        name: 'MessageCenter_Messages_List_Grid',
        border: false,
        store: store,
        columns: [
            {
                text: 'ID',
                dataIndex: 'id',
                width: 100,
                hidden: false
            },
            {
                text: 'Date of creation',
                dataIndex: 'date',
                width: 150,
                xtype: 'datecolumn',
                format: 'd.m.Y H:i:s',
                hidden: false
            },
        ],

    }],
});

我的店铺：

let name = 'CRM.store.MessageCenter.Messages.List';
Ext.define(name, {
    extend: 'Ext.data.Store',
    autoLoad: true,
    pageSize: 35,
    fields: [
        'id',
        'date',
    ],
    sorters: [{
        property: 'date',
        direction: 'DESC',
    }],
    proxy: {***},
});

我需要添加过滤器以从数据库中选择数据。例如，按日期或 ID，但我不知道如何正确执行。以及在我的情况下是否有必要使用数据模型。请告诉我，我刚开始学习 ExtJS，谢谢你的帮助。

标签： extjsextjs6-classic

解决方案

没有必要使用数据模型（但它会很好）。要使用用户定义的过滤器，您可以使用此插件。AFAIK您需要远程过滤器，因此将商店的“remoteFilter”属性设置为true。类似于以下示例：

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    title: 'Sci-Fi Television',
    height: 250,
    store: Ext.create('Ext.data.Store', {
        fields: ['id', 'show'],    
        model: 'User',
        proxy: {
            type: 'ajax',
            url: 'data1.json',
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        },
        autoLoad: true,
        remoteFilter: true, // Server side filtering.
    }),
    plugins: 'gridfilters',
    columns: [{
        dataIndex: 'id',
        text: 'ID',
        width: 50
    }, {
        dataIndex: 'show',
        text: 'Show',
        flex: 1,
        filter: {
            // required configs
            type: 'string',
            // optional configs
            value: 'star', // setting a value makes the filter active.
            itemDefaults: {
                // any Ext.form.field.Text configs accepted
            }
        }
    }]
});

此示例将发送以下过滤器属性：

[{"operator":"like","value":"starrr","property":"show"}]

推荐阅读