Friday, February 10, 2012

Sencha touch 2.0 Panel Align Button Left and Right

Hello,

Recently I was working with Sencha touch 2.0 and I had a requirement to align buttons in panel. One button should be left side and other should be on right side. Something like image below.


This is easily possible if we use toolbar. check the following code.


{
   xtype: 'panel',
   dockedItems: [{
                             xtype: 'toolbar',
                             docked: 'bottom',
                             items: [{
                                           xtype: 'button',
                                           text: 'Multiple Choice',
                                           ui: 'confirm'
                                        }, {
                                           xtype:'spacer'
                                        }, {
                                           xtype: 'button',
                                           text: 'Sort and Match',
                                           ui: 'confirm'
                              }]
              }]
}

But what if you have to use panel. You can use hbox layout to align buttons horizontally but how can we have gap between them because spacer will not work in panel. You can use flex property here. Check the following code.


{
    xtype: 'panel',
    layout: 'hbox',
    title: 'Play Game',
    items: [{
                  xtype: 'button',
                  text: 'Multiple Choice',
                  ui: 'confirm',
                  flex: 0.3
                }, {
                  xtype:'panel',
                  flex: 0.4
                }, {
                  xtype: 'button',
                  text: 'Sort and Match',
                  ui: 'confirm',
                  flex: 0.3
        }]
}

It will give you following output.


That's it and you have desired output.


No comments:

Post a Comment