PDA

View Full Version : Using JsonReader instead of XmlReader with Forms



atchijov
2 Apr 2008, 10:54 AM
I am trying to use JsonReader instead of XmlReader with my FormPanel (most of the code yanked straight from "xml-form" example number 5). I know that reader gets "invoked" (see it in server log and in "actioncomplete" even handler). I know that reader able to read data (by looking into state of the reader inside "actioncomplete" event handler). But, form is not getting rendered (actually it is partially rendered, tab panel at the bottom of the form gets rendered but fields at the top are not). I am not sure if it makes a difference, but other "deviation" from xml-form example is that my form gets added as a tab to TabPanel.

Your help will be greately appreciated.

Andrei

Below snippets of relevant code:



MetricView = function( ... ) {
...
this.reader = new Ext.data.JsonReader({
root : 'metric',
id: 'id',
totalProperty: 'count',
}, [
"id", "version", "name", "state", ...
]);

MetricList.superclass.constructor.call(this, {
...
reader: this.reader,
items: [
{
xtype:'textfield',
fieldLabel: 'name',
name: 'name',
anchor:'95%'
}, ....
]
}
});
...
}
Ext.extend(MetricView, Ext.form.FormPanel, {
...
});


This is sample of json data :


{"success":"true","count":1,"metric":[{"id":"7","version":"1.0","name":"ApplicationFlawPercent","state":"Draft", ....

elishnevsky
2 Apr 2008, 11:12 AM
JSON support is built-in into FormPanel so you don't have to implement JsonReader, did you know that? In case you didn't look here: http://extjs.com/deploy/dev/docs/?class=Ext.form.Action.Load

atchijov
2 Apr 2008, 11:51 AM
I did not know that. Though sadly it did not help much. I guess it proved that problem is not with JsonReader, but with the way my FormPanel get created/rendered.

After digging around, I discovered the issue (or at least found acceptable work-around). Things start working properly once I set

deferredRender: false

On TabPanel to which my FormPanel was added.

Though even with this change it does not work 100% properly. At the bottom of the form, I have another tab panel with 2 tabs. First tab contains "htmleditor" field in it. It stays blank, until I switch to 2nd tab and then back to first tab. It "smells" like something similar to original problem, but adding "deferedRender: false" to tab panel deinition like this:

,{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
deferredRender: false,
...

did not help.

atchijov
2 Apr 2008, 12:37 PM
looks like "magic" combination of config options for TabPanel is :

deferredRender: false,
layoutOnTabChange: true,
hideMode: 'offsets',

With this 3, things work as they should.

Thnx for replies.

Andrei