CODEWITHSUNDEEP
sencha-touchpanel
Smitha
Smitha

Reputation: 6134

How to adjust the height and width of the Panel in Sencha touch?

Suppose I have 3 different Panels [bottomCar0,bottomCar1,bottomCar2] and want to adjust the height and width of them as per my requirement, how can i do that??

My Code : 

  var bottomCar=new Ext.Panel({    
            layout:{    
                type:'hbox',    
                align:'stretch'    
            },    
            defaults:{    
              flex:1  
           },  
            items: [bottomCar0,bottomCar1,bottomCar2]    

      });

how can i change the defaults??

Thnaks
Sneha

Upvotes: 1

Views: 4130

Answers (2)

hunteryxx
hunteryxx

Reputation: 70

OR you can add "cls" to your panel and adjust it in css file.

Upvotes: 0

neoswf
neoswf

Reputation: 4760

The thing is, that you setted flex:1. This will give the property flex:1 to each one of your items. This will force them to capture the available space, accordingly the remaining space, devided by the number of the setted flex objects.

Like if u have, in your case, 3 items with flex:1, than each will get 33% of the available height.

What you need to do is remove the flex from the defaults and give it to the panel itself, than set the dimensions.

You can set inside the defaults the height and width, if all of them will get the same values

defaults:{   
    height: 200,
    width: 300
}

or set to each item its height and width

items: [
    {
        title: 'Home',
        iconCls: 'home',
        height: 200,
        width: 300
    },
    {
        title: 'Contact',
        iconCls: 'user',
        html: 'Contact Screen',
        height: 100,
        width: 150
    }
]

More on Flex

Shlomi.

Upvotes: 2

Related Questions