PDA

View Full Version : [NEWBIE] Combo / JSON Store problem



gfevrier
13 Dec 2011, 2:13 AM
Hi,

I'am new with ExtJS (v 3.2.1, no choice) and I have a "little" problem to create a combobox with a JSON Store...

I have the following code and I does'nt understand why there is no data in the store...


var periodeProxy = new Ext.data.HttpProxy({
url : 'ajax/varimport_combos.php?combo=periodes',
method : 'GET'
});

var periodeJsonStore = new Ext.data.JsonStore({
proxy : periodeProxy,
storeId : 'periodeStore',
root : 'records',
autoLoad : true,
totalProperty : 'totalCount',
remoteSort : true,
fields : [
{ name : 'Id_Per', mapping : 'Id_Per' },
{ name : 'DPer_Lib', mapping : 'DPer_Lib' }
]
});

var zoneChamps1 = {
xtype : 'fieldset',
title : '',
flex : 1,
border : false,
labelWidth : 100,
defaultType : 'field',
defaults : {
anchor : '-10',
allowBlank : false
},
items : [
{
fieldLabel : 'Id ',
name : 'Imp_Id',
readonly : true
},
{
fieldLabel : 'Code',
name : 'Imp_NC'
},
{
xtype : 'combo',
fieldLabel : 'Periode ',
name : 'Id_Per',
id : 'comboIdPer',
forceSelection : true,
displayField : 'Libelle',
valueField : 'Id',
hiddenName : 'Id_Periode',
loadingText : 'Loading....',
store : periodeJsonStore
},
{
fieldLabel : 'Unit ',
name : 'Uni_Id'
}
]
};

The combo displays... with no data.
The varimport_combos.php file is called and send the following datas :


{
"totalCount": 5,
"records": [
{
"Id": "A",
"Libelle": "An"
},
{
"Id": "H",
"Libelle": "Heure"
},
{
"Id": "J",
"Libelle": "Jour"
},
{
"Id": "M",
"Libelle": "Mois"
},
{
"Id": "Q",
"Libelle": "Quart d'heure"
}
]
}

Is there someone seeing what the problem is ?

Thanks

tobiu
13 Dec 2011, 2:49 AM
i see 2 points that can cause trobule:


url : 'ajax/varimport_combos.php?combo=periodes',


the url is not meant to add params, so i am not sure if this works.
the correct approach is to add baseParams as a config to the store:



baseParams: {
combo: 'periodes'
}


also, your json has different fields than the ones the store reads:


{name: 'Id_Per', mapping : 'Id'},
{name: 'DPer_Lib', mapping : 'Libelle'}


should fit better. there is no need to set mapping in case you map to the identical fields.

last tip: these are the ext 4 forums :) and you should use ext 3.4 in case you want to stick to the 3.x branch.

gfevrier
13 Dec 2011, 3:06 AM
i see 2 points that can cause trobule:


url : 'ajax/varimport_combos.php?combo=periodes',


the url is not meant to add params, so i am not sure if this works.
the correct approach is to add baseParams as a config to the store:


Ok, I corrected it, but it remains the same : there is no data loaded in the store (I see that the php file is called and returns data).




also, your json has different fields than the ones the store reads:


{name: 'Id_Per', mapping : 'Id'},
{name: 'DPer_Lib', mapping : 'Libelle'}


should fit better. there is no need to set mapping in case you map to the identical fields.


It's a copy/paste error, I corrected it, but it doesn't work anymore.



last tip: these are the ext 4 forums :) and you should use ext 3.4 in case you want to stick to the 3.x branch.

Oups... sorry... I was reading posts and I sent the message at the wrong place... (:|

tobiu
13 Dec 2011, 3:12 AM
you should also add:


"success": true


to your server response.

gfevrier
13 Dec 2011, 3:29 AM
Sorry, it doesn't change anything. :((

tobiu
13 Dec 2011, 3:36 AM
ok, the last point in this long list is hopefully:



displayField : 'Libelle',
valueField : 'Id',


which needs to get changed to the fieldnames of the store.

gfevrier
13 Dec 2011, 4:55 AM
In fact, I changed the fieldnames in the store to "Id" and "Libelle" for the same result.

But I think the problem is in the store, because when I put the following code after the store load, the result is 0.



console.log('%s%s', 'StoreCount = ', Ext.StoreMgr.get('periodeJsonStore').getCount());


It seems that there is no data in the store.

gfevrier
13 Dec 2011, 5:45 AM
Hello,

I found the solution ! :D

I don't know why, but if I define the combo box outside the fieldset, it works !


var comboPeriode = {
xtype : 'combo',
fieldLabel : 'Periode',
forceSelection: true,
displayField: 'Libelle',
store: periodeJsonStore
}

var zoneChamp1 = {
xtype: 'fieldset',
...
items: [
{
fieldLabel: 'Id',
name: 'Imp_Id',
readOnly: true,
},
comboPeriode,
...
]
};

Thank you very much for your help ! :)

Gilles