1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    phil0s0pher is on a distinguished road

      0  

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

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


    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:

    Code:
    /*
     * 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

  2. #2
    Sencha Premium Member
    Join Date
    Apr 2007
    Posts
    8
    Vote Rating
    0
    thermiteplasma is on a distinguished road

      0  

    Default


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

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

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

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    phil0s0pher is on a distinguished road

      0  

    Default


    Quote Originally Posted by thermiteplasma View Post
    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):
    PHP Code:
    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',
                
    autoreloadtrue,
                
    localfalse,
                
    encodetrue,
                
    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;
        }
    }); 
    Last edited by phil0s0pher; 10 Oct 2011 at 12:56 AM. Reason: changed CODE to PHP for more niceness.

  4. #4
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,267
    Vote Rating
    81
    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


    Did you tried:

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

    instead of

    me.features.push(...)

    in initComponent()?
    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 Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,267
    Vote Rating
    81
    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


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

    Code:
    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.
    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!