1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    40
    Vote Rating
    0
    teddy11 is on a distinguished road

      0  

    Default custom filter

    custom filter


    Hi I am trying to get my custom filter working just like
    HTML Code:
    http://dev.sencha.com/deploy/ext-4.0.0/examples/grid-filtering/grid-filter-local.html
    . The filter -click on the down arrow for the column header and go down to filter just like the example IS not working. Please tell me what I am doing wrong.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title> Listing</title>
        <link rel="stylesheet" type="text/css" href="css/GridFilters.css" />
        <link rel="stylesheet" type="text/css" href="css/RangeMenu.css" />
        <link rel="stylesheet" type="text/css" href="css/ext-all.css" />
        <script type="text/javascript" src="js/data.js"></script>    
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/FiltersFeature.js"></script>    
        <script type="text/javascript" src="js/SlidingPager.js"></script>
        <script type="text/javascript" src="js/PagingMemoryProxy.js"></script><
        
        <script type="text/javascript">
    
    
    
            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(){
    
                Ext.QuickTips.init();
    
                // for this demo configure local and remote urls for demo purposes
                var url = {
                    local:  'myData',  // static data file
                    //remote: 'grid-filter.php'
                };
    
                // configure whether filter query is encoded or not (initially)
                var encode = false;
                
                // configure whether filtering is performed locally or remotely (initially)
                var local = true;
    
                var store = Ext.create('Ext.data.Store', {
                    // store configs
                    autoDestroy: true,
    
                    proxy: {
                       type: 'pagingmemory',
                            data: myData,
                            reader: {
                                type: 'array'
                        }
                    },
    
                    remoteSort: false,
                    sortInfo: {
                        field: 'company',
                        direction: 'ASC'
                    },
                    pageSize: 50,
                    storeId: 'myStore',
                    
                    fields: [
                       {name: 'aaaa'},
                       {name: 'bbb', type: 'text'},
                       {name: 'ccc', type: 'text'},
                       {name: 'ddd', type: 'number'},
                       {name: 'eee', type: 'text'},
                       {name: 'fff', type: 'text'}  
                    ]
                });
    
                var filters = {
                    ftype: 'filters',
                    // encode and local configuration options defined previously for easier reuse
                    encode: encode, // json encode the filter query
                    local: local,   // defaults to false (remote filtering)
                    filters: [{
                        type: 'string',
                        dataIndex: 'aaa',
                        disabled: true
                    }, {
                        type: 'string',
                        dataIndex: 'bbb'
                    }, {
                        type: 'string',
                        dataIndex: 'ccc'
                    }, {
                        type: 'list',
                        dataIndex: 'ddd'
                    }, {
                        type: 'string',
                        dataIndex: 'eee'
                    },{
                        type: 'string',
                        dataIndex: 'fff'
                    }]
                };
    
                // use a factory method to reduce code while demonstrating
                // that the GridFilter plugin may be configured with or without
                // the filter types (the filters may be specified on the column model
                var createHeaders = function (finish, start) {
    
                    var columns = [{
                        dataIndex: 'aaa',
                        text: 'aaa',
                        flex: 1,
                        // instead of specifying filter config just specify filterable=true
                        // to use store's field's type property (if type property not
                        // explicitly specified in store config it will be 'auto' which
                        // GridFilters will assume to be 'StringFilter'
                        filterable: true
                        //,filter: {type: 'numeric'}
                    }, {
                        dataIndex: 'bbb',
                        text: 'bbb',
                        id: 'bbb',
                        filterable: true
                    }, {
                        dataIndex: 'ccc',
                        text: 'ccc',
                        filterable: true
                    }, {
                        dataIndex: 'ddd',
                        text: 'ddd',
                        filterable: true
                    }, {
                        dataIndex: 'eee',
                        text: 'eee',
                        filterable: true           
                    }, {
                        dataIndex: 'fff',
                        text: 'fff',
                        filterable: true
                    }];
    
                    return columns.slice(start || 0, finish);
                };
                
                var grid = Ext.create('Ext.grid.Panel', {
                    border: false,
                    store: store,
                    columns: createHeaders(4),
                    loadMask: true,
                    features: [filters],
                    bbar: Ext.create('Ext.toolbar.Paging', {
                        store: store
                    })
                });
    
                // add some buttons to bottom toolbar just for demonstration purposes
                grid.child('[dock=bottom]').add([
                    '->',
                    {
                        text: 'Encode: ' + (encode ? 'On' : 'Off'),
                        tooltip: 'Toggle Filter encoding on/off',
                        enableToggle: true,
                        handler: function (button, state) {
                            var encode = (grid.filters.encode !== true);
                            var text = 'Encode: ' + (encode ? 'On' : 'Off'); 
                            grid.filters.encode = encode;
                            grid.filters.reload();
                            button.setText(text);
                        } 
                    },
                    {
                        text: 'Local Filtering: ' + (local ? 'On' : 'Off'),
                        tooltip: 'Toggle Filtering between remote/local',
                        enableToggle: true,
                        handler: function (button, state) {
                            var local = (grid.filters.local !== true),
                                text = 'Local Filtering: ' + (local ? 'On' : 'Off'),
                                newUrl = local ? url.local : url.remote,
                                store = grid.view.getStore();
                             
                            // update the GridFilter setting
                            grid.filters.local = local;
                            // bind the store again so GridFilters is listening to appropriate store event
                            grid.filters.bindStore(store);
                            // update the url for the proxy
                            store.proxy.url = newUrl;
    
                            button.setText(text);
                            store.load();
                        } 
                    },
                    {
                        text: 'All Filter Data',
                        tooltip: 'Get Filter Data for Grid',
                        handler: function () {
                            var data = Ext.encode(grid.filters.getFilterData());
                            Ext.Msg.alert('All Filter Data',data);
                        } 
                    },{
                        text: 'Clear Filter Data',
                        handler: function () {
                            grid.filters.clearFilters();
                        } 
                    },{
                        text: 'Add Columns',
                        handler: function () {
                            if (grid.headerCt.items.length < 6) {
                                grid.headerCt.add(createHeaders(6, 4));
                                grid.view.refresh();
                                this.disable();
                            }
                        }
                    }    
                ]);
    
                var win = Ext.create('Ext.Window', {
                    title: 'Grid Filters Example',
                    height: 400,
                    width: 700,
                    layout: 'fit',
                    items: grid
                }).show();
    
                store.load();
            });
        </script>    
        </head>
        <body></body>
        </html>

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Could you please provide us with a sample of data since you have custom fields?

    Thanks,
    Scott.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    40
    Vote Rating
    0
    teddy11 is on a distinguished road

      0  

    Default


    Scott, Sorry about that.
    Code:
    var myData =[
            ['3m',                               'Express', 'Legend',  0.03, 'Inc', 'AM'],
            ['Alcoa',                           'Express',     'Legend',  1.47, 'Inc', 'AM'],
            ['Altria Group',                    'Express', 'Legend',  0.34,'Inc', 'AM'],
            ['American Express Company',            'Express', 'Legend',  0.02, 'Inc', 'AM'],
            ['American International Group',  'Express', 'Legend',  0.49,'Inc',  'AM'],
    basically repeat this 200 times. I am using this test data before trying it on my own data.
    Of course i have "];" at the end of the array. Thanks for taking the time to look at this.

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

      0  

    Default filter

    filter


    I do not know it well, and I'm not familiar with the code, it seems that I have to learn something

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

      0  

    Default


    Does anyone have any idea how to solve this problem?
    Thanks.

  6. #6
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    32
    Vote Rating
    1
    tangalla is on a distinguished road

      0  

    Default


    This mite be too late but are you loading all the js files i mean extjs/.. ux/grid/filter . In my case i had this issue.