[SOLVED] Importing FiltersFeature for ExtJS in jsFiddle

Importing FiltersFeature for ExtJS in jsFiddle

I would like to have a runnable demo of ExtJS using Ext.ux.grid.FiltersFeature in jsFiddle. I have not been able to figure out how this is done.

I tried this:

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'js/lib/ext-4.2.1.883/ux');

Ext.require([
    'Ext.data.*',
    'Ext.data.reader.*',
    'Ext.grid.*',
    'Ext.tree.*',
    'Ext.ux.grid.FiltersFeature',    
    'Ext.util.*',
    'Ext.state.*']);

But it does not work.

I have also tried adding this URL as an external resource:

http://docs.sencha.com/extjs/4.1.1/source/FiltersFeature.html

But jsFiddle falls over at the first line because it is not expecting HTML.

I have also tried to import the FiltersFeature in Sencha Fiddle, but this does not work either.

Here is my current attempt at a jsFiddle, as well as an attempt at a Sencha Fiddle. I've had no luck with either one.

Solution

You just need a couple tweaks to get it to work. First, you can set up your Ext.Loader path configuration to pull directly from the ExtJS CDN:

Ext.Loader.setPath('Ext.ux', 'http://cdn.sencha.com/ext/gpl/4.2.0/examples/ux/');

Then, you need to wrap your instantiation code in Ext.onReady() to prevent it from executing before the FiltersFeature class is loaded:

Ext.onReady(function() {
    var v1 = Ext.create('myGrid', {
        myGridId: 'myGrid1'
    });

    Ext.create('Ext.tab.Panel', {
        renderTo: document.body,
        items: [v1]
    });
});

Optionally, to get the filter menu icons to display properly, you may also want to add the necessary filter-related CSS files as external resources:

Having done that, the end result is this fiddle, which runs fine after a few seconds for the external class to load.