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 http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.app.EventBus-method-control — Sreek521, Aug 28 '14 at 12:13

score 4 · Accepted Answer · answered Aug 28 '14 at 17:16

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.

I have a question about this.. In the condition 'viewport>panel' viewport refers to the class name right? What if i want to find a panel within a container or a user defined class..Will I be able to do that? — user777777, Sep 02 '14 at 14:00
You can try this viewport>panel[cls=my-cls], here is panel is just an xtype, you can give user defined xtype instead of panel. You can also apply logical operations(like 'and', 'or'), you can also find by component's properties(like collapsible=true, cls=..). For more options check out this : http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.ComponentQuery — Bala, Sep 02 '14 at 15:58

score 2 · Answer 2 · answered Aug 29 '14 at 20:21

Viewport in extjs is the entire browser window in which your application gets rendered. viewport > panel is not a condition. You are just finding any panel inside the viewport using a CSS selector and hooking up the render event with the onPanelRendered method.

what is viewport panel in extjs4

2 Answers2