1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    71
    Vote Rating
    1
    Johnbran is on a distinguished road

      0  

    Default Adding grid filters using FilterFeatures

    Adding grid filters using FilterFeatures


    Hello,

    How would I add a filter to a grid colum like the ones demoed here. I know it is an extension and from what I can tell they are not directly supported in Architect yet. But there must be a way to do it. Any ideas? I know I have to add...

    Code:
    Ext.require([
        'Ext.ux.grid.FiltersFeature'
        
    ]);
    but I dont know where or how.

    Thanks

  2. #2
    Sencha User
    Join Date
    Sep 2010
    Posts
    69
    Vote Rating
    0
    mboreback is on a distinguished road

      0  

    Default


    A simple filtering can be added as fields in the toolbar
    Here is a simple example of filtering a grid n one field, but can be extended with using multiple fields in the filtering

    var aStore = Ext.StoreMgr.lookup('AStore');
    var newValue = textfield.getValue();
    var filterTxt = new RegExp(".*" + newValue + ".*", "ig");
    aStore.clearFilter();
    if (newValue.length > 0){
    aStore.filter("text", filterTxt);
    }

  3. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    71
    Vote Rating
    1
    Johnbran is on a distinguished road

      0  

    Default


    Thanks for the reply. I am aware that it would be simple enough to filter the store, but the real feature I want is the filter box that shows up when you click the down arrow at the column heading (see link in original post).
    Thanks

  4. #4
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,261
    Vote Rating
    79
    ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough

      0  

    Default


    Inclute the necesary ux files from html file othen than SA's app.html. Then create an override in the grid component to include filter feature.

    Regards.
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    lazos is on a distinguished road

      0  

    Default Uncaught TypeError: Object [object Object] has no method 'setMenu'

    Uncaught TypeError: Object [object Object] has no method 'setMenu'


    When I use the filter option on the grid I get the following error when passing through the menu on the column

  6. #6
    Sencha User
    Join Date
    Apr 2007
    Posts
    1
    Vote Rating
    0
    mikael.karon is on a distinguished road

      0  

    Default some code?

    some code?


    I'm trying to do exactly this, but without luck. If you could attach some code and/or an example I'd be very happy.

    / Mike

    Quote Originally Posted by ssamayoa View Post
    Inclute the necesary ux files from html file othen than SA's app.html. Then create an override in the grid component to include filter feature.

    Regards.

  7. #7
    Sencha User
    Join Date
    Jun 2012
    Posts
    10
    Vote Rating
    0
    agruss is on a distinguished road

      0  

    Default bump

    bump


    Hello,

    I am facing the same problem, I have trouble finding a solid guide how to use overrides correctly and especially for the FilterFeatures I would love to see a working example.

    cheers
    /anja

  8. #8
    Touch Premium Member msinn's Avatar
    Join Date
    Jul 2009
    Location
    in front of my pc
    Posts
    280
    Vote Rating
    5
    msinn is on a distinguished road

      0  

    Default


    In my case it wokrs when I:

    1. add the css files to the custom index.html
    HTML Code:
    <link rel="stylesheet" type="text/css" href="data/js/extjs4/examples/ux/grid/css/GridFilters.css"/>
    <link rel="stylesheet" type="text/css" href="data/js/extjs4/examples/ux/grid/css/RangeMenu.css"/>
    2. configure the loader
    Code:
    Ext.Loader.setConfig({
        disableCaching: false,
        enabled: true,
        paths: {
            'Ext.ux': 'data/js/extjs4/examples/ux',
            'Ext.ux.exporter': 'data/js/extjs4ux/exporter',
            'Ext.ux.gridprinter': 'data/js/extjs4ux/gridprinter'
        }
    });
    3. require the feature
    Code:
    Ext.application({
        requires: [
            'Nav.view.override.CheckColumn',
            'Ext.ux.grid.FiltersFeature',
            'Ext.ux.exporter.Exporter',
            'Ext.ux.gridprinter.Printer'
        ],
    ...
    4. copy and paste the feature configuration into the Filter or Quick Value Set field near the top of the config panel and then click on the Add button, e.g.
    Code:
    features: {
                    ftype: 'filters',
                    autoReload: false,
                    local: true,
                    updateBuffer: 1000,
                    filters: [
                        {
                            type: 'numeric',
                            dataIndex: 'No'
                        },
                        {
                            type: 'string',
                            dataIndex: 'Name'
                        },
                        {
                            type: 'string',
                            dataIndex: 'Post_Code'
                        },
                        {
                            type: 'string',
                            dataIndex: 'City'
                        },
                        {
                            type: 'string',
                            dataIndex: 'Country_Region_Code'
                        },
                        {
                            type: 'string',
                            dataIndex: 'Language_Code'
                        },
                        {
                            type: 'list',
                            dataIndex: 'Blocked',
                            options: [
                                'Ship',
                                'Invoice',
                                'All'
                            ],
                            phpMode: true
                        },
                        {
                            type: 'boolean',
                            dataIndex: 'Checked'
                        },
                        {
                            type: 'date',
                            dataIndex: 'Cheched_at_date'
                        },
                        {
                            type: 'date',
                            dataIndex: 'Next_check_at'
                        }
                    ]
                }
    First I would like to thank you for your time and knowledge

    Win 7 Ext JS 4.1.3 IE(6-9), FF17

  9. #9
    Sencha User
    Join Date
    Jun 2012
    Posts
    10
    Vote Rating
    0
    agruss is on a distinguished road

      0  

    Default cheers!

    cheers!


    that worked fine with me too.

  10. #10
    Sencha User
    Join Date
    Sep 2012
    Location
    Pakistan
    Posts
    2
    Vote Rating
    0
    alihamza007 is on a distinguished road

      0  

    Default Code sharing

    Code sharing


    Can you please share some sample application? I am unable to add filter fearture.