Display a ComboBox with a Json

[Manoush]

Hye,

I'm a new user of extjs, and I've got an issue.

I have this Json :

{"total":"5", "corporates":[{"cop_id":"2","cop_name":"burode"},{"cop_id":"3","cop_name":"tag"},{"cop_id":"1","cop_name":"tagattitude"},{"cop_id":"4","cop_name":"test"},{"cop_id":"5","cop_name":"test2"}]}

I'm trying to display this in this comboBox using a Ext.data.Store and a Ext.data.JsonReader like this :

        var ds = new Ext.data.Store({
		reader: new Ext.data.JsonReader({
			root: 'corporates'
			, totalProperty: 'total'
		}, [{name:'cop_id'}, {name:'cop_name'}])
	});
		
	var comboBox = new Ext.form.ComboBox({
		store: ds,
		mode: 'local',
		valueField: 'cop_id',
		displayField: 'cop_name',
		applyTo: 'corporateList'
	});

corporateList is here in my php file :

<div>
    <input type="text" id="corporateList" size="20"/>
</div> 

The matter is that nothing is inside my ComboBox....

Is there someone to help me on this ?

Thanks a lot.

[GobbaF]

Hi,
I've the same problem that yours but I used JsonStore in place of JsonReader.

Here is my JSON response from get-thema.php :

{"thema":[{"id":1,"name":"Foret"},{"id":2,"name":"Emploi"}]}

I'm trying to display this JSON in a combobox :
[CODE]var themaList = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: './get_thema.php'}),
autoLoad: true,
reader: new Ext.data.JsonStore({
root: 'thema',
fields: [
{name: 'id'},
{name: 'name'}
]
})
});

var combo = new Ext.form.ComboBox({
fieldLabel: 'Organisme',
store: themaList,
displayField: 'name',
valueField: 'id',
forceSelection: true,
editable: false,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
emptyText: 'S

[Condor]

You need to load the store yourself if you set mode:'local'.

[GobbaF]

Thanks for help,

autoLoad option is not the same that myStore.load() method ?
With the two configurations, my combobox is empty.

[Condor]

It would help if you used:

var themaList = new Ext.data.Store({
  proxy: new Ext.data.HttpProxy({url: 'test2.json'}),
  autoLoad: true,
  reader: new Ext.data.JsonReader({
    root: 'thema',
    fields: [
	  {name: 'id'},
	  {name: 'name'}
    ]
  })
});

[GobbaF]

Great, thank you.
It's working now.

But I think I don't understand the difference between JsonReader and JsonStore.

[Condor]

JsonStore is a simple descendant of Store that creates a HttpProxy and a JsonReader internally, e.g.

var themaList = new Ext.data.JsonStore({
  url: 'test2.json',
  autoLoad: true,
  root: 'thema',
  fields: [
    {name: 'id'},
    {name: 'name'}
  ]
});

[GobbaF]

Thank you.
I understand.

This code is working :

var themaList = new Ext.data.JsonStore({
  url: './get_thema.php',
  root: 'thema',
  fields: [
    {name: 'id'},
    {name: 'name'}
  ]
});

and in my combobox I put this option "modal: 'remote'"

Fabien

[kowsalya]

Hi,
I have a problem similar to the one given above except the json structure.
For example My JSON is:
{"thema":[{"id":1,"name":"Foret","address":[{"street":"aaa",doorno":"1"},
{street":"bbb",doorno":"2"},{street":"ccc",doorno":"3"}]}]
}

I would like to display the address.doorno in a combo box. Can you pls help me in resolving this

[Condor]

This is hierarchical data. It can't be processed by a store.

You could make a JsonReader descendant and override the readRecords method to load the data and 'flatten' it.

Or you could use TreeSelector (ext-2.0.2/air/samples/tasks/js/TreeSelector.js) instead of a ComboBox and make a TreeLoader descendant that can read your data in a tree.