what is viewport panel in extjs4

Question

What does 'viewport>panel' mean in extjs4? When will it be called? What is the significance of using it?

init : function() {
    console.log('In init function');
    this.control({
        'viewport > panel' : {
            render : this.onPanelRendered
        }
    });
}

Since it is in init function, I know that it is called during the application startup. But my code does not enter into the onPanelRendered method so I assume that the condition 'viewport>panel' fails, but I want to know what exactly does it do and What are the other options that can be used.?

Thanks in advance

I think 'viewport>panel' there is a css selector.Refer docs.sencha.com/extjs/4.2.1/#!/api/… — Sreek521

Bala Bala · Accepted Answer · 2014-08-28T17:16:06

ExtJS comes under the category of single page web applications(In general these projects will have only entry point). These single page web applications take control of browser's visible area, this area is called as 'viewport' in ExtJS. ExtJS4 starts rendering your application right from the viewport. It is an extended container. You can check its documentation and config parameters that are applicable for viewport here.

Documentation says

The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page. Blockquote

Thats all about viewport.

Coming to your second question "When will it be called? ". When ever ExtJS application is ready then it searches for viewport.js and starts rendering it on body. That means it will be called as soon as your application is ready.

And finally lets see the usage of viewport in your controller.

'viewport > panel' : {
        render : this.onPanelRendered
    }

Here you are calling dom query to get hold of panel's events. Above statement says, go to the first panel of viewport's items and execute the render event. In this case, this.onPanelRendered will be called whenever panel gets render.

Possible problems could be

'onPanelRendered' is not available at controller's scope
viewport may not have panel
If viewport has panel, its 'render' event might have been overridden
Application configuration may not be correct

Still you are not able to figure it out, post your complete code and errors, if any.

what is viewport panel in extjs4

2 Answers