Create a page using ext desginer please help me

[saji.krizh]

i want to create a page using ext designer .
it should align in the center and number boxes as in the picture format
how can i place the number boxes in a form or in a panel, in which they should placed without using absolute layout. please help me by advising hw can i place such boxes one by one with our specification in different places , please help me
and one more thing how can i develop next page for using in the same project ? there is no option for new page.

34291

[scottmartin]

See if this will get you started .. you will need to play with the spacing, padding, etc.



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

height: 296,
width: 540,
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'My Panel',

initComponent: function() {
var me = this;

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

me.callParent(arguments);
}

});


Regards,
Scott.

34450