Blog Archive

ExtJs get Panel Height and Width

First you need to get a reference to your panel. Either you assign a variable when you create the panel or in your controller use refs as shown below ...

Snippet of a view:
items: [
 {
  xtype: 'panel',
  html: 'This is a sample to get width and height of a Ext panel'
 },
 .....
] 

Snippet of controller:
config: {
        refs: {
            mySignature: 'panel[id="signature"]'
        },
       .....
    },

Then you can use this.getMySignature() to get a reference to your Ext.Panel

var panel =  this.getMySignature();

Now if you have specified the width and height attributes of the panel while defining it in the view the you can do

height = panel.getHeight();
width = panel.getWidth();

But if you have not defined any height or width then that will get you null values. To get the height and width you have to use element property as shown below

height = panel.element.getHeight();
width = panel.element.getWidth();