PDA

View Full Version : hasMany Assosiation and grids



ivan133
11 Dec 2011, 9:33 PM
Hello! I want to use new ExtJs model association in me project.
I have 2 models:
Main model is project:


Ext.define('TEST.model.Project', {
extend: 'Ext.data.Model',
fields: [
{
name: 'domain',
type: 'string'
}, {
name: 'user',
type: 'string'
}, {
name: 'id',
type: 'int'
}
],
associations: [
{
type: 'hasMany',
name: 'projectHistory',
foreignKey: 'project',
model: 'TEST.model.ProjectHistory'
}
],
proxy: {
type: 'rest',
url: HANDLERS_URL + 'project/',
reader: {
type: 'json',
root: 'data'
},
writer: {
writeAllFields: false
}
}
});

It has association to ProjectHistory model:


Ext.define('TEST.model.CrmProjectHistory', {
extend: 'Ext.data.Model',
fields: [
{
name: 'project_id',
type: 'int'
}, {
name: 'type',
type: 'string'
}, {
name: 'id',
type: 'int'
}, {
name: 'timestamp',
type: 'string'
},{
name: 'text',
type: 'string'
}
],
proxy: {
type: 'rest',
url: HANDLERS_URL + 'project_history/',
reader: {
type: 'json',
root: 'data',
totalProperty : 'total',
successProperty: 'success'
},
writer: {
writeAllFields: false
}
}
});

I don't want nested JSON. I want to load data asynchronously.
I've make 2 grids one for projects (works fine) and another for project history.
Here is the code:


Ext.define('TEST.view.ProjectHistoryPanel', {
extend: 'Ext.grid.Panel',
title: 'History',
store: 'TEST.store.ProjectHistory',
alias: 'widget.projectHistoryPanel',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
bbar: Ext.create('Ext.PagingToolbar', {
store: me.getStore(),
displayInfo: true,
}),
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'type',
text: 'type',
flex: 1
},
{
xtype: 'gridcolumn',
dataIndex: 'text',
text: 'text',
flex: 5
}
,
{
xtype: 'datecolumn',
dataIndex: 'timestamp',
text: 'timestamp',
flex: 1
}
]
});

me.callParent(arguments);

var history = me.project.projectHistory();
history.load();
me.store = Ext.data.StoreManager.lookup(history);
me.viev = null;
view = me.getView();

console.log(history.proxy.data);//No data
console.log(history.proxy.reader); //rawData presents
me.getView().refresh();
// history.on('load', function (store, records, success){
// if (success){
// me.bindStore(store);
//// me.reconfigure(store);
// }
// });
// history.load();


// console.log('history.filters');
// console.log(history);
//// me.store.filters = history.filters;
// me.store.loadRecords(history.getRange(0,history.getCount()),{addRecords: false});
// me.store.load();
// me.store.loadRecords(me.store.getRange(0,me.store.getCount()),{addRecords: false});
}
});

I've tryed all the commented methods I've found here and on stackoverflow, with no luck.

The problem is the new grid doesn't want to load this store.
Even if it loads it (I can see this with FireBug) the grid is empty.
I've studied all the documentation and even source code, but no pogress here.

I want to do something like this
What am I doing wrong?

ivan133
11 Dec 2011, 10:04 PM
I've manage to do it myself just now.
A have to added storeConfig

storeConfig: {
autoLoad: true,
remoteFilter: true
}
And move up store assignment before applyIf

börn
27 Jan 2012, 6:25 AM
Thank you so much! You made my day ;)...

to be more precise you have only to configure
remoteFilter: true ... besides i suppose this is a bug... because, if i configured a model with associations and don't want the nested json (which works also for the stores until you first call load() on one of them) i don't want a local filter destroying my items in the store ;) ... i also see the filter on the GET requests - so i don't think this is correct behaviour.