Question

我似乎无法在我的extJS项目中使用FiltersFeature。当我点击标题时，可视化地显示过滤器。但是，只要我在下拉列表中输入文本字段，就不会动态过滤数据。我觉得我的设置中缺少一些事件监听器。

这是我的设置：

我的导入：

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

Answer 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

无法在ExtJS中使用FiltersFeature

1 个答案: