CODEWITHSUNDEEP
javascriptextjs
Oliver Watkins
Oliver Watkins

Reputation: 13509

Can't get FiltersFeature to work in extJS

I can't seem to get the FiltersFeature to work in my extJS project. Visually the filter appears when i click on the header. But as soon as I type into the text field in the drop down, the data is not dynamically filtered. I feel like there is some event listener missing in my setup.

Here is my setup :

My imports :

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

Creating my custom Grid (called PackageGrid) and creating the 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);

Defining my custom Grid (PackageGrid) with associated columns and filters:

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

Here is a fiddle :

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

Upvotes: 0

Views: 289

Answers (1)

Dev
Dev

Reputation: 3932

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

Updated fiddle : fiddle

Upvotes: 1

Related Questions