1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    93
    Vote Rating
    0
    vijayakumar84 is on a distinguished road

      0  

    Default Unanswered: what is best way to populate subcategory in combo nested array json response in extjs

    Unanswered: what is best way to populate subcategory in combo nested array json response in extjs


    Hi
    In my application have two combo one for category and subcategory.I have json response.In that json response category node is array value and sub category node is array value .In combo box user select the category the corresponding sub category need to fill in combo fr0m json response.can anybody tell what is best way to implement it


    Thanks

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,993
    Vote Rating
    212
    Answers
    476
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    When you populate the store for the first combobox are you receiving the data for both comboboxes in the same JSON response? Or in the response for the first combobox's store's load is only the data for that combobox in the JSON response?

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    93
    Vote Rating
    0
    vijayakumar84 is on a distinguished road

      0  

    Default


    This is my sample response like this format only am getting parent and child are array value depend upon the parent value need to fill the corresponding child value.In that json response user select parentName tag value firstname in first combo need to display in second combo childId tag 1
    Code:
    {
            "parents":{
             "parent1":{
               "parent":[
                 {
                     "children":{
                         "child":[
                          {
                              "childId":1,
                              "childdetails": {
                      "childrendetails": [
                        {
                          "childName": "Test",
                          "childAge": "19"
                        },
                        {
                          "childName": "Test1",
                          "childAge": "20"
                        }
                      ]
                    }
    
    
                      },
                          {
                              "childId":2,
                               "childdetails": {
                      "childrendetails": [
                        {
                          "childName": "Test2",
                          "childAge": "25"
                        },
                        {
                          "childName": "Test3",
                          "childAge": "24"
                        }
                      ]
                    } 
    
    
    
    
                          }
                       ]
                    }
                 },
                 {
                "children":{
                       "child":[
                          {
                             "childId":3,
                             "childdetails": {
                      "childrendetails": [
                        {
                          "childName": "Test4",
                          "childAge": "25"
                        },
                        {
                          "childName": "test5",
                          "childAge": "21"
                        }
                      ]
                    }
    
    
    
    
                          },
                          {
                             "childId":4,
                              "childdetails": {
                      "childrendetails": [
                        {
                          "childName": "Test6",
                          "childAge": "26"
                        },
                        {
                          "childName": "test7",
                          "childAge": "27"
                        }
                      ]
                    }
                         }
    
    
    
    
    
    
    
    
                       ]
                    },
    
    
    
    
                   "parentName":"firstName",
                   "parentAge":"28"
    
    
                 },
    
    
    
    
                 {
                     "children":{
                         "child":[
                          {
                              "childId":5,
                              "childdetails": {
                      "childrendetails": [
                        {
                          "childName": "Test8",
                          "childAge": "24"
                        },
                        {
                          "childName": "Test9",
                          "childAges": "27"
                        }
                      ]
                    }
    
    
    
    
                          },
                          {
                              "childId":6,
                               "childdetails": {
                      "childrendetails": [
                        {
                          "childName": "Test10",
                          "childAge": "25"
                        },
                        {
                          "childName": "Test11",
                          "childAge": "24"
                        }
                      ]
                    } 
    
    
    
    
                          }
                       ]
                    }
                 },
                 {
                    "children":{
                       "child":[
                          {
                             "childId":7,
                             "childdetails": {
                      "childrendetails": [
                        {
                          "childName": "Test12",
                          "childAge": "25"
                        },
                        {
                          "childName": "Test13",
                          "childAge": "21"
                        }
                      ]
                    }
    
    
    
    
                          },
                          {
                             "childId":8,
                              "childdetails": {
                      "childrendetails": [
                        {
                          "childName": "Test14",
                          "childAge": "26"
                        },
                        {
                          "childName": "Test15",
                          "childAge": "27"
                        }
                      ]
                    }
                         }
    
    
    
    
                    ]
                    },
    
    
    
    
                   "parentName":"secondname",
                   "parentAge":"35"
    
    
                 }
    
    
                ]
    
    
           }
    
    
    
    
        }
    
    
        }

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,993
    Vote Rating
    212
    Answers
    476
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Ok. How are you configuring your first combo and its store?

    Also, how are you configuring your second combo and its store?

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Posts
    93
    Vote Rating
    0
    vijayakumar84 is on a distinguished road

      0  

    Default


    Hi slemmon,
    I am setting the root value parents.parent1.parent to fill the first combo.I don't know how to get childId value
    from the response.I don't have familiar with mapping.can you tell how to get the corresponding value from child node

  6. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,993
    Vote Rating
    212
    Answers
    476
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    How are you configuring your first combobox currently to use that JSON data? Can you share your code for that first combo?

  7. #7
    Sencha User
    Join Date
    Feb 2013
    Posts
    93
    Vote Rating
    0
    vijayakumar84 is on a distinguished road

      0  

    Default


    Using ajax type am parsing value and fill the data with displayField and valueField in combo

  8. #8
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,993
    Vote Rating
    212
    Answers
    476
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Can you share the code you've got for that first combobox using the JSON data for its store?

  9. #9
    Sencha User
    Join Date
    Feb 2013
    Posts
    93
    Vote Rating
    0
    vijayakumar84 is on a distinguished road

      0  

    Default


    Hi slemmon,
    This is my store


    Code:
    Ext.define('NestedJsonTest.store.TestJsonStore', {
        extend : 'Ext.data.Store',
        storeId : 'testjsonstore',
        model : 'NestedJsonTest.model.TestJsonModel',
        autoLoad : 'true',
        proxy : {
            type : 'ajax',
            url : 'test.json',
            reader : {
                type  : 'json',
                root  :'parents.parent1.parent'        
            }
        }
    
    
    });
    This is my model

    Code:
    Ext.define('NestedJsonTest.model.TestJsonModel', {
        extend : 'Ext.data.Model',
        fields: [
            'parentName', 'parentAge','childId'
        ],
    
    
    
    
    associations: [{
            type: 'hasMany',
            model: 'NestedJsonTest.model.TestJsonModel',
              autoLoad: true,
            associationKey: 'child' 
        }, {
            type: 'belongsTo',
            model: 'NestedJsonTest.model.TestJsonModel',
            associationKey: 'parent' 
        }]
        
        
        
    });
    Ext.onReady(function(){
    
    
        TestJsonModel.load(10, {
            success: function(group){
                console.log(group.getTestJsonModel().get('parentName'));
                console.log(group.getTestJsonModel().get('parentAge'));
    
    
                group.parent().each(function(rec){
                    console.log(rec.get('childId'));
                });
            }
        });
    This is my View
    Code:
    Ext.define('NestedJsonTest.view.TestJsonView', {
        extend : 'Ext.panel.Panel',
        alias: 'widget.testjsonview',
        
        items : [
                    {
                        xtype : 'combo',
                        store :  Ext.create('NestedJsonTest.store.TestJsonStore'),
                         minWidth : 50,
                          minHeight : 30,
                        displayField : 'parentName',
                        valueField : 'parentAge'
                                                            
                      }, 
                      
             
                     {
                     xtype : 'combo',
                     store : Ext.create('NestedJsonTest.store.TestJsonStore'),
                      minWidth : 50,
                       minHeight : 30,
                     displayField : 'childId',
                    valueField : 'childId'
                                                            
                      }
                      
                      
        
    ]});

  10. #10
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,993
    Vote Rating
    212
    Answers
    476
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    You'll need to define two different models - one for parent and one for children. The data loaded to the store using the parent model will be nested and will automatically load the associated models for its children if set up correctly.
    You might check out this blog post for an example setup:
    http://mitchellsimoens.com/2013/03/e...-associations/

    Let's get both the parent and child models defined and a store to use the parent model along with your nested data before we move on to how the comboboxes will make best use of the data once loaded and a selection made.

Thread Participants: 1

Tags for this Thread