Display a ComboBox with a Json

Hye,

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

I have this Json :

Code:

---

{"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 :

Code:

---

        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 :

PHP Code:

---

<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.

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 :

Code:

---

{"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

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

Thanks for help,

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

It would help if you used:

Code:

---

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'}
    ]
  })
});

---

Great, thank you.
It's working now.

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

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

Code:

---

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

---

Thank you.
I understand.

This code is working :

Code:

---

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

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

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.