PDA

View Full Version : Add a paire of button and label dynamically in to Panel



hieu79vn
19 Sep 2012, 12:32 PM
Hi

I would like to add a paire of button and label dynamically in to Panel like this



Button
Label


Buton
Label



But theirs width does not take 100% width of the panel. It you be align left.

Thank you

scottmartin
19 Sep 2012, 8:30 PM
Is this what you were looking for?



Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',

height: 89,
width: 244,
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'My Panel',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'container',
flex: 1,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'button',
flex: 1,
text: 'MyButton'
},
{
xtype: 'label',
flex: 1,
text: 'My Label'
}
]
},
{
xtype: 'container',
flex: 1,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'button',
flex: 1,
text: 'MyButton'
},
{
xtype: 'label',
flex: 1,
text: 'My Label'
}
]
}
]
});

me.callParent(arguments);
}

});

Ext.create('MyApp.view.MyPanel', {
renderTo: Ext.getBody()
});
‚Äč

Scott.

hieu79vn
20 Sep 2012, 8:58 AM
Thank you Scott. Actually I try to add them dynamically when user click on a button
I found that the lay out column can help to do that

Thank you