PDA

View Full Version : problems with layout:'vbox'.



kramal
4 Feb 2013, 11:24 PM
Hello friends!
Yesterday I have begun to write my little programm and I have encountered with the problem.
I want to get portal or main web-page , where will be defined 1)left-side that includes form(formR in code),and some menu(menuR in code) and with width about 20% of window`s width 2)central-side with width 80%. but in west(variable ) I have some strange effect, I cant see either form, and accordion!

Thanks for answers!


var formR=Ext.create('Ext.form.Panel',{
title:'Log in',
items:[
{
xtype:'textfield',
fieldLabel:'Name'
},{
xtype:'textfield',
fieldLabel:'Password',
inputType:'password'
}
],
buttons:[
{
text:'Submit',
handler:function(){}
},{
text:'Reset',
handler:function(){}
}
]

});




var menuR=Ext.create('Ext.panel.Panel',{
layout:'accordion',
title:'Menu',
items:[
{
text:'Some 1',
html:'Here ....'
},{
text:'Some 2',
html:'Here ....'
}
]
});


var west=Ext.create('Ext.Panel',{
padding:5,
region:'west',
title:'Options',
layout:'hbox',
items:[
formR,
menuR
]
});
Ext.onReady(function(){
Ext.create('Ext.container.Viewport',{
layout:'border',
items:[
west,
//center
]
})
});

sriram139
5 Feb 2013, 8:47 AM
You must have center panel, which is mandatory for any border layout.
And also specify width for the 'west' region.

Sample code working with your own example:


var formR=Ext.create('Ext.form.Panel',{
title:'Log in',
items:[
{
xtype:'textfield',
fieldLabel:'Name'
},{
xtype:'textfield',
fieldLabel:'Password',
inputType:'password'
}
],
buttons:[
{
text:'Submit',
handler:function(){}
},{
text:'Reset',
handler:function(){}
}
]


});








var menuR=Ext.create('Ext.panel.Panel',{
layout:'accordion',
title:'Menu',
items:[
{
text:'Some 1',
html:'Here ....'
},{
text:'Some 2',
html:'Here ....'
}
]
});




var west=Ext.create('Ext.Panel',{
padding:5,
width: 500,
region:'west',
title:'Options',
layout:'hbox',
items:[
formR,
menuR
]
});
var center = Ext.create('Ext.Panel',{
padding:5,
region:'center',
title:'Options',
layout:'hbox'
});
Ext.onReady(function(){
Ext.create('Ext.container.Viewport',{
layout:'border',
items:[
west,
center
]
})
});

kramal
25 Feb 2013, 10:47 PM
Thanks I solved this problem