zoukankan      html  css  js  c++  java
  • How to use filters in a GridPanel

    You can just link statically required files in your 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>
     

    The reason that ExtJS tries to load ".../features/filter.js" is that the object that it is looking for ("features.filter") is not yet defined. ExtJS guesses this must be in a file called "features/filter.js". However, it is actually defined in "grid/FeaturesFilter.js" (where "features.filter" is defined as an "alias" to "Ext.ux.grid.FiltersFeature").

    Most people who have this problem have read the documentation and are trying to load Ext.ux.grid.FiltersFeature (usually at "ux/grid/FiltersFeature.js") but the timing of the load is such that it is not loaded when it is needed. Therefore, ExtJS tries to load the non-existent file.

    The key to solving this problem is to ensure that the "Ext.ux.grid.FiltersFeature" is fully loaded (not just the load initiated) by the time the grid is initializing with the filters feature.

    The sensible (and appropriate) thing is to put the "Ext.ux.grid.FiltersFeature" in the "requires"of the class extending the grid. This should ensure that the grid/FiltersFeature.js file is loaded before you need it.

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

    If for some reason, the file does not load in time, you can put a (seemingly redundant) requires "Ext.ux.grid.FiltersFeature" in the 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'
        ]
    });

    IMPORTANT NOTES ON CLASS LOAD TIMING: Putting the required class in the proper "requires" config for the proper requiring class is important so that when you do a build and create a minified Javascript file, you get only the bits of the ExtJS library code that are truly needed. However, you should watch the Javascript console for messages that say that ExtJS had to load a file synchronously. If it does this, the "correct" location for a "requires" should be supplemented by a "redundant requires" somewhere earlier, such as in Ext.application() as shown above.

    source:http://stackoverflow.com/questions/7359512/how-to-use-filters-in-a-gridpanel

  • 相关阅读:
    抖音圈圈乐 系统搭建H5微信小游戏圈圈乐系统介绍
    GPS NMEA-0183标准详解
    GPS定位的偏移校正(WGS84与火星坐标互转)
    Complete_NGINX_Cookbook
    GBT32960-2016电动汽车远程服务与管理系统技术规范 第3部分:通信协议及数据格式
    Redis 到底是怎么实现“附近的人”这个功能的呢?
    NETGEAR R7800路由器TFTP刷回原厂固件方法
    JT/T 808-2013 道路运输车辆卫星定位系统北斗兼容车载终端通讯协议技术规范
    如何正确地使用设计模式?
    各常用分类算法的优缺点总结:DT/ANN/KNN/SVM/GA/Bayes/Adaboosting/Rocchio
  • 原文地址:https://www.cnblogs.com/sdream/p/5207349.html
Copyright © 2011-2022 走看看