PDA

View Full Version : tabpanel inside form



mohaskuar
27 Feb 2014, 3:31 AM
I want to put tabpanel inside a form panel ...but the form is not showing up.
here is what I have tried




var form=new Ext.define('Ext.form.FormPanel',{
fullscreen : true,
layout : {
type : 'vbox',
align : 'stretch'
},
items : [
{
xtype : 'textfield',
label : 'Name',
name : 'name'
},
{
xtype : 'tabpanel',
flex : 1,
items : [
{
title : 'Info',
items : [
{
xtype : 'textfield',
label : 'Country',
name : 'country'
}
]
},
{
title : 'Contact',
items : [
{
xtype : 'emailfield',
label : 'Email',
name : 'email'
}
]
}
]
},
{
xtype : 'button',
text : 'Submit',
handler : function(button) {
var form = button.up('form');

form.submit({
url : 'data/form.php',
method : 'POST'
});
}
}
]
});
Ext.define('AM.view.pll.AddVcWin' ,{
extend: 'Ext.window.Window',
region:'east',
width:500,
height:'auto',
maximizable:true,
modal:true,
plain:true,
layout: 'fit',
//buttonAlign:'right',
autoShow: true,
closeAction:'hide',
alias : 'widget.addvcwin',
title : 'Create new packege',
items:[form


],

initComponent: function() {
this.callParent(arguments);
}

});

Zinnia
27 Feb 2014, 4:35 AM
If you are using layout 'vbx' , need to set the flex property for each item in a container.

Check the below example , it is working for me

http://jsfiddle.net/w4VWP/1/