PDA

View Full Version : Dynamic Fieldset with TableLayout doesn't render



D3f0
23 Jun 2010, 11:43 AM
Hi,
I've been using ExtJs for three moths and I'm quite happy with it. I'm trying to dynamically add a FieldSet to a
FormPanel. If I do it statically, it works, but it doesn't render when I try to do it through form panel's instace add method. Any other component added dynamically seems to work right.

I've found this thread (http://www.sencha.com/forum/showthread.php?58145-TableLayout-not-rendering-as-advertised&p=277941), but I don't see any response with a solution to the issue.

I've read the TableLayout (http://www.sencha.com/deploy/dev/docs/output/Ext.layout.TableLayout.html) docs but it doesn't say anything about dynamic component addition restrction.

Here's the code to reproduce the bug:



var formWindow = new Ext.Window({
//renderTo: window.document,
width: 400,
autoHeight: true,
title: "Hola",
autoShow: true,

items: [new Ext.FormPanel({
itemId: 'formpanel',
padding: "3px",

items: [{
xtype: 'textfield',
fieldLabel: "Nombre",
name: "nombre"
}, {
xtype: 'textfield',
fieldLabel: "Apellido",
name: "apellido"
}, {
xtype: 'textfield',
fieldLabel: "Dirección",
name: "direccion"
}, {
xtype: 'datefield',
fieldLabel: "Fecha",
name: "fecha"
}
]

})],
buttons: [{
xtype: "spacer",
width: "100%"
}, {
text: "OK",
handler: function(){
// Actualizar los ítems
formWindow.get('formpanel').el.mask("Validating data...");
Ext.each(formWindow.buttons, function(b){
b.setDisabled(true);
});
//console.log();
var frm = formWindow.get('formpanel').getForm();
console.log("Form Data:", frm.getValues(true));
}
}, {
text: "Load items",
handler: function(){
formWindow.getComponent('formpanel').add({
xtype: 'fieldset',
layout: 'table',
padding: '3px',
layoutConfig: {
columns: 4
},
title: 'Items',
defaultType: "textfield",
items: [{
name: "pk",
hidden: true,
width: 0,
style: "visibility: hidden"
}, {
xtype: "label",
text: "Name"
}, {
xtype: "label",
text: "Age"
}, {
xtype: "label",
text: "Delete?",
name: "delete"
}, {
xtype: "hidden"
}, {
name: "name_1",
}, {
name: "age_1",
}, {
name: "delete_1",
xtype: "checkbox"
},{
xtype: "hidden"
},{
name: "name_2"
},{
name: "age_2"
}, {
name: "delete_2",
xtype: "checkbox"
}]
});
formWindow.doLayout();
}
}, ]

});

formWindow.show();
WIN = formWindow; // Puhlish globally for debugging


The error:
http://img205.imageshack.us/img205/6095/extformpanelerror.png

Desired Layout:
http://img340.imageshack.us/img340/6069/extformpanelok.png

darthwes
23 Jun 2010, 4:51 PM
what browser? works in chrome.

D3f0
23 Jun 2010, 5:06 PM
Chromium 5.0.375.70 (48679) in Ubuntu