Ext.ux.touch.grid.FilterRow plugin

[tino7_03]

I have created a new plugin for a Ext.ux.touch.grid component.
Now it's possible to display a filterrow to the top of the grid like this:
filterrow.jpg

when the user writes into the specific textfield after one second the store is filtered by this text.


thanks to mitchelsimoens and estesbubba for the support

[AndreaCammarata]

Nice!
Mitchell Simoens will be happy about it

[tino7_03]

Now it's also possible set the config item nemed "filtersDisabled" to disable filtering actions and to have a personal filtering in "filter" event.
In this way it's possible to filter not downloaded data with paging feature because I can reload data every filter event.

{                        ftype    : 'Ext.ux.touch.grid.feature.FilterRow',           launchFn : 'initialize',
    filtersDisabled:true
}
Ext.create('Ext.ux.touch.grid.View', {
            fullscreen : true,
            store      : myStore,
            features   : [
                        {                                        ftype    : 'Ext.ux.touch.grid.feature.HeaderMenu',                                launchFn : 'initialize'                                },
                {       ftype    : 'Ext.ux.touch.grid.feature.Paging',                            launchFn : 'initialize'                        },
                {       ftype    : 'Ext.ux.touch.grid.feature.Sorter',                            launchFn : 'initialize'                                },
                {                                        ftype    : 'Ext.ux.touch.grid.feature.FilterRow',                            launchFn : 'initialize',
                    filtersDisabled:true
                        }
                    ],        columns   : [
                        {                                                header    : 'Code',                                    dataIndex : 'code',                                    width     : '40%'                                },                        {                                                header    : 'Description',                                    dataIndex : 'descr',                                    width     : '60%'                                },

                  ],
            listeners:{                                filter:function(filterComponent,grid,store,filtersArray){
                    var where="";                                        var c=0;
                    for (; c < filtersArray.length; c++){
                        where=where+" AND [myTab].["+filtersArray[c].property+"] LIKE '"+filtersArray[c].value+"%'";
                    }                    store.getProxy().url=myProxyUrl + where;
                    store.load();
                }
            }
}); 

For mitchellsimoens: I hide "Goto Page" button in Paging feauture because it has problems. If you have a time to test why...
Thanks in advance

[shaneavery]

Thanks for this addition. FYI, there is a typo on line 25 of your script. It reads "cope:this," and should probably read "scope:this,"

Also, I have implemented your plugin in mitchellsimoens example, and I can't see the fields display using Chrome. The bar displays, and I can trace the HTML elements in the inspector, but the fields just don't display. See attached picture...

screenGrab.jpg

Any guess why this is not working?

[tino7_03]

I have had some problems using the plugin in MVC app and I have modified the feature in a new grid class that inherits from mitchellsimoens class.
I attach my class and an example.
I hope it's a good solution for you.
Ext.gp.Grid.zip

[shaneavery]

Tino, this is a good solution for me. Thank you very much. Unfortunately, I get an error in my console using Chrome:

• [COLOR=red !important]Uncaught TypeError: Cannot call method 'call' of undefined[/COLOR]
  
  

It references line 78 in your Ext.gp.Grid class which reads:

store.filter(filtersArray);

Thus, although the filter fields are displaying correctly now, the filters do not actually function. Also, I have come across an anomaly with mitchellsimoens example, which still shines through using your class. After a row is selected in the grid, if you choose a column to sort on, additional rows become painted as if they were selected in the grid display. See attached picture:

example.jpg
Have you run into this before? Have you any suggestions for a workaround? Thanks again.

[tino7_03]

Have you cheked the vale of

filtersArray?
can you try to write console.log(filtersArray); before my row 78 for to give me a result?
Thanks

[shaneavery]

Tino, here is what is returned from filtersArray:

[Object


property: undefined
root: "data"
value: "dwila"
__proto__: Object

, Object


property: undefined
root: "data"
value: "shane@averydc.com"
__proto__: Object

, Object


property: undefined
root: "data"
value: "Your table is ready"
__proto__: Object

, Object


property: undefined
root: "data"
value: "Try our steak and egg special - just $4.95!"
__proto__: Object

, Object


property: undefined
root: "data"
value: Date
__proto__: Object

, Object


property: undefined
root: "data"
value: 5
__proto__: Object

, Object


property: "Name"
root: "data"
value: "a"
__proto__: Object

]

