PDA

View Full Version : Ex.FormPanel layout column dynamically loading items from local json file



juliame
3 Sep 2010, 10:51 AM
I'm trying dynamically load items to FormPanel with layout :'column' .
After running my code I received error message : 'dom' is null or not an object.
If I change layout to 'form' it's working without errors.
If I am testing this code without automatically loading items (filling items hard coded) - it's working right.
Thanks,

Code Example:


//html file java script example
var tabiD = '1';
var frm = new Ext.FormPanel(
{
bodyStyle: 'padding:5px 5px 0',
id:tabID,
height: 300,
frame:true,
autoHeight: true,
xtype:'form',
layout:'column',
items: [],
autoLoad: 'myTest.json',
renderer: {
render: function(el, response, updater, callback) {
if(form = Ext.getCmp(tabID)) {
form.add.apply(form, [].concat(Ext.decode(response.responseText) ) );

form.doLayout(); // error message 'dom' is null or not an object
}
if(callback)callback();
}
}
});




Json file:


[{
columnWidth: .5,
layout: 'form',
items: [{
xtype: 'fieldset',
title: 'Phone Numbers',
autoHeight: true,
defaultType: 'textfield',
items: [{
fieldLabel: 'Home',
name: 'homePhone'
},
{
fieldLabel: 'Business',
name: 'busPhone'
}]
}]
},
{
columnWidth: .5,
layout: 'form',
items: [{
xtype: 'fieldset',
title: 'Internet',
autoHeight: true,
defaultType: 'textfield',
items: [
{
fieldLabel: 'IM',
name: 'imAddress'
}]
}]
}]

Condor
6 Sep 2010, 3:23 AM
ColumnLayout doesn't support adding items when no columns are present.

Would HBoxLayout work?

juliame
9 Sep 2010, 5:38 AM
Thank you , but HBoxLayout not worked too



var frm = new Ext.Panel({
layout: 'hbox',
bodyStyle: 'padding:5px 5px 0',
id:tabID,
frame: true,
height: 400,
width: 800,
defaults: { flex: 1 },
items:[],
autoLoad: 'my.json',
renderer: {
render: function(el, response, updater, callback) {
if(form = Ext.getCmp(tabID)) {
form.add.apply(form, [].concat(Ext.decode(response.responseText) ) );
form.doLayout();
}
}
}
});

my.json


[
{
xtype: 'fieldset',
title: 'Phone Numbers',
autoHeight: true,
defaultType: 'textfield',
items: [
{fieldLabel: 'Home',name: 'homePhone',anchor: '95%'},
{fieldLabel: 'Business',name: 'busPhone',anchor: '95%'},
{fieldLabel: 'Mobile',name: 'mobPhone',anchor: '95%'},
{fieldLabel: 'Fax',name: 'fax',anchor: '95%'}
]
},
{
xtype: 'fieldset',
title: 'Internet',
autoHeight: true,
defaultType: 'textfield',
items: [
{fieldLabel: 'Email',name: 'email',vtype: 'email',anchor: '95%'},
{fieldLabel: 'Web page',name: 'webPage',vtype: 'url',anchor: '95%'},
{ fieldLabel: 'IM',name: 'imAddress',anchor: '95%'}
]
}
]

Condor
9 Sep 2010, 6:47 AM
Not sure why this fails...

Have you seen the LiteRemoteComponent plugin in the User extensions forum (it would work much easier here then autoLoad).