Adding plugins/features to Ext4.x based project through code (specifically GridFiltes

[phil0s0pher]

I've finally 'given up' searching and testing out for myself - but only after making it work in a non-standard way.

Basically the problem scope is general - what's the best practice to add plugins/features (or in general updating generated classes 'after-the-fact') by using the ..app/view/*.js files (leaving the ..app/view/ui/*js files alone).

Specifically what I'm trying to do is get the Grid Filtering plugin (demo, ux found in ./examples/ux/grid in the ext4 distribution) working with my first Designer project grid.

What I have done so far:

- copy the ux/grid folder (all the ux files) into myDesignerProject/app/ux/grid
- included the following lines above "Ext.define(...." in one of my app/view/*.js files

My designer setup is viewport->panel->gridPanel, thus normally creating just one *.js file (let's call it viewport.js). After mucking around there for a while, I thought it might simply be me that wasn't getting to the grid properly (trying me.down('gridpanel') and all that stuff and trying to apply things there, but never really worked), so what i ended up doing was promoting the gridPanel to its own class

So now let's say i have myGrid.js, which contains simply:

/*
 * File: app/view/myGrid.js
 * Date: Tue Sep 13 2011 20:37:36 GMT+0200 (Romance Daylight Time)
 *
 * This file was generated by Ext Designer version 1.2.0.
 * http://www.sencha.com/products/designer/
 *
 * This file will be generated the first time you export.
 *
 * You should implement event handling and custom methods in this
 * class.
 */
 
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'app/ux');
Ext.require([
    'Ext.ux.grid.FiltersFeature'
]);

Ext.define('dP.view.myGrid', {
    extend: 'dP.view.ui.myGrid',
    alias: 'widget.myGrid',
    

    initComponent: function() {
        var me = this;
        
        var myGridFilters = {
            ftype: 'filters',
            encode: false,
            local: true,
            filters: [{
                type: 'numberic',
                dataIndex: 'jobid'
            },{
                type: 'string',
                dataIndex: 'project'
            }]        
        };
    
        //Ext.apply(me.features, [myGridFilters]);
        //me.features.push([myGridFilters]);
        //console.log(me.columns.down('inserttime'));
        //console.log(dP.view.ui.myGrid.features);
        
        me.callParent(arguments);
        //console.log(dP.view.ui.myGrid);
    }
});

I left the comments in there just to give a slight demonstration of my idiocy and frustration.

In any event, I won't spend too much time explaining how I got here or what to do next - only to state simply that:
1. I don't know how to use Ext4 yet (which is why I'm starting out with designer to get a feel for it)
2. The last version of extjs I used was 2.x - all handcoded, and all fairly horrible (first and only project, it's very easy to tell which code is the oldest and which was developed latest by the quality and best practices)
3. I'm very keen on starting this thing off by best practice instead of hacking my way there
4. I got the filters working when editing /app/view/ui/myGrid.js and applying it similarly to the example (adding feature config to grid panel, adding filters to columns) - but this is not the way I want to roll.

With any hope in the world, could someone tell me how I can make this happen - and ideally giving me a short explenation (or pointer) as to why.

Note: Already checked following threads (pretty much all refer to Ext3.x, so still halfway greek to me):

http://www.sencha.com/forum/showthre...ghlight=plugin
http://www.sencha.com/forum/showthre...ghlight=plugin
http://www.sencha.com/forum/showthre...ghlight=plugin
http://www.sencha.com/forum/showthre...ghlight=plugin
..everything else relevant that shows up when searching this forum for 'plugin'

Note that I may be an and have been slightly overtired while checking some of these out, so if i missed something obvious in these threads, please just point it out and i'll get right on it

[thermiteplasma]

I'm sure this is not the correct way, but the filters are now working.

var grid = me.down('#grid');
var view = grid.getView();
                 
    var features = Ext.create('Ext.ux.grid.FiltersFeature', {
         view : view,
        encode: true, // json encode the filter query
        local: false,   // defaults to false (remote filtering)
        filters: [{
                type: 'boolean',
                dataIndex: 'entered'
            },
            {
                type: 'boolean',
                dataIndex: 'delivered'
            }
        ]
    });

    Ext.apply(grid,{features : [features]});
features.attachEvents(); 

[phil0s0pher]

I'm sure this is not the correct way, but the filters are now working.

Should that be placed inside initComponent? I honestly feel a bit lost.. but I did manage to get something working, would someone mind telling me if this is best practice or simply a bit of a hack:

Full contents of app/view/myGrid.js (without commented text):

Ext.Loader.setPath('Ext.ux', 'app/ux');
Ext.require([
    'Ext.ux.grid.FiltersFeature'
]);

Ext.define('dP.view.myGrid', {
    extend: 'dP.view.ui.myGrid',
    alias: 'widget.myGrid',
    config: {
        features: [{
            ftype: 'filters',
            autoreload: true,
            local: false,
            encode: true,
            filters: [{
                type: 'numeric',
                dataIndex: 'jobid'
            },{
                type: 'string',
                dataIndex: 'project'
            },{
                type: 'date',
                dataIndex: 'inserttime'
            }
            ]        
        }]
    },

    initComponent: function(config) {
        var me = this;
        me.initConfig(config);
        me.callParent(arguments);
    },
    
    initEvents: function() {
        var me = this;
    }
}); 

[ssamayoa]

Did you tried:

me.features = [{ftype: 'filters',
autoreload: true,
local: false,...}];

instead of

me.features.push(...)

in initComponent()?

[ssamayoa]

FWIW, I'm tring to incorporate Designer into my development chain and worked this way:

Ext.define('test.view.customer.List', {
	extend: 'test.view.ui.customer.List',
	alias: 'widget.customerList',


	initComponent: function() {
		var me = this;
		var store = Ext.create("test.store.Customers");
		
		me.features = [ {
			ftype : "filters",
			encode : true,
			local: true,
			filters : [ {
				type : "numeric",
				dataIndex : "id"
			}, {
				type : "string",
				dataIndex : "name"
			} ]
		} ];
		
		me.store = store;
		me.callParent(arguments);
	}
});

BTW, I'm using hand defined Models and Stores.