1. #1
    Ext User
    Join Date
    Feb 2008
    Posts
    2
    Vote Rating
    0
    Manoush is on a distinguished road

      0  

    Default Display a ComboBox with a Json

    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.

  2. #2
    Ext User
    Join Date
    Jan 2008
    Location
    Foix - Toulouse -- France
    Posts
    52
    Vote Rating
    0
    GobbaF is on a distinguished road

      0  

    Default


    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

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  4. #4
    Ext User
    Join Date
    Jan 2008
    Location
    Foix - Toulouse -- France
    Posts
    52
    Vote Rating
    0
    GobbaF is on a distinguished road

      0  

    Default


    Thanks for help,

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

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  6. #6
    Ext User
    Join Date
    Jan 2008
    Location
    Foix - Toulouse -- France
    Posts
    52
    Vote Rating
    0
    GobbaF is on a distinguished road

      0  

    Default


    Great, thank you.
    It's working now.

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

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  8. #8
    Ext User
    Join Date
    Jan 2008
    Location
    Foix - Toulouse -- France
    Posts
    52
    Vote Rating
    0
    GobbaF is on a distinguished road

      0  

    Default


    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

  9. #9
    Ext User
    Join Date
    Mar 2008
    Posts
    5
    Vote Rating
    0
    kowsalya is on a distinguished road

      0  

    Default combo box using JSON

    combo box using JSON


    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

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.