PDA

View Full Version : How to rerender existing form from scratch



BrainDrain
2 Jul 2008, 2:32 AM
How can I rerender, recreate form (panel - container of some elements) correctly?
For ex. I have already rendered formPanel object & I want this object to be recreated as if never been rendered. I think it requires destroying corresponding dom nodes?

Starfall
2 Jul 2008, 2:36 AM
Well, remove the existing formPanel and add a new one.

Your question is not clear. See http://extjs.com/forum/showthread.php?t=6272

BrainDrain
2 Jul 2008, 6:13 AM
this doesn't work in IE (combo's doesn't resize correctly (only grows)), so I want to rerender form, because at startup combo's width is correct


Ext.onReady(function() {
var defaultCfg =
{
id:'test',
layout:'column',
region:'center',
split:true,
title:'test',
border:false,
autoHeight:true,
bodyStyle:'padding:5px',
labelAlign:'top',
labelWidth:50,
buttonAlign:'right',
labelPad:5,
monitorResize:true,
collapsible:true,
defaults:
{
labelAlign:'top',
layout:'column',
columnWidth:1,//.5
region:'center',
border:false,
width:'100%',
anchor:'100%',
defaults:
{
layout:'form',
columnWidth:1,//.5
border:false,
width:'100%',
anchor:'100%',
defaults:
{
xtype:'combo',
//displayField:'name',
//valueField:'index',
//minListWidth:120,
triggerAction:'all',
mode:'local',
selectOnFocus:true,
forceSelection:true,
emptyText:'select...',
blankText:'select...',
title:'select...',
editable:true,
disableKeyFilter:false,
allowBlank:false,
resizable:true,
width:'100%',
//style:{width:'100%'},
//hideLabel:true,
//grow:true,
//autoSize:false,
anchor:'100%'
}
}
}//,
//renderTo:'east'
};

var items=
[{
name:'test1',
fieldLabel:'test1',
emptyText:'test1',
title:'test1'
},
{
name:'test2',
fieldLabel:'test2',
emptyText:'test2',
title:'test2'
},
{
name:'test3',
fieldLabel:'test3',
emptyText:'test3',
title:'test3'
}];

defaultCfg.items=
[{
items:[{items:[items[0]]}]
},
{
items:[{columnWidth:.5,items:[items[1]]},{columnWidth:.5,items:[items[2]]}]
}];

form = new Ext.form.FormPanel(defaultCfg);

var win = new Ext.Window({
title: 'Resize Me',
width: 500,
height:300,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
items: form,
listeners:{resize:function(){this.items.items[0].doLayout();}},
buttons: [{
text: 'Send'
},{
text: 'Cancel'
}]
});

win.show();
});