PDA

View Full Version : [Resolved] Ext.Direct Form Loading



woody
17 Jun 2009, 6:43 AM
I'm trying to load data using Ext.Direct into a simple form



Ext.onReady(function() {
var form = new Ext.form.FormPanel({
api: {
load: Supplier.read,
submit: Supplier.update
},
frame: true,
baseParams: {id: '1'},
paramsAsHash: true,
defaultType: 'textfield',
items: [{name: 'supplier_name', fieldLabel: 'Supplier'},{name: 'catalog_format', fieldLabel: 'Catalog'}]
});
form.load();

var win = new Ext.Window({
layout:'fit',
width:500,
height:300,
title:'test',
items: form
});
win.show();
});


Firebug shows, that the the Params are submitted using post and the returned json result looks like the following:


{"type":"rpc","tid":2,"action":"Supplier","method":"read","result":{"id":"1","supplier_name":"Dummy1234","catalog_format":"CSV"}}


In the end the form fields aren't populated with the received data.

What am I doing wrong?

Regards,


Bernhard

aconran
17 Jun 2009, 7:29 AM
Looks alright; if you set a breakpoint in the Load Action is the success function being executed?

hendricd
17 Jun 2009, 7:32 AM
Perhaps the form needs to be rendered in the Window before you load it?

aconran
17 Jun 2009, 8:12 AM
Could catch Doug; Yes, the Window will need to be shown before you can load the form.

woody
17 Jun 2009, 10:57 AM
Aaron, Doug, thanks for your replies. I tried moving the form.load() after win.show() as well as removing the window section and instead adding the renderTo: 'form-example' to the FormPanel options to be displayed within the according div-tag. both options left the form empty.

regarding your debugging proposal. i still need to look into that, as i am kinda new to this topic and have to spend more time on dealing with the firebug debugging approach.

so actually i am stuck with the following code and the same empty fields



Ext.onReady(function() {
var form = new Ext.form.FormPanel({
renderTo: 'grid-example',
api: {
load: Supplier.read,
submit: Supplier.update
},
frame: true,
baseParams: {id: '1'},
paramsAsHash: true,
defaultType: 'textfield',
items: [
{name: 'supplier_name', fieldLabel: 'Supplier'},
{name: 'catalog_format', fieldLabel: 'Catalog'}
]
});
form.load();
});

hendricd
17 Jun 2009, 11:24 AM
@woody -- Let's get it rendered first. ;)



Ext.onReady(function() {
var form = new Ext.form.FormPanel({
api: {
load: Supplier.read,
submit: Supplier.update
},
frame: true,
baseParams: {id: '1'},
paramsAsHash: true,
defaultType: 'textfield',
items: [
{name: 'supplier_name', fieldLabel: 'Supplier'},
{name: 'catalog_format', fieldLabel: 'Catalog'}
],
listeners: {
render : function() { this.load(); }
}
});
form.render('grid-example');
});

woody
17 Jun 2009, 11:38 PM
Still empty :(

here the complete simple html code. am i losing my mind? any more clues?



<html>
<head>
<title>Ext.Direct Form Test</title>
<link rel="stylesheet" type="text/css" href="/ext-3.0/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext-3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-3.0/ext-all-debug.js"></script>
<script type="text/javascript" src="/api.php"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/ext-3.0/resources/images/default/s.gif';
Ext.Direct.addProvider(Ext.app.REMOTING_API);
Ext.onReady(function() {
var form = new Ext.form.FormPanel({
api: {
load: Supplier.read,
submit: Supplier.update
},
frame: true,
baseParams: {id: '1'},
paramsAsHash: true,
defaultType: 'textfield',
items: [
{name: 'supplier_name', fieldLabel: 'Supplier'},
{name: 'catalog_format', fieldLabel: 'Catalog'}
],
listeners: {
render : function() { this.load(); }
}
});
form.render('form');
});
</script>
</head>
<body>
<div id="form"></div>
</body>
</html>
you can see in the attached file, that everything is loaded perfectly from the server side php script.

the weird thing is, that within a very short time i could get a editorgrid working with a DirectStore pretty easy. so i'm just wondering why the form won't work.

Thanks for your support

aconran
18 Jun 2009, 9:08 AM
Does the example from the SDK for form loading via Ext.Direct work in your environment?

woody
18 Jun 2009, 11:36 AM
Aaron, thanks a million. I didn't know such examples exist. They actually helped me to find the error after looking at the json result returned by the server.

I didn't know the form was looking for a result like


"result":{"success":true,"data":{"street":"1234 Red Dog Rd.","city":"Seminole","state":"FL","zip":33776}}

I previously returned the data directly within "result". After adding both "success" and the "data"-array to the return object of the called php function it worked as advertised.

Again, thanks for helping and pointing out the existence of the Ext.Direct examples. :">

Regards, Bernhard