PDA

View Full Version : what is best way to populate subcategory in combo nested array json response in extjs



vijayakumar84
12 Apr 2013, 9:53 PM
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

slemmon
14 Apr 2013, 9:32 PM
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?

vijayakumar84
14 Apr 2013, 10:28 PM
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

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


}


]


}




}


}

slemmon
15 Apr 2013, 12:29 PM
Ok. How are you configuring your first combo and its store?

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

vijayakumar84
15 Apr 2013, 8:59 PM
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

slemmon
16 Apr 2013, 6:59 AM
How are you configuring your first combobox currently to use that JSON data? Can you share your code for that first combo?

vijayakumar84
18 Apr 2013, 1:04 AM
Using ajax type am parsing value and fill the data with displayField and valueField in combo

slemmon
18 Apr 2013, 2:21 PM
Can you share the code you've got for that first combobox using the JSON data for its store?

vijayakumar84
18 Apr 2013, 8:36 PM
Hi slemmon,
This is my store



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


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


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'

}



]});

slemmon
19 Apr 2013, 1:26 PM
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/ext-js-4/client-side-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.