1. #91
    Sencha User
    Join Date
    Dec 2008
    Location
    Manchester, UK
    Posts
    112
    Vote Rating
    8
    LisburnLad will become famous soon enough

      0  

    Default


    Quote Originally Posted by d.zucconi View Post
    Hi Steve,

    I've chanded plugin destroy logic (that was incompatible with IE) and updated my last post with the new code.
    IE problem seems to be fixed.

    Thanks for your help
    Hi - just to let you know that your change has fixed it for me as well on IE.
    Ta,
    Steve

  2. #92
    Ext User
    Join Date
    Apr 2010
    Posts
    5
    Vote Rating
    0
    kshvakov is on a distinguished road

      0  

    Default


    resizing the grid does not change the size of the filter. For example collapse west panel in border layout (grid width filter is center region)

    ExtJS 3.3, all browsers

    PS : no grid.on('resize', ..) action
    Attached Images

  3. #93
    Ext User
    Join Date
    Apr 2010
    Posts
    25
    Vote Rating
    0
    webtime is on a distinguished road

      0  

    Default Need Help!!!

    Need Help!!!


    Hello all!!!
    I've a dynamic grid (json configuired) created as follow:
    Code:
    xgrid = new Ext.ux.GridExtension({
        border:false
        ,stateful:false
         ,store:store
        ,loadMask: true
        ,stripeRows: true
        ,plugins: [new Ext.ux.grid.GridHeaderFilters()]
        ,columns:[]
        ,viewConfig:{onDataChange: function(){
            var columns = [];
             columns.push(smodel);
            for (var i = 0; i < this.ds.reader.jsonData.totcol; i++) {
                           eval("this.ds.reader.jsonData.columns[i].renderer = "+this.ds.reader.jsonData.columns[i].renderer);
                           columns.push(this.ds.reader.jsonData.columns[i]);
                        }
                this.cm.setConfig(columns);
                this.syncFocusEl(0);
                
              },
              forceFit:true,
              emptyText: 'No records.'}
                ,tbar: tb
                ,sm : smodel 
                ,bbar : new Ext.PagingToolbar({
                 store: store
                ,displayInfo:true
                ,pageSize:Prowperpage
            })
    });
    ... and this is my json..

    Code:
    {"metaData": 
    {"totalProperty": "total",
    "root": "records",
    "fields": [{"name":"objectUser","mapping":"Utilizzatore","type":"string"},
    {"name":"objectCode","mapping":"Oggetto","type":"string"},
    {"name":"userID","mapping":"Utente\/*all","type":"string"},
    {"name":"applicationArea","mapping":"Area Applicativa","type":"string"},
    {"name":"mKey","mapping":"mKey","type":"string"}
    ]},
    "success": true,
    "total": 164,
    "records": [-------],
    "totcol":4,
    "columns": [
    {"dataIndex":"objectUser","header":"Utilizzatore","filter":{"xtype":"textfield"},"decorated":false},
    {"dataIndex":"objectCode","header":"Oggetto","filter":{"xtype":"textfield"},"decorated":false},
    {"dataIndex":"userID","header":"Utente\/*all","filter":{"xtype":"textfield"},"decorated":false},
    {"dataIndex":"applicationArea","header":"Area Applicativa","filter":{"xtype":"textfield"},"decorated":false},
    {"dataIndex":"mKey","header":"mKey","hidden":true}]}
    ... but i don't see any filter in grid... without errors...
    Anyone can help?? Please..

    I've using EXT 3.3.0
    Thanks

    EDIT..
    In firebug i see that:
    When the plugin is inizialized, the column model does not exist yet. This is due to the type of column model (loaded via json)???
    Last edited by webtime; 9 Nov 2010 at 2:38 PM. Reason: integration...

  4. #94
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,984
    Vote Rating
    455
    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


    @zucconi:

    The code is rather basic:

    Code:
    var cmEmployee = new Ext.grid.ColumnModel({
        columns: [
        {
            header: 'Last Name',
            dataIndex: 'last_name',
            filter: {
                xtype: 'textfield',
                filterName: 'cfilter_last_name'
            },
            renderer: is_inactive
        },
        {
            header: 'First Name',
            dataIndex: 'first_name',
            filter: {
                xtype: 'textfield',
                filterName: 'cfilter_first_name'
            }
        },
        {
            header: 'Middle',
            dataIndex: 'middle_name',
            filter: {
                xtype: 'textfield',
                filterName: 'cfilter_middle_name'
            },
            width: 75
        },
        {
            header: 'Hired',
            dataIndex: 'date_hired',
            xtype: 'datecolumn',
            filter: {
                xtype: 'datefield',
                filterName: 'cfilter_date_hired'
            }
        },
        {
            header: 'Position',
            dataIndex: 'position_name',
            filter: {
                xtype: 'textfield',
                filterName: 'cfilter_position_name'
            }
        },
        {
            header: 'Captain Exp',
            dataIndex: 'date_captain_expires',
            filter: {
                xtype: 'datefield',
                filterName: 'cfilter_date_captain_expires'
            },
            renderer: date_pastdue
        },
        {
            header: 'Capt Notify',
            dataIndex: 'date_captain_notify',
            filter: {
                xtype: 'datefield',
                filterName: 'cfilter_date_captain_notify'
            },
            renderer: date_pastdue
        },
        {
            header: 'MMC Exp',
            dataIndex: 'date_uscgmmc_expires',
            filter: {
                xtype: 'datefield',
                filterName: 'cfilter_date_tankermans_expires'
            },
            renderer: date_pastdue
        },
        {
            header: 'Radar Notify',
            dataIndex: 'date_radar_notify',
            filter: {
                xtype: 'datefield',
                filterName: 'cfilter_date_radar_notify'
            },
            renderer: date_pastdue
        },
        // joined field from employee_model.php
        {
            header: 'Status',
            dataIndex: 'status_name',
            filter: {
                // column search employee status combo 
                xtype: 'combo',
                mode: 'local',
                store: storeEmployeeStatus,
                triggerAction: 'all',
                displayField: 'status_name',
                valueField: 'status_name',
                editable: true,
                lazyRender: true,
                filterName: 'cfilter_status_name'
            },
            renderer: is_inactive
        },
        {
            header: 'City',
            dataIndex: 'city',
            filter: {
                xtype: 'textfield',
                filterName: 'cfilter_city'
            },
            width: 115
        },
        {
            header: 'State',
            dataIndex: 'state',
            filter: {
                xtype: 'textfield',
                filterName: 'cfilter_state'
            },
            width: 50
        },
        //    { header: 'Zip', dataIndex: 'zip', filter: {xtype: 'textfield', filterName: 'cfilter_zip'}, width: 75 },
        {
            header: 'Citizen',
            dataIndex: 'is_us_citizen',
            filter: {
                // column search employee status combo 
                xtype: 'combo',
                mode: 'local',
                store: storeYN,
                triggerAction: 'all',
                displayField: 'answer',
                valueField: 'id',
                editable: true,
                lazyRender: true,
                filterName: 'cfilter_is_us_citizen'
            },
            width: 75
        }
        ],
        defaults: {
            sortable: true
        }
    });

    grid:

    Code:
    BMS.grid.employee_grid_panel = Ext.extend(Ext.grid.GridPanel, {
        border: true,
        stripeRows: true,
        initComponent: function(){
            this.store = storeEmployees;
            this.colModel = cmEmployee;
            this.selModel = new Ext.grid.RowSelectionModel({
                singleSelect: true
            });
            this.view = new Ext.grid.GridView();
            
            this.bbar = new Ext.PagingToolbar({
                store: storeEmployees,
                // grid and PagingToolbar using same store
                displayInfo: true,
                pageSize: browsePageSize,
                plugins: new Ext.ux.SlidingPager()
            });
            BMS.grid.employee_grid_panel.superclass.initComponent.call(this);
            this.on({
                afterlayout: {
                    scope: this,
                    single: true,
                    fn: function(){
                        this.store.load({
                            params: {
                                start: 0,
                                limit: browsePageSize,
                                sort: 'last_name',
                                dir: 'ASC'
                            }
                        });
                    }
                }
            });
        },
    
        tbar: {}, // for search and any other buttons
        plugins: [
    
        new Ext.ux.grid.GridHeaderFilters({
            applyMode: 'enter',
            highlightColor: 'orange'
        })
    
        ],
        listeners: {
            viewReady: function(){
            ..
            }
        }
    });
    Regards,
    Scott.

  5. #95
    Sencha Premium Member d.zucconi's Avatar
    Join Date
    Jun 2008
    Location
    Piacenza (Italy)
    Posts
    78
    Vote Rating
    5
    d.zucconi is on a distinguished road

      0  

    Default


    Quote Originally Posted by webtime View Post
    Hello all!!!
    In firebug i see that:
    When the plugin is inizialized, the column model does not exist yet. This is due to the type of column model (loaded via json)???
    This version of GridHeaderFilters configures filters panels for every column at init time (to decrease render time). So it needs an existing column model when the plugin is initialized. At this moment the plugin doesn't support column model re-configuration after grid initialization.

  6. #96
    Ext User
    Join Date
    Apr 2010
    Posts
    25
    Vote Rating
    0
    webtime is on a distinguished road

      0  

    Default


    Quote Originally Posted by d.zucconi View Post
    This version of GridHeaderFilters configures filters panels for every column at init time (to decrease render time). So it needs an existing column model when the plugin is initialized. At this moment the plugin doesn't support column model re-configuration after grid initialization.
    Thank You so much.. (Grazie!!!!)

  7. #97
    Sencha User
    Join Date
    Mar 2007
    Posts
    580
    Vote Rating
    0
    dolittle is an unknown quantity at this point

      0  

    Default


    I'm using the beta 2.0 version with Ext 3.3.0.
    I've added two things

    1. It's probably better to use containers instead of panels for the filters because they are lightweight
    and there is no use for the panel UI or functionality:
    Code:
    renderFilterContainer: function(columnId, fcc)
    {
    	...
    	...
    	//var fc = new Ext.Panel(fcc);
    	var fc = new Ext.Container(fcc);
    	...
    	...
    },
    
    highlightFilters: function(enable)
    {
    ...
    ...
    	{
    		var fc = this.filterContainers[fn];
    		if(fc.rendered)
    		{
    			if(!Ext.isEmpty(this.highlightCls))
    			{
    				if(enable)
    					fc.getEl().addClass(this.highlightCls);
    				else
    					fc.getEl().removeClass(this.highlightCls);
    			}
    			else
    				//fc.body.dom.style.backgroundColor = color;
    				fc.getEl().dom.style.backgroundColor = color;
    		}
    	}
    }
    2. I'm using a grid with a card layout so the grid is rendered hidden.
    The filters are rendered with width=0 because of the line:
    Code:
    fcc.width = td.getWidth() - 3;
    To solve this I implemented onResize method:
    Code:
    init:function(grid) 
    {
    	...
    	...
    	this.grid.on({
    		scope: this,
    		render: this.onRender,
    		resize: this.onResize,
    		columnresize: this.onColResize,
    		beforedestroy: this.destroyFilters
    	});
    	...
    	...
    },
    
    onResize: function() 
    {
    	var n = this.grid.getColumnModel().getColumnCount();
    	for(var i=0; i<n; i++) {
    		var td = this.grid.getView().getHeaderCell(i);
    		td = Ext.get(td);
    		this.onColResize(i, td.getWidth());
    	}
    }
    Thanks

  8. #98
    Sencha Premium Member d.zucconi's Avatar
    Join Date
    Jun 2008
    Location
    Piacenza (Italy)
    Posts
    78
    Vote Rating
    5
    d.zucconi is on a distinguished road

      0  

    Thumbs up


    Quote Originally Posted by dolittle View Post
    1. It's probably better to use containers instead of panels for the filters because they are lightweight
    and there is no use for the panel UI or functionality
    I agree. Initially I've started developing plugin with containers instead of panels but with other layouts (such as FitLayout) I've found some problems with filter fields focus (no focus clicking on fields inserted into containers with FitLayout). Now using FormLayout there are no problems and so we can return to containers.
    Thanks.

    Quote Originally Posted by dolittle View Post
    2. I'm using a grid with a card layout so the grid is rendered hidden.
    The filters are rendered with width=0 because of the line:
    Code:
    fcc.width = td.getWidth() - 3;
    To solve this I implemented onResize method
    Good. It should also solve other problems.

    I will update the code posted here with your suggestions and other changes (new filter containers sizing and filter highlight that works directly on grid header <tr> element).

    Thanks for your help dolittle

  9. #99
    Sencha User
    Join Date
    Mar 2007
    Posts
    580
    Vote Rating
    0
    dolittle is an unknown quantity at this point

      0  

    Default


    Thank you for adding my changes.

    In my case I need to disable some of the filters when a specific filter is chosen for one of the columns.
    The following code make the plugin aware of disabled fields:
    Code:
    applyFilter: function(el, bLoad)
    {
    	...
    	if(el.disabled || Ext.isEmpty(sValue))
    	{
    		delete this.grid.store.baseParams[el.filterName];
    		delete this.filters[el.filterName];
    	}
    	else	
    	...
    },

  10. #100
    Sencha User
    Join Date
    Dec 2009
    Posts
    25
    Vote Rating
    2
    qwikso is on a distinguished road

      0  

    Default


    Hi d.zucconi,

    it's really great to see the new release for Ext 3.3 because of more problems with the older version. I am using your filter plugin for all my grids and the "reconfigure" function is for my application really critical. Unfortunately I'm not able to repair this code to support it. Please are you planning to finish it or can you get me an advice how to do it? I need to reconfigure column model and the header filter is not visible.

    Big thanks...
    qwikso