PDA

View Full Version : Grid - root node from JSON != store root



Rotzlucky
22 Mar 2012, 8:25 AM
Hello everybody!

I'm actually a Flex-Developer and totally new to Javascript.

We're currently evaluating if ExtJS could be an alternativ for our company and therefore I'm tryin to map some simple workcases from our Flex-projects.

I get a JSON from the server that is similar to this


{ "success":true,
"report":[{
"id":2,
"rows":[{
"id": 123,
"date":"12.02.2012",
"3lc":"PMI",
}, {
"id":4,
"date":"13.02.2012",
"3lc":"FUE",
}]
}]
}

Each element of the rows array should be a row in the grid.
I created two models. 1 called Report and 1 called Row.



Ext.define('RYM.model.Report', {
extend: 'Ext.data.Model',

fields: [{name: 'id', type: 'int'}],


hasMany : {model: 'RYM.model.Row', name: 'rows', associationKey: 'rows'}
});



Ext.define('RYM.model.Row', {
extend: 'Ext.data.Model',

fields: [
{name: 'id', type: 'int'},
{name: 'date', type: 'string'},
{name: '3lc', type: 'string'}
],


belongsTo: 'Report'
});


I have a store for the report-model which I load in my controller like this:


Ext.define('RYM.controller.ReportController', { extend: 'Ext.app.Controller',

stores: ['Reports'],
models: ['Report', 'Row'],

views: ['ReportGrid'],

init: function(){
console.log('Initialized Controller!');

var store = this.getReportsStore();

store.setRootNode(
{
text: 'report',
leaf: true,
expanded: false
});

store.load();
}


});

But how do I tell this Grid...

Ext.define('RYM.view.ReportGrid', { extend: 'Ext.tree.Panel',
alias: 'widget.reportgrid',

title: 'Report Grid',

rootVisible: false,

initComponent: function()
{
this.columns = [{
text: 'Airport',
dataIndex: '3lc'
}];

this.callParent(arguments);
}
});

...to use the rows as datasource?

Thanks in advance,
Marcel


P.S. This is a minimal example of what I'm tryin to do. Rows will actually have rows of their own, therefore the tree.Panel.

mankz
22 Mar 2012, 1:21 PM
Try


Ext.define('RYM.view.ReportGrid', { extend: 'Ext.tree.Panel',
alias: 'widget.reportgrid',

title: 'Report Grid',
store : 'Reports',
rootVisible: false,

initComponent: function()
{
this.columns = [{
text: 'Airport',
xtype : 'treecolumn', // MUST HAVE ONE OF THESE TOO
dataIndex: '3lc'
}];

this.callParent(arguments);
}
});

Rotzlucky
23 Mar 2012, 12:26 AM
Hello mankz and thanks for your input.

I tried your code, but unfortunately the grid is still empty.

I'm pretty sure that I tried this earlier. I have the feeling that it is not right to set the store for the grid to 'Reports'. Maybe I need another store 'Rows' or set the root of the store to the rows array. I don't know, I tried so many variations in the last days, but I can't figure it out.
Any other suggestion is appreciated.


For the sake of completeness here is my store which I forgot last time.


Ext.define('RYM.store.Reports', {
extend: 'Ext.data.TreeStore',
model: 'RYM.model.Report',
autoLoad: false,

proxy:
{
type: 'ajax',
url: 'data/data.json',

reader: {
type: 'json',
root: 'report'
}
}
});