如何在GridPanel中使用过滤器？

Question

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

这是我的面板的代码：

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

从示例中可以Ext.Loader ，我需要启用Ext.Loader ，所以我做到了。 但是，此后，ExtJS尝试加载在任何地方都找不到的features/filters.js ，我试图在src/文件夹中查找它，但未发现任何内容。

我应该如何做这项工作？

---

更新资料

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

- 多谢你们。

Answer 1

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

编辑 9月9日，下午6点

正如我上面所说的，问题在于，如果您检查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'

该组件所需的文件全部在example / 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" ）。

遇到此问题的大多数人都已阅读文档，并尝试加载Ext.ux.grid.FiltersFeature（通常位于"ux/grid/FiltersFeature.js" ），但是加载的时机使得它在加载时不会被加载是必需的。 因此，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.application() call (ExtJS 4+)放置一个（看似多余的）要求"Ext.ux.grid.FiltersFeature" 。

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

关于类加载时序的重要说明：将必需的类放入适当的需求类的适当“ requires”配置中很重要，因此，当您进行构建并创建一个精简的Javascript文件时，您只会得到ExtJS库代码的一部分，是真正需要的。 但是，您应该在Javascript控制台中查看有关说ExtJS必须同步加载文件的消息。 如果这样做，则“ requires”的“正确”位置应在更早的某个地方（例如在Ext.application()用“冗余需求”进行补充。

Answer 4

如果出现此错误：

features/filters.js is not found

它表示EXTJS库是加载错误。 确保在示例中显示的Ext.onReady()函数中包装用于初始化网格的调用： http : Ext.onReady() -filter-local.js

Answer 5

对于ExtJs 4.2，通过这种方式对我有效- 未找到features / filters.js的错误

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

Answer 6

我遇到了同样的问题，终于解决了。 你需要把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 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 dir的目录路径应相对于调用此函数的.js文件。