I am using more than one store in my App. These fields (except for "Name") are from a different store than what I defined in the grid config.

Thanks

[tino7_03]

'property' is always empty. This is the model field name. Now I haven't the code with me for a debug, but tomorrow I'll see it. Can you send me the code used from call my class? And if is it possible the Store model definition?

[shaneavery]

I see you are busy stamping out fires with PR4 on another thread. I am updating my poject code as well, and have run into the same issues. I guess we will need to wait until Mitchell updates his Grid before we can proceed much further with PR4.

At any rate, here is my code from the PR3 version that you requested...

View class calling your class (focus on the "Test" item):

Ext.define('dwila.view.Viewport', {
    extend: 'Ext.tab.Panel',

    config: {
        fullscreen: true,

        tabBar: {
            docked: 'bottom',
            layout: {
                pack: 'center'
            }
        },
        
        defaults: {
            scrollable: true
        },

        items: [
            {
                title: 'Customers',
                iconCls: 'team',
                xtype: 'grid',

                features: [
                        {
                            ftype    : 'Ext.ux.touch.grid.feature.HeaderMenu',
                            launchFn : 'initialize'
                        },
                        {
                            ftype    : 'Ext.ux.touch.grid.feature.Sorter',
                            launchFn : 'initialize'
                        }/*,
                        {
                               ftype    : 'Ext.ux.touch.grid.feature.FilterRow',
                               launchFn : 'initialize'
                               //filtersDisabled : false
                        }*/
                ]
            },
            {
                title: 'Test',
                iconCls: 'team',
                xtype:'gridfr',
                scope:this,
                showFilterRow:true,
                disableFilterRowActions:false,
                store      : 'Guests',
                features   : [
                    {
                        ftype    : 'Ext.ux.touch.grid.feature.Sorter',
                        launchFn : 'initialize'
                    }
                ],
                items: [
                    {
                        xtype : 'toolbar',
                        docked: 'top',
                        //title: 'Customers',
                        items: [
                            {
                                //text: 'Add',
                                ui: 'confirm',
                                id: 'guestAdd',
                                iconCls: 'add',
                                iconMask: true
                            },
                            {
                                //text: 'Delete',
                                ui: 'decline',
                                id: 'guestDelete',
                                iconCls: 'trash',
                                iconMask: true
                            },
                            {
                                text: 'Show Hidden',
                                ui: 'action',
                                //badgeText: 'Hidden',
                                //iconCls: 'search',
                                //iconMask: true,
                                id: 'showHidden'
                            },
                            {
                                text: 'Show All',
                                ui: 'action',
                                //badgeText: 'All',
                                //iconCls: 'search',
                                //iconMask: true,
                                id: 'showAll'
                            },
                            {xtype: 'spacer'},
                            {
                                text: 'Phone```',
                                badgeText: '#',
                                ui: 'action',
                                //iconCls: 'add',
                                //iconMask: true,
                                //right: 1,
                                //margin : '6 64 0 0',
                                id: 'phoneAdd'
                            },
                            {
                                text: 'Notify',
                                ui: 'confirm',
                                //iconCls: 'action',
                                //iconMask: true,
                                id: 'guestNotify'
                            }
                        ]
                    }
                ],
                columns   : [
        /*            {
                        header    : 'ID',
                        dataIndex : 'id',
                        sortable  : false,
                        style     : 'text-align: right; padding-right: 1em;',
                        width     : '10%'
                    },
                    {
                        header    : 'Phone',
                        dataIndex : 'Phone',
                        style     : 'text-align: center;',
                        width     : '10%',
                        sortable  : false,
                        filter    : { type : 'string' }
                    },
                    {
                        header    : 'Carrier',
                        dataIndex : 'Carrier',
                        style     : 'text-align: center;',
                        sortable  : false,
                        filter    : { type : 'string' },
                        width     : '10%'
                    },
                    {
                        header    : 'Seated Time',
                        dataIndex : 'date_seated',
                        style     : 'text-align: center;',
                        width     : '20%',
                        filter    : { type : 'string' }
                    },
                    {
                        header    : 'Notified Time',
                        dataIndex : 'date_sent',
                        style     : 'text-align: center;',
                        width     : '20%',
                        filter    : { type : 'string' }
                    },*/
                    {
                        header    : 'Party',
                        dataIndex : 'Party',
                        style     : 'text-align: center;',
                        width     : '15%',
                        filter    : { type : 'int' }
                    },
                    {
                        header    : 'Name',
                        dataIndex : 'Name',
                        style     : 'padding-left: 4px;',
                        width     : '25%',
                        filter    : { type : 'string' }
                    },
                    {
                        header    : 'Time',
                        dataIndex : 'date_reserved',
                        style     : 'text-align: center;',
                        width     : '22%',
                        filter    : { type : 'date' },
                        renderer  : function(value, values) {
                            var showtime = Ext.Date.format(value, 'h:ia');
                            return '<span>' + showtime + '</span>';
                        }
                    },
                    {
                        header    : 'Notified',
                        dataIndex : 'Sent',
                        style     : 'text-align: center;',
                        width     : '19%',
                        filter    : { type : 'boolean' },
                        renderer  : function(value, values) {
                            var color = (value === true) ? '009933' : 'FF0000',
                                text = (value === true) ? 'Yes' : 'No';
                            return '<span style="color: #' + color + ';">' + text + '</span>';
                        }
                    },
                    {
                        header    : 'Seated',
                        dataIndex : 'Seated',
                        style     : 'text-align: center;',
                        width     : '19%',
                        filter    : { type : 'boolean' },
                        renderer  : function(value, values) {
                            var color = (value === true) ? '009933' : 'FF0000',
                                text = (value === true) ? 'Yes' : 'No';
                            return '<span style="color: #' + color + ';">' + text + '</span>';
                        }
                    }
                ]
            },
            {
                title: 'Settings',
                iconCls: 'settings',
                xtype: 'settings'
            },
            {
                title: 'Help',
                iconCls: 'info',
                xtype: 'welcomescreen'
            },
            {
                title: 'Exit Dwila',
                iconCls: 'reply',
                xtype: 'button',
                id: 'exitApp'
            }
        ]
    }
});

Store class defined in above view:

Ext.define('dwila.store.Guests', {
    extend: 'Ext.data.Store',
    model: 'dwila.model.Guest',
    autoSync: true,
    sorters: [
        {
            property : 'date_reserved',
            direction: 'DESC'
        }
    ],
    autoLoad: true
});

Model class defined in above store:

Ext.define('dwila.model.Guest', {
    extend: 'Ext.data.Model',
    fields: [
            { name: 'id', type: 'string' },
            { name: 'Party', type: 'int' },
            { name: 'Name', type: 'string' },
            { name: 'Phone', type: 'string' },
            { name: 'Carrier', type: 'string' },
            { name: 'Tags', type: 'string' },
            { name: 'Sent', type: 'boolean', defaultValue: false },
            { name: 'Seated', type: 'boolean', defaultValue: false },
            { name: 'Hide', type: 'boolean', defaultValue: false },
            { name: 'Table', type: 'int' },
            { name: 'date_reserved', type: 'date', defaultValue: new Date(), dateFormat: 'c' },
            { name: 'date_sent', type: 'date', dateFormat: 'c' },
            { name: 'date_seated', type: 'date', dateFormat: 'c' }
    ],
    proxy: {
        type: 'localstorage',
        id: 'id',
        reader: {
            type: 'json',
            root: 'guests',
            idProperty : 'id'
        },
        writer: {
            root: 'guests',
            type: 'json',
            writeAllFields: true
        }
    },
    validations: [
        {type: 'format',   name: 'Party', matcher: /\d+/, message: 'must only include numeric characters'},
        {type: 'presence', name: 'Name', message: 'field is required'},
        {type: 'length',   name: 'Phone', min: 10, max: 10, message: 'numbers must be exactly 10 digits'},
        {type: 'format',   name: 'Phone', matcher: /\d+/, message: 'must only include numeric characters'},
        {type: 'format',   name: 'Table', matcher: /\d+/, message: 'must only include numeric characters'}
    ]
});