Импорт фильтровFeature для ExtJS в jsFiddle

Question

Я хотел бы иметь runnable demo ExtJS, используя Ext.ux.grid.FiltersFeature в jsFiddle. Я не смог понять, как это делается.

Я попытался это:

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.*']); 

Но это не работает.

Я также попытался добавить этот URL в качестве внешнего ресурса:

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

Но jsFiddle падает на первой линии, потому что он не ожидает HTML.

Я также попытался импортировать FiltersFeature в Sencha Fiddle, но это также не работает.

Вот мой current attempt at a jsFiddle, а также an attempt at a Sencha Fiddle. Мне не повезло ни с одним.

Answer 1

Вам просто нужно несколько настроек, чтобы заставить его работать. Во-первых, вы можете настроить конфигурацию Ext.Loader путь, чтобы вытащить прямо из ExtJS CDN:

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

Затем вам нужно обернуть код создания экземпляра в Ext.onReady(), чтобы предотвратить его от выполнения до загрузки FiltersFeature класс:

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

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

Необязательно, чтобы получить значки меню фильтра для правильного отображения, вы также можете добавить необходимые фильтры, связанные файлы CSS в качестве внешних ресурсов:

• http://cdn.sencha.com/ext/gpl/4.2.0/examples/ux/grid/css/GridFilters.css
• http://cdn.sencha.com/ext/gpl/4.2.0/examples/ux/grid/css/RangeMenu.css

Сделав это, конечный результат this fiddle, который прекрасно работает через несколько секунд для внешнего класса для загрузки.