PDA

View Full Version : Problem with creating dynamic form



h4r1
3 Jul 2012, 4:03 AM
I want to create a dynamic form where the items config is supplied by a PHP script.

I have created a simple script as shown below. The problem is it only shows an empty form.


function onReady() {

var basicForm =
{
id: 'IDform'
,xtype:'form'
,labelWidth:60
,frame:true
// ,items: [ {fieldLabel: 'aaa', name: 'bbb', xtype: 'textfield' } ]
};

var win = new Ext.Window({
title:'My Form'
,renderTo:Ext.getBody()
,width:420
,height:240
,border:false
,layout:'fit'
,items: basicForm,
});

Ext.Ajax.request({
url : 'formconfig.php' ,
method: 'GET',
success: function (response) {
var AJAXform = Ext.JSON.decode(response.responseText);
Ext.apply(basicForm, AJAXform);
win.show();
},
failure: function (response) {
console.log('AJAX failed');
}
});


}


And here is the formconfig.PHP script:


<?php
$fields = array(
array(
"fieldLabel"=>"aaa"
,"name"=>"bbb"
,"xtype"=>"textfield"
)
);


$config = array(
"success"=>true
"items"=>$fields
);
echo json_encode($config);
?>



Any help will be appreciated. Many thanks!

evant
3 Jul 2012, 4:10 AM
Think about the order. The window is being constructed and loaded before you even fire off the Ajax request.

Would suggest you look at examples/component-loader in the SDK download.

h4r1
3 Jul 2012, 5:47 PM
Thanks for the quick response!

Pardon about that silly mistake. By moving win declaration right before win.show(), the problem is solved.

However, what if I want to stay with my original script? I just need to re-render the component before win.show().
I've been searching and reading the forum but haven't got the concept about how to re-render. Which component should be re-rendered? The window or the form?
I've tried the following statements and didn't work:


Ext.getCmp('IDwindow').render();
win.render();
win.show();

Again, pardon for another stupid question ... thanks!

evant
3 Jul 2012, 6:32 PM
You never re-render components, once a component is rendered, that's it.

To change the contents of a container, you use the add/insert & remove methods.

h4r1
3 Jul 2012, 7:30 PM
It's very clear to me now. Because the component can't be re-rendered, so I must revise my UI design.

Many thanks evant!