Javascript Can'；无法让FiltersFeature在extJS中工作

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

以下是我的设置：

我的导入：

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

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);

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(),
});

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

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

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);

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(),
});

使用相关列和筛选器定义我的自定义网格（PackageGrid）：

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

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);

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(),
});

这是一把小提琴：

---

更新的fiddle:

在网格之前声明存储，将其设置为网格上的存储配置。我在网格之前移动了存储。同样的问题。什么是商店配置？请查看更新的提琴：谢谢！你可以提出你的答案，这样我就可以接受了。因此，在定义自定义网格时，基本上需要设置存储？请注意，在这里定义网格没有意义。Define用于创建可重用类。定义它并且只使用一次是多余的，特别是因为您的类定义引用了一些随机的非类方法。