Loadmask on Filtering

**gabrieaj** · 5 Nov 2009 7:29 AM

Hi,

I have a filter panel which when the user inputs the value, filters out the gridpanel below it.
When the grouped grid panel is loaded for the first time without applying the filters, it shows the loadmask.
Grouped Grid panel needs to show the loadmask again when filters are being applied.
How do i show the loadmask again and again when filters are being applied.

Thanks for the help in advance.

Thanks & Regards,
Ajay.

**dommellenny** · 5 Nov 2009 7:54 AM

could you post your code please so i can have a look?

**gabrieaj** · 5 Nov 2009 9:07 AM

Hi Dommellenny,

Thanks for the help.
Below is the code snippet :

Code:

Ext.onReady(function(){
             var subCatcombo = new Ext.form.ComboBox({
                 id:'subCatCombo',
                 triggerAction: 'all',
                 width:180,
                 store : subCatStore, //instance of Ext.data.Store  store
                 fieldLabel: 'Sub Category',
                 hideLabel : false,
                 displayField : 'subCatEF',
                 valueField : 'subCatEF',
                 value : 'All',
                 forceSelection : true,
                 selectOnFocus : true,
                 editable : false,
                 style:'font-family:tahoma; font-size:11px; width:180px;',
                 renderTo: 'div_subCat'
               });
                                                           
              var phase = new Ext.form.ComboBox({
                 id:'phaseCombo',
                 triggerAction: 'all',
                 width:80,
                 store : phaseStore, //instance of Ext.data.Store store
                 fieldLabel: 'Phase',
                 hideLabel : false,
                 displayField : 'phaseEF',
                 valueField : 'phaseEF',
                 value : 'All',
                 forceSelection : true,
                 editable : false,
                 renderTo: 'div_phase',
                  style:'font-family:tahoma; font-size:11px; width:80px;'
               });
                                                           
               var region = new Ext.form.ComboBox({
                                 id:'regionCombo',
                                 triggerAction: 'all',
                                 width:65,
                                 store : regionStore, //instance of Ext.data.Store store
                                 fieldLabel: 'Region',
                                 hideLabel : false,
                                 displayField : 'regionEF',
                                 valueField : 'regionEF',
                                 value : 'All',
                                 forceSelection : true,
                                 selectOnFocus : true,
                                 editable : false,
                                 renderTo: 'div_region',
                                 style:'font-family:tahoma; font-size:11px; width:60px;'
                             });
                                                                   
               var filterSub = new Ext.Button({
                                id: 'filterSubEF',
                                region: 'center',
                                text: 'Filter',
                                renderTo: 'div_filterSub',
                                formBind: true,
                                scope: this,
                                handler: applyFilterToGrid
                            });
        
               filterSub.on('click', applyFilterToGrid, this);
                                                           
                var myGrid = new Ext.grid.GridPanel({
                
                    store: myGroupingTableStore, //instance of Ext.data.GroupingStore
                    columns: [{ header: 'Brand Name', width: 200, sortable: true, dataIndex: 'brand_name'},
                              {id: 'team_col', width: 250, sortable: true, dataIndex: 'indication_name'  },
                              {header: 'Company', width: 100, sortable: true, dataIndex: 'company_name', resizable: false },
                              {header: 'Sub Category', width: 200, sortable: true, dataIndex: 'sub_category_name' },
                              {header: 'Region', width: 60, sortable: true, dataIndex: 'region_name'},
                              {header: 'Phase',width: 70,sortable: true,dataIndex: 'phase_name'},
                              { header: 'Launch Date',width: 80,sortable: true,dataIndex: 'launch_date',renderer: Ext.util.Format.dateRenderer('M-y')},
                              {header: 'Sales FY-1',width: 80,sortable: true,align: 'right',dataIndex: 'sales_fym1',summaryType: 'sum',renderer: Ext.util.Format.numberRenderer('0.00')},
                              {header: 'Sales FY0',width: 80,sortable: true,align: 'right',dataIndex: 'sales_fy0',renderer: Ext.util.Format.numberRenderer('0.00')},
                              {header: 'Sales FY1',width: 80,sortable: true,align: 'right',dataIndex: 'sales_fy1',renderer: Ext.util.Format.numberRenderer('0.00')}
                             ],
                    view: new Ext.grid.GroupingView({
                        forceFit: true,
                        hideGroupedColumn: true,
                        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                    }),
                    disableSelection: true,
                    loadMask: new Ext.LoadMask(Ext.getBody(), {
                        msg: "Loading..."
                    }),
                    delay: 400,
                    listeners: {
                        render: function(grid){ //load the store when the grid is rendered
                            grid.loadMask.show();
                            var store = grid.getStore();
                            store.load.defer(20, store); //give the mask a chance to render
                        }
                    }
                });
                                                               
                var viewport = new Ext.Viewport( {
                                                                                         layout : 'border',
                                                                                         renderTo : Ext.getBody(),

                                                                                         items : [ {
                                                                                            region : 'north',
                                                                                            xtype : 'panel',
                                                                                            height : 193,
                                                                                            applyTo : 'TOP',
                                                                                            border : false
                                                                                         }, {
                                                                                            region : 'center',
                                                                                            xtype : 'panel',
                                                                                            layout : 'fit',
                                                                                            split : true,
                                                                                            items : [ myGrid ]
                                                                                         } ]
                                                                                                });
                                                                   
                  // functions
                                    function applyFilterToGrid() {

                                         var subCatName = Ext.getDom('subCatCombo').value;
                                            var regionName = Ext.getDom('regionCombo').value;
                                            var phaseName = Ext.getDom('phaseCombo').value;


                                            myGroupingTableStore.clearFilter(false);
                                            myGroupingTableStore.filterBy(function(record,id){
                                                    if((subCatName != "All") && (phaseName == "All") && (regionName == "All")) {
                                                                 return (record.get('sub_category_name')== subCatName);
                                                    } else if((subCatName == "All") && (phaseName != "All") && (regionName == "All")) {
                                                                 return (record.get('phase_name') == phaseName);
                                                    } else if((subCatName == "All") && (phaseName == "All") && (regionName != "All")) {
                                                                    return (record.get('region_name') == regionName);
                                                    } else if((subCatName != "All") && (phaseName != "All") && (regionName == "All")) {
                                                                 return ((record.get('sub_category_name')== subCatName) && (record.get('phase_name') == phaseName));
                                                    } else if((subCatName != "All") && (phaseName != "All") && (regionName != "All")) {
                                                                 return ((record.get('sub_category_name')== subCatName) && (record.get('phase_name') == phaseName) && (record.get('region_name') == regionName));
                                                    }
                                                    return true;                            
                                             });
                                        }
                                        
                                        
                                        // Tried below with the events but this doesn't work.
                                        myGrid.getStore().addListener('datachanged', function(){
                                                myGrid.loadMask.show();
                                        }, myGrid);
                                        myGrid.getStore().addListener('load', function(){
                                                        myGrid.loadMask.disable();
                                        }, myGrid);
                                        myGrid.getStore().addListener('loadexception', function(){
                                                    myGrid.loadMask.disable();
                                         }, myGrid);

}); // onReady

apologies for the formatting of code....
all stores have predefined format and values are fetched from java web services.

Thanks & Regards,
Ajay.

**uniring** · 5 Nov 2009 9:10 AM

Theorically if you've setup your mask using the loadMask config of your grid, doing a grid.getStore().load() or .reload() shows automatically the mask. Alternally you can create a new mask for the grid element and show/hide it manually.

**gabrieaj** · 5 Nov 2009 9:24 AM

Hi,

I have tried with the grid.clearfilter() event 'datachanged' in the code, however it does not work.

Code:

     // Tried below with the events but this doesn't work.
      myGrid.getStore().addListener('datachanged', function(){
          myGrid.loadMask.show();
      }, myGrid);
      myGrid.getStore().addListener('load', function(){
            myGrid.loadMask.disable();
      }, myGrid);
      myGrid.getStore().addListener('loadexception', function(){
         myGrid.loadMask.disable();
      }, myGrid);

if i remove the 'load' and 'loadexception' event listener, the mask remains foreever.
Maybe there is some way of delaying it when the grid is loading it.

Thanks for the help in advance.

**uniring** · 5 Nov 2009 9:33 AM

I think your problem is that you're passing an Ext.LoadMask element instead of a config to the loadMask on your grid, try changing it and the mask should work automatically, you doesn't need to show / hide it every time.

Code:

loadMask: {
    msg: "Loading..."
},

**gabrieaj** · 5 Nov 2009 9:52 AM

Hi,

Thanks for the reply.

I tried doing it in the code below however it firebug reports an error.

Code:

var myGrid = new Ext.grid.GridPanel({
          store: myGroupingTableStore, //instance of Ext.data.GroupingStore                   .......
                    loadMask: {
                        msg: "Loading..."
                    },
                    delay: 400,
                    listeners: {                        render: function(grid){ //load the store when the grid //is rendered
                            grid.loadMask.show();
                            var store = grid.getStore();
                            store.load.defer(20, store); //give the mask a chance //to render
}}
                });

firebug report the error as grid.loadMask.show is not a function. And when i remove the listener, mask does not come up the first time as well when the grid is loading.

Please help.

Thanks & Regards.

**uniring** · 5 Nov 2009 10:00 AM

Obviously, before the change yo were having a loadMask object in your grid.loadMask variable, now that you passed to it a loadMask config the object is created internally and the grid.loadMask variable only contains the config, not the element.

In my post i said that it will work automatically and you doesn't need to show / hide it manually, i mean that you need to delete all lines where you're working with the grid.loadMask as a mask object.

Try to let the grid manage the correct loadMask that you have now.

**gabrieaj** · 6 Nov 2009 4:50 AM

Thanks for the reply.

I did try that without the listener. However loadmask fails to show up. Is there any more config options which will help to show the loadmask??

Thanks & Regards.

**hendricd** · 6 Nov 2009 4:52 AM

In GP, the loadMask is built in the onRender phase. Try the afterrender event instead.

Loadmask on Filtering

Thread Tools

Search Thread

Display

Loadmask on Filtering

Loadmask on Filtering

Code for the loadmask with gridview filter

Code for the loadmask with gridview filter