PDA

View Full Version : FormPanel and Load (JSON reader)



abdulabi
26 May 2009, 12:44 PM
hi all,

i've had a look around within the forum but i cudn't find a solution for my problem. i'm pretty much new into ExtJS so forgive me if i'm making some slight mistake ;)

so i try to extend formPanel and load data using JsonReader





Example = Ext.extend(Ext.FormPanel, {
constructor: function(config) {
var selfObj = this;

config.reader = new Ext.data.JsonReader({
root: 'basicInfo',
successProperty: 'success',
totalProperty: 'total'

}, [
{name: 'id'},
{name: 'url', mapping: 'url'},
{name: 'optiDays', mapping: 'optiDays'},
{name: 'freeServicePeriod', mapping: 'freeServicePeriod'},
{name: 'gdc', mapping: 'gdc'},
{name: 'afv', mapping: 'afv'}
]);

gDataCenter = new Ext.data.SimpleStore({
fields: ['id', 'name'],
data: googleDataCenter
});

autoInvoicing = new Ext.data.SimpleStore({
fields: ['id', 'name'],
data: [
['0', 'OFF'],
['2', 'ON']
]
});

optiDaysOptions = new Ext.data.SimpleStore({
fields: ['id', 'name'],
data: optiDaysOptions
});

freeServiceOptions = new Ext.data.SimpleStore({
fields: ['id', 'name'],
data: freePeriodOptions
});

config = Ext.apply({}, config, {
labelAlign: 'top',
title: 'INFO',
bodyStyle: 'padding:5px',
width:650,
waitMsgTarget: true,
autoShow: true,
region:'center',
items: [{
layout: 'column',
border: false,
items:[{
columnWidth:.5,
width: 300,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'URL',
allowBlank: false,
name: 'url',
vtype: 'url',
anchor: '95%'
},{
xtype: 'combo',
store: optiDaysOptions,
displayField: 'name',
valueField: 'id',
typeAhead: true,
mode: 'local',
forceSelection: true,
trigerAction: 'all',
emptyText: '...',
selectOnFocus: true,
fieldLabel: 'DAYS',
name: 'optiDays',
allowBlank: false,
anchor: '95%'
},{
xtype: 'combo',
store: freeServiceOptions,
displayField: 'name',
valueField: 'id',
typeAhead: true,
mode: 'local',
forceSelection: true,
trigerAction: 'all',
selectOnFocus: true,
fieldLabel: 'XX',
name: 'freeServicePeriod',
allowBlank: false,
anchor: '95%'
}]
},{
columnWidth:.5,
layout: 'form',
width: 300,
border: false,
items: [{
xtype: 'combo',
store: gDataCenter,
displayField: 'name',
valueField: 'id',
typeAhead: true,
mode: 'local',
forceSelection: true,
trigerAction: 'all',
emptyText: '...',
selectOnFocus: true,
fieldLabel: 'XXXXX',
name: 'gdc',
allowBlank: false,
anchor: '95%'
},
{
xtype: 'combo',
store: autoInvoicing,
displayField: 'name',
valueField: 'id',
mode: 'local',
forceSelection: true,
trigerAction: 'all',
emptyText: '...',
selectOnFocus: true,
fieldLabel: 'YYY',
name: 'afv',
allowBlank: false,
anchor: '95%'
},
new Ext.Button({ text: 'action', handler: function() { selfObj.loadForm() } })]
}]
}]
});

Example.superclass.constructor.call(this, config);
},

loadForm: function() {
this.getForm().load({
success: function() { alert('success') },
failure: function() { alert('fail') },
url: '/some_url.php',
waitMsg:' Loading'
});
}
});

JSON looks pretty much like this




{
"success":true,
"total":1,
"basicInfo": {
"url":"www.url.com",
"id":"17",
"optiDays":"90",
"freeServicePeriod":"90",
"gdc":"google.com",
"afv":0
}
}
after clicking the action button it comes up with a failure alert. I checked the failure Type and it says "load"...

what am i doing wrong? thanks for your help!

Animal
26 May 2009, 11:33 PM
Don't use a Reader. Forms understand JSON.

abdulabi
27 May 2009, 12:41 AM
Hi Animal,

thanks for your answer. I removed the reader declaration and I think it still doesnt work :( if there is no reader declared how would I provide information about the root and success property?

Animal
27 May 2009, 12:50 AM
There is no root. Just read the docs to see the format of the JSON you must return!

abdulabi
27 May 2009, 1:13 AM
thank you, Animal! It works now! :D