PDA

View Full Version : Add new tab after onclick with form inside



binadit
14 May 2008, 4:40 AM
Hello everybody,

I'm pretty new to extjs, but I'm allready building my first simple application. After a lot of searching and sweat I've created a Viewport with a tabpanel insode of it.

After that I created a addTab funtion to add new tabs to my tabpanel. This function looks like this:



function addTab(module,link){
tabs.add({
title: module,
autoScroll: true,
iconCls: 'icon',
autoLoad: link,
closable:true
}).show();
}
As you can see t opens a new tab with a html file or whatever the web link gives you.


What I would like to have

I would like to create a new function called addForm() that creates a new tab with a form that looks like form 5 from this link: http://www.extjs.com/deploy/dev/examples/form/dynamic.html (http://www.extjs.com/forum/../deploy/dev/examples/form/dynamic.html)

I suppose I have to dd this form as an item to the tabs.add function?!? :-/

Can someone please help making this work?

The code form the form is like this:



var tab2 = new Ext.FormPanel({
labelWidth: 95,
frame:true,
title: 'Inner Tabs',
bodyStyle:'padding:5px',
width: '90%',
height: '90%',
items: [{
layout:'column',
border:false,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jack'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Slocum'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
},{
cls:'x-plain',
title:'Biography',
layout:'fit',
items: {
xtype:'htmleditor',
id:'bio2',
fieldLabel:'Biography'
}
}]
}],

buttons: [{
text: 'Opslaan'
},{
text: 'Annuleren'
}]
});

Any more question or sourcecode needed to solve my question? Please ask!

14 May 2008, 4:45 AM
simply add to that code:

yourTabPanel.add(tab2);
yourTabPanel.activate(tab2);

binadit
14 May 2008, 5:11 AM
Thank you very much! My function opens a new tab and tries to display the form.

The strange thing is it doesn't display correctly. Now it looks like this:

http://www.ronaldjonkers.nl/wrong.gif

instead of like this:

http://www.ronaldjonkers.nl/right.gif


Do you know why this happends?

14 May 2008, 7:18 AM
get rid of your relative widths and set your tabPanel to layout:'fit'