extjs - 在 jsFiddle 中导入 ExtJS 的 FiltersFeature

Question

我想在 jsFiddle 中使用 Ext.ux.grid.FiltersFeature 进行 ExtJS 的可运行演示。我一直无法弄清楚这是如何完成的。

我尝试过这个:

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。

我还尝试在 Sencha Fiddle 中导入 FiltersFeature，但这也不起作用。

这是我的 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 ，几秒钟后即可正常运行，以便加载外部类。