How to use filters in a GridPanel?

Question

I'm starting in the path of ExtJS 4 and I need to use the GridPanel's filters feature.

Here's the code for my panel:

var panel = Ext.create("Ext.grid.Panel", {
  renderTo : "main"
, store    : store
, title    : "Users"
, columns  : [ /*...*/ ]
, // ...
// Important line --v
, features : [ { ftype : 'filters' } ]
, // ...
});

As I understood from the example , I need to enable Ext.Loader and so I did. After that, however, ExtJS is trying to load a features/filters.js which I can't find anywhere, I have tried to look for it in the src/ folder but have found nothing.

How am I supposed to make this work?

---

Update

@nscrob pointed me to the example's FiltersFeature.js file. I have successfully loaded the file, but I still lack the features/filter.js file, the one missing from the start.

-- Thanks guys.

Answer 1

you are probably trying to create something like http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid-filtering/grid-filter-local.html , if you check the js code for this example you will see that the filter feature is an user extended component... so you will find the filter component defined in examples/ux/grid/FilterFeatures.js

Edit sep 9 , 6pm

As i said above the problem is that the component you are using is user extended if you check the component defined in the filterfeatures.js you will fin that it needs other files like

        'Ext.ux.grid.menu.ListMenu',
        'Ext.ux.grid.menu.RangeMenu',
        'Ext.ux.grid.filter.BooleanFilter',
        'Ext.ux.grid.filter.DateFilter',
        'Ext.ux.grid.filter.ListFilter',
        'Ext.ux.grid.filter.NumericFilter',
        'Ext.ux.grid.filter.StringFilter'

The file this component needs are all in the example/ux/grid folder

Answer 2

I found the solution here: http://www.sencha.com/forum/showthread.php?140370-Getting-404-error-The-requested-resource-(-EmployeeApp-feature-filters.js)-not-avail&p=626408&viewfull=1#post626408

You can just link statically required files in your index.html

<link rel="stylesheet" type="text/css" href="scripts/ext/examples/ux/grid/css/GridFilters.css" />
<link rel="stylesheet" type="text/css" href="scripts/ext/examples/ux/grid/css/RangeMenu.css" />
<script type="text/javascript" src="scripts/ext/examples/ux/grid/FiltersFeature.js"></script>
<script type="text/javascript" src="scripts/ext/examples/ux/grid/filter/Filter.js"></script>
<script type="text/javascript" src="scripts/ext/examples/ux/grid/filter/StringFilter.js"></script>
<script type="text/javascript" src="scripts/ext/examples/ux/grid/filter/ListFilter.js"></script>
<script type="text/javascript" src="scripts/ext/examples/ux/grid/filter/BooleanFilter.js"></script>
<script type="text/javascript" src="scripts/ext/examples/ux/grid/filter/NumericFilter.js"></script>
<script type="text/javascript" src="scripts/ext/examples/ux/grid/filter/DateFilter.js"></script>
<script type="text/javascript" src="scripts/ext/examples/ux/grid/menu/RangeMenu.js"></script>

Answer 3

The reason that ExtJS tries to load ".../features/filter.js" is that the object that it is looking for ("features.filter") is not yet defined. ExtJS guesses this must be in a file called "features/filter.js" . However, it is actually defined in "grid/FeaturesFilter.js" (where "features.filter" is defined as an "alias" to "Ext.ux.grid.FiltersFeature" ).

Most people who have this problem have read the documentation and are trying to load Ext.ux.grid.FiltersFeature (usually at "ux/grid/FiltersFeature.js" ) but the timing of the load is such that it is not loaded when it is needed. Therefore, ExtJS tries to load the non-existent file.

The key to solving this problem is to ensure that the "Ext.ux.grid.FiltersFeature" is fully loaded (not just the load initiated) by the time the grid is initializing with the filters feature.

The sensible (and appropriate) thing is to put the "Ext.ux.grid.FiltersFeature" in the "requires" of the class extending the grid. This should ensure that the grid/FiltersFeature.js file is loaded before you need it.

// This should work
Ext.define("FrontSuite.view.MyGrid", {
    extend:  'Ext.grid.Panel',
    xtype:   'mygrid',
    requires: [
        'Ext.ux.grid.FiltersFeature'
    ],
    title:   'My Grid',
    ...
    features: [{
        ftype  : 'filters',
        encode : true
    }],
    columns: [
        { dataIndex: 'id', text: 'ID'},
        { dataIndex: 'name', text: 'Name'}
    ]
}

If for some reason, the file does not load in time, you can put a (seemingly redundant) requires "Ext.ux.grid.FiltersFeature" in the Ext.application() call (ExtJS 4+) .

Ext.application({
    name: 'MyNamespace',
    extend: 'MyNamespace.Application',
    controllers: ['MyController'],
    autoCreateViewport: true,
    paths: {
        'Ext.ux': 'path/to/my/ext/ux'
    },
    requires: [
        'Ext.ux.grid.FiltersFeature'
    ]
});

IMPORTANT NOTES ON CLASS LOAD TIMING: Putting the required class in the proper "requires" config for the proper requiring class is important so that when you do a build and create a minified Javascript file, you get only the bits of the ExtJS library code that are truly needed. However, you should watch the Javascript console for messages that say that ExtJS had to load a file synchronously. If it does this, the "correct" location for a "requires" should be supplemented by a "redundant requires" somewhere earlier, such as in Ext.application() as shown above.

Answer 4

If you are getting this error:

features/filters.js is not found

it indicates a loading error is the EXTJS libraries. Make sure to wrap the call that initializes your grid in the Ext.onReady() function that is shown in the example: http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid-filtering/grid-filter-local.js

Answer 5

Works for me by this way for ExtJs 4.2 - for the error of features/filters.js is not found

Ext.application({
......
requires: [
    'Ext.ux.grid.FiltersFeature',
    ..... more required files ....
]});

Answer 6

I ran into the same problem and finally figured it out. You need put Ext.Loader and Ext.require outside Ext.onReady .

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.ux.grid.FiltersFeature',
    'Ext.toolbar.Paging'
]);

Ext.onReady(function(){
...YOUR CODE HERE
}

Answer 7

In the file that runs your Ext.application launch function you need to set a path to your user extensions so the application knows how to load these files which reside outside of your app (or similarly named) folder structure. You do that by setting the Ext.Loader config for path using:

Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'Ext.ux':'ext-4.0.6/ux/' /*This should be the path to your top-level ux dir*/
    }
});

The other answers on this are correct, but your issue is the auto-loader behavior. The directory path to the ux dir should be relative to the .js file calling this function.