how to appy loadMask for gridpanel

[tfulmino]

Hendricd:

Thanks for the quick reply. The GridPanel is being loaded into a TabPanel. When the user submits a "search" we are creating an instance of the GridPanel and loading it into the TabPanel.

The code below is similar to what we are doing.

var viewer = Ext.getCmp('contentViewer');
if (viewer) {
     viewer.add(
         new Comperio.Controls.SearchResultGrid()
     ).show();
}

I tried the "afterlayout" event - no go.

Any other suggestions?

Thanks again!

[hendricd]

... The code below is similar to what we are doing.

If the tabPanel is already rendered, you must call doLayout on it:

var viewer = Ext.getCmp('contentViewer');
if (viewer) {
     var GP = viewer.add( new Comperio.Controls.SearchResultGrid() );
     viewer.doLayout();
     viewer.setActiveTab(GP);
}

But, if your tabPanel is set for autoHeight, there may not be any height to mask anything until something is loaded into the grid (chicken vs egg).

What is the parent container of the TabPanel?

[tfulmino]

Interesting....

The TabPanel is within a Viewport as the "center" container.

Does this make a difference?

[hendricd]

That is a good thing -- meaning the tabPanel always has a specific height/width.
Do not use autoHeight in that layout.

Did you add the defer syntax to the grid.load statement (try using the render event again with that) and fix your tabPanel.add ?

[tfulmino]

hendricd - first off THANK YOU for the assistance you are providing.

I have readjusted my code as you suggested. I am still receiving a JS error on the "show" function of the loadMask.

This is what I currently have:

render: function(grid)
 {   
     if(grid.loadMask){
         grid.loadMask.show();
     }
     grid.store.load.defer(100);
}

The following is what is happening with the new code....

1. user clicks search
2. tab menu is created on the viewer; however, not set to active
3. render event is called on the GridPanel
4. the statement (grid.loadMask) is true
5. error on the statement (grid.loadMask.show() - is not a function.)

[hendricd]

What version of Ext is this? the show method was introduced in 2.0+

[tfulmino]

We are using version 2.2.

If I put a watch on grid.loadMask it does not equal an object, but rather the value "true".

Problem?

[hendricd]

Problem?

Uh, yes. If you must define your grid, try defining it this way.

Comperio.Controls.SearchResultGrid = 
   Ext.extend( Ext.grid.GridPanel, {

        width:700,
        height:500,
        title:'ExtJS.com - Browse Forums',
        trackMouseOver:false,
        disableSelection:true,
        loadMask: true,
        // grid columns
        columns:[{
            id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: "Topic",
            dataIndex: 'title',
            width: 420,
            sortable: true
        }],
        
        store: new Ext.data.JsonStore({
            root: 'topics',
            totalProperty: 'totalCount',
            idProperty: 'threadid',
            remoteSort: true,

            fields: [
                'title', 'forumtitle', 'forumid', 'author',
                {name: 'replycount', type: 'int'},
                {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
                'lastposter', 'excerpt'
            ],

            // load using script tags for cross domain, if the data in on the same domain as
            // this page, an HttpProxy would be better
            proxy: new Ext.data.ScriptTagProxy({
                url: 'http://extjs.com/forum/topics-browse-remote.php'
            })
        }),
        listeners: 
        {
          render: function(grid)
          {
  
               if(grid.loadMask){
                     grid.loadMask.show();
              }
              grid.store.load.defer(100);
          }
        },


        // customize view config
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true
        }
    });

Ext.reg('csearchresultgrid', Comperio.Controls.SearchResultGrid);

Altho it's a bit of a waste since its a single-use class anyway.

[tfulmino]

Doug:

Thanks again for the quick response!

Taking your exact code and replacing mine produces the same result:

Error: grid.loadMask.show is not a function
Source File: http://localhost:12403/Library/Compe...hresultgrid.js
Line: 44

Can what I am doing even be accomplished?

[cpt_sisqo]

I'm too having the same error:

Error: grid.loadMask.show is not a function

Any solutions?