PDA

View Full Version : ExtJS 3: Form-Fields in Tabs and Panels



Snoop74
4 Nov 2009, 5:06 AM
Hello.

Using ExtJS 3.0, I have the following problem (for me is's a show-stopper):

I receive a komplex data-record from a XML file.
The Users should be able to edit those data with one ExtJS Form:


At the top, a TabPanel separates the categories (Tabs "Order", "Content", "Details")
Within the tabs are several detail Panels:

Order:

Sender (Stringfield: "Code", Textfield: "Address")
Receiver (Stringfield: "Code", Textfield: "Address")
...

...


My Questions:


How can I built up such a ExtJS form structure ?
How can I send all those fields together (over all tabs) back to the XML ?

I searched a lot but found nothing matching :-(

smit_al
4 Nov 2009, 5:12 AM
Something like this


new Ext.FormPanel({
items:{
xtype: 'tabpanel',
items: {
......
}
}
})

Snoop74
4 Nov 2009, 5:32 AM
I tried taht and get the TabPanels ...

... but how can i set several Panels with fields within a Tabpanel ?

And all those fields should be transmitted by clicking on "save" ...

Animal
4 Nov 2009, 6:08 AM
Something like this


new Ext.FormPanel({
items:{
xtype: 'tabpanel',
items: {
......
}
}
})

You must not forget



new Ext.FormPanel({
layout: 'fit',
items:{
xtype: 'tabpanel',
items: {
......
}
}
})

Snoop74
4 Nov 2009, 6:17 AM
Now I have the following:


[...]
var ta_auf = new Ext.Panel({

title: 'Test Auf',
x: 10,
y: 10,
width: 300,
height: 200,
tbar: [
act_new,
enter_code
],
items: [
new Ext.form.FieldSet({
autoHeight: true,
border: false,
defaultType: 'fieldset',
items: [{
name: 'code',
width: 80
}, {
name: 'address',
height: 120,
width:150
}]
})
]
});

var ta_order = new Ext.Panel({
title:'Test A',
layout: 'absolute',
height: 300,
border: false,
items: [ta_auf]
});

var tab2 = new Ext.FormPanel({
title: '',
bodyStyle: 'padding:5px',
reader : new Ext.data.XmlReader({
record : 'contact',
success: '@success'
}, [
{name: 'first', mapping:'name/first'},
{name: 'last', mapping:'name/last'},
'company', 'email', 'state',
{name: 'dob', type:'date', dateFormat:'m/d/Y'}
]),
items: [{
layout: 'column',
border: false,
items: []
},{
xtype: 'tabpanel',
plain: true,
activeTab: 0,
autoHeight: true,
defaults: { bodyStyle:'padding:10px' },
items: [ta_order, {
title: 'Test',
layout: 'form',
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'
}]
}]
}],

buttons: [{
text: 'Save'
}]
});
[...]

I can't either edit the fields within the "ta_auf" nor set the layout within that panel :-(

The "layout = 'fit'" hint doesn't work - then the tabpanel is aligned to the bottom.

Animal
4 Nov 2009, 6:48 AM
var ta_order = new Ext.Panel({
title:'Test A',
layout: 'absolute',
height: 300,
border: false,
items: [ta_auf]


Why did you just gratuitously nest that "ta_auf" Panel inside another Panel?

Animal
4 Nov 2009, 6:49 AM
var tab2 = new Ext.FormPanel({
title: '',



How are you HOPING that FormPanel will size its children?

Snoop74
4 Nov 2009, 8:14 AM
@ Why did you just gratuitously ...

Because in that layout, there should by different panels within every tab.
The user wants to have taht look ...

@ How are you HOPING ...

Everything looks ok. I can see all fields but cant edit them.

Animal
4 Nov 2009, 8:51 AM
What look?

There's no point putting one Panel in a Panel. Just use ta_auf as the first child of the TabPanel.

You must request that the FormPanel manages the size of those child items in a meaningful way.

Snoop74
4 Nov 2009, 8:56 AM
You can find the current look/layout in the attachment.
How can I solve that better ?

file:///C:/DOKUME%7E1/ADMINI%7E1/LOKALE%7E1/Temp/moz-screenshot-12.jpg

Animal
4 Nov 2009, 10:57 AM
So you actually want a non size managed Panel sitting somewhere in the middle of that Panel???????

Why not just put the tbar, and those two inputs in there?

Snoop74
4 Nov 2009, 12:37 PM
Those panel you see is only the first "test panel". With that one i try to set the layout with that panel (labels, edit fields, ...) and test the data transfer. When everything is working, I paste several more panels into that an the other tabpanels.

Snoop74
5 Nov 2009, 7:42 AM
No more Ideas ? Nobody :-(