Question

我从ExtJS 4的路径开始，我需要使用GridPanel的过滤器功能。

这是我面板的代码：

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

据我所知example，我需要启用Ext.Loader，所以我做了。然而，在那之后，ExtJS正在尝试加载我在任何地方都找不到的features/filters.js，我试图在src/文件夹中找到它但却什么都没找到。

我该怎么做才能做到这一点？

更新

@nscrob向我指出了示例的FiltersFeature.js文件。我已经成功加载了该文件，但是我仍然缺少features/filter.js文件，这是从一开始就丢失的文件。

- 谢谢你们。

Answer 1

您可能正在尝试创建类似http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid-filtering/grid-filter-local.html的内容，如果您检查此示例的js代码，您将看到过滤器功能是用户扩展组件...因此您将找到定义的过滤器组件实例/ UX /网格/ FilterFeatures.js

编辑 sep 9,6pm

正如我上面所说的，问题是你正在使用的组件是用户扩展的，如果你检查filterfeatures.js中定义的组件你会发现它需要其他文件，如

        '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'

此组件所需的文件全部位于示例/ ux / grid文件夹

中

Answer 2

我在这里找到了解决方案： 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

您只需链接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

ExtJS尝试加载".../features/filter.js"的原因是它正在寻找的对象（“features.filter”）尚未定义。 ExtJS猜测它必须位于一个名为"features/filter.js"的文件中。但是，它实际上是在"grid/FeaturesFilter.js"中定义的（其中"features.filter"被定义为"Ext.ux.grid.FiltersFeature"的“别名”。

出现此问题的大多数人都阅读了文档，并尝试加载Ext.ux.grid.FiltersFeature（通常在"ux/grid/FiltersFeature.js"），但时间是 load是在需要时不加载的。因此，ExtJS尝试加载不存在的文件。

解决此问题的关键是确保"Ext.ux.grid.FiltersFeature" 在网格初始化时完全加载（不仅仅是启动的负载）过滤器功能。

明智（适当）的事情是放"Ext.ux.grid.FiltersFeature" 在扩展网格的类的"requires"中。这应该确保在您需要之前加载grid/FiltersFeature.js文件。

// 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'}
    ]
}

如果由于某种原因，文件未及时加载，你可以放一个（看似多余的）需要"Ext.ux.grid.FiltersFeature" 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'
    ]
});

关于等级负荷计时的重要说明：将所需的类放入适当的“需求”配置中以获取正确的需求类这很重要，这样当你进行构建并创建一个缩小的Javascript文件时，你只能得到真正需要的ExtJS库代码。但是，您应该在Javascript控制台中查看说明ExtJS必须同步加载文件的消息。如果这样做，“需要”的“正确”位置应该在之前的某个地方补充“冗余要求”，例如如上所示Ext.application()。

Answer 4

我遇到了同样的问题，终于搞清楚了。您需要将Ext.Loader和Ext.require放在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 5

如果您收到此错误：

features/filters.js is not found

表示加载错误是EXTJS库。确保在示例中显示的Ext.onReady()函数中包装初始化网格的调用： http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid-filtering/grid-filter-local.js

Answer 6

通过这种方式为ExtJs 4.2工作 - 因为找不到 features / filters.js的错误

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

Answer 7

在运行Ext.application启动功能的文件中，您需要设置用户扩展的路径，以便应用程序知道如何加载位于应用程序（或类似名称）文件夹结构之外的这些文件。您可以使用以下命令设置路径的Ext.Loader配置：

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

关于此的其他答案是正确的，但您的问题是自动加载器行为。 ux目录的目录路径应该相对于调用此函数的.js文件。

如何在GridPanel中使用过滤器？

更新

7 个答案: