Unable to load tree with child data Dynamically..!!

[himanshu24]

Problem : >:)
I have a tree of objects called POS(as main nodes) and Expansion of them i have different objects(MIDS). POS tree is getting displayed but when i expand it (MID) node specific children are not coming(MIDs or children shold only load on click of the nodes):~o)
I have attached screen shot below(current status):


var loadedMid = false;
//-----------------***Start Models***------------------------
Ext.define('mid', { //----***child of model (pos) defined below***
extend : 'Ext.data.Model',
fields : [ {
name : 'midId',
type : 'int'
}],
});

Ext.define('pos', { //---------***parent of mid defined above***----------
extend : 'Ext.data.Model',
fields : [ {
name : 'posId',
type : 'int'
},{
name : 'posNumber',
type : 'string'
}, {
name : 'checked',
type : 'checkBox',
defaultValue: false,
}, {
name : 'iconCls',
type : 'string',
defaultValue : 'treenode-no-icon'
}],
hasMany : [ {
name : 'mid',
model : 'mid',
associationKey : 'mid'
} ],
proxy : {
type : 'ajax',
url : 'loadPOSTree.htm?zoneId='+${zoneId},

reader : {
type : 'json',
root : 'posList'
}
},}
);
//-----------------***End Models***------------------------
var loaded =false;

var posTreeStore = Ext.create('Ext.data.TreeStore', { //------***Load Parent store***----------
model : 'pos',
autoLoad : false,
root : {
expanded : true,
iconCls : 'no-icon'
} ,initComponent: function() { //------***Load only parent nodes(POS)***-----------
this.posTreeStore = Ext.data.StoreManager.lookup(this.posTreeStore);
this.posTreeStore.getProxy().url = 'loadPOSTree.htm?zoneId='+${zoneId}; // <-- init loading
this.posTreeStore.load();
loaded = true;
this.callParent(arguments);
},

listeners : {//-------------------------***Load Child(Mid) on click of + sign***----------
beforeload : function(posTreeStore,operation, options){
if(operation.node !=posTreeStore.getRootNode()){
posTreeStore.getProxy().url = 'loadPOSMIDTree.htm?posNumber='+operation.node.get('posNumber');
posTreeStore.getProxy().reader
loadedMid = true;

}
}
}
});

// ----------***POS - Mid Tree***------------------//

posTree = Ext
.create(
'Ext.tree.Panel',
{
width : 700,
height : 500,
title : '<spring:message code="label.posTree" />',
store : posTreeStore,
columnLines: true,
frame: true,
iconCls: 'no-icon',
renderTo : 'pos-tree-div',
header : true,
rootVisible:false,
columns : [{
xtype : 'treecolumn',
menuDisabled : true,
flex : 1,
sortable : false,
id : 'posNumber',
dataIndex : 'posNumber',
renderer : function(value,
metaData, record, row,
col, posTreeStore, gridView) {
return 'POS'+record.get('posNumber')
}

},{
id : 'posId',
menuDisabled : true,
flex : 1,
sortable : false,
hidden: true,
dataIndex : 'posId'
}],
tools : [
{
icon : 'images/exportPdf.png',
xtype : 'button',
text : '<spring:message code="label.exportPdf"/>',
handler : function(event,
toolEl, panel) {
document.getElementById('zoneIdHidden').value = '${zoneId}';
Ext.get('exportPOSPDFForm').dom.submit();
},
},
{
icon : 'images/exportXls.png',
xtype : 'button',
text : '<spring:message code="label.exportCsv"/>',
handler : function(event,
toolEl, panel) {
document.getElementById('zoneIdhide').value = '${zoneId}';
Ext.get('exportPOSCSVForm').dom.submit();
}
}, ],
listeners : {
checkChange : function() {
toggleButton();
}
}
});
});



1)Data: for url POS parent:


[{"posId":507,"posNumber":"1212454-455445","zone":{"zoneId":91,"name":"3Level","levelInfo":{"levelInfoId":3,"name":"L3","level":3},"parentZoneId":87,"currency":"AFN","checked":false}},{"posId":905,"posNumber":"12345678-12345678","zone":{"zoneId":91,"name":"3Level","levelInfo":{"levelInfoId":3,"name":"L3","level":3},"parentZoneId":87,"currency":"AFN","checked":false}},{"posId":1249,"posNumber":"1212454-455445","zone":{"zoneId":91,"name":"3Level","levelInfo":{"levelInfoId":3,"name":"L3","level":3},"parentZoneId":87,"currency":"AFN","checked":false}}]

2)Data to load Childs(MID) on click of 1st node
{"posList":[{"midId":571,"application":{"id":1,"name":"EM"}}]}

Goal :on click of POS its child MIDs shold be displayed:-/

39331

[kevin.chen]

when you expand a tree node, Ext does not load returned data into associated model, Ext expects the returned data match the data model associated with TreeStore.

back to your case, after expand tree node, Ext convert returned data into 'pos' model instead of 'mid' model, then insert the new record into TreeStore instead of associated model store.