无法让 FiltersFeature 在 extJS 中工作答案

【问题标题】：Can't get FiltersFeature to work in extJS无法让 FiltersFeature 在 extJS 中工作
【发布时间】：2014-06-04 20:28:48
【问题描述】：

我似乎无法让 FiltersFeature 在我的 extJS 项目中工作。当我单击标题时，过滤器会在视觉上出现。但是，只要我在下拉列表中的文本字段中输入，数据就不会被动态过滤。我觉得我的设置中缺少一些事件侦听器。

这是我的设置：

我的进口：

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tree.*',
    'Ext.ux.grid.FiltersFeature',
    'Ext.toolbar.Paging'
]);

创建我的自定义网格（称为 PackageGrid）并创建 tableStore：

var pacakgeGrid = Ext.create('js.dmwf.PackageGrid',{
    title: 'Packages',
    height: 280,
    width: '100%'
});


// create the data store
var tablestore = new Ext.data.SimpleStore({
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name'}
    ]
});

tablestore.loadData(getSampleData());

pacakgeGrid.bindStore(tablestore, 100);

p.add(pacakgeGrid);

使用关联的列和过滤器定义我的自定义网格（PackageGrid）：

var createHeaders = function () {

    var columns = [{
        dataIndex: 'id',
        text: 'ID'
    }, {
        dataIndex: 'name',
        text: 'Name of Packet'
    }];

    return columns;
};

var filters = {
    ftype: 'filters',
    encode: false, 
    local: true,   

    filters: [
        {
            type: 'string',
            dataIndex: 'name'
        }
    ]
};


Ext.define('js.dmwf.PackageGrid', {

    extend: 'Ext.grid.Panel',

    requires: [
        'Ext.grid.column.Action'
    ],
    title: 'Array Grid',

    xtype: 'array-grid',
    collapsible: true,
    multiSelect: true,
    height: 350,

    features: [filters],

    viewConfig: {
        stripeRows: true,
        enableTextSelection: true
    },

    columns: createHeaders(),
});

这是一个小提琴：

https://fiddle.sencha.com/#fiddle/6bc

【问题讨论】：

在grid之前声明store，设置为grid上的store config。
我把商店搬到了网格之前。同样的问题。商店配置是什么意思？
请查看更新的小提琴：fiddle.sencha.com/#fiddle/6be
谢谢！您可以提出您的答案，以便我接受。所以基本上在定义自定义网格时需要设置商店？
请注意，在那里定义您的网格没有意义。定义用于创建可重用的类。定义它并且只使用一次是多余的，特别是因为你的类定义引用了一些随机的非类方法。

标签： javascript extjs

【解决方案1】：

Ext.define('js.dmwf.PackageGrid', {

extend: 'Ext.grid.Panel',

requires: [
    'Ext.grid.column.Action'
],
title: 'Array Grid',

xtype: 'array-grid',
collapsible: true,
multiSelect: true,
height: 350,
store : tablestore // store config

features: [filters],

viewConfig: {
    stripeRows: true,
    enableTextSelection: true
},

columns: createHeaders(),
});

更新小提琴：fiddle

【讨论】：