PDA

View Full Version : Executing the Ext.data.Store Exampe from the Documentation results in a zero count



Preexo
26 Oct 2011, 10:02 AM
Hi,

today I was getting into the whole Store-thing. And to understand it a little better I tried to execute the Example from the documentation - following:


Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'age', type: 'int'},
{name: 'eyeColor', type: 'string'}
]
});


var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'data/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});

console.debug(myStore.getCount());


I my file in 'data/users.json' i have the following:



{ "users": [ { "id": 1, "name": "Ed", "orders": [ { "id": 10, "total": 10.76, "status": "invoiced" }, { "id": 11, "total": 13.45, "status": "shipped" } ] } ]}

But why does count say I got zero items in the store. Firebug sais that store got data(items).
But count sais zero and I also can't each them...

Pls help me...
Thanks in advance

Tim Toady
26 Oct 2011, 12:59 PM
I would guess that your console.log is happening before the store is actually loaded. Try putting a load listener on the store and do it in there.

Preexo
27 Oct 2011, 2:31 AM
thank you very very much, you were totaly right, when I do this:


myStore.load({
scope : this,
callback: function(records, operation, success) {
console.log(myStore.count());
}
});


it works perfectly fine...

can anyone tell me how I can integrate the onload function in the store-class itself. I tried something like this:



var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'data/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: false,
on:{
'load': {
callback: function(records, operation, success){
console.debug(this.count());
}
}
}
});



but it didn't wanna work...

Tim Toady
27 Oct 2011, 6:00 AM
There is a config property on the store ( as well as just about everything else ) called listeners. Use it like this


var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: false,
listeners: {
load: function (store, records, success) {
console.debug(this.count());
}
}
});


Also you can use on/addListener like this


myStore.on( 'load', function(){} );


There are examples of both in the docs

Preexo
27 Oct 2011, 7:33 AM
to be honest, the whole "event and listener"- thing isn't too much documentated.

Your example worked fine for me first, but then I tried to fire a custom-event like this:



this.fireEvent('ubahn');


and in my controller i added those lines:


listeners: {
'ubahn': function(){ console.log('here is my eventmessage'); }
},


but didn't work yet.
thanks in advance for more help!

Tim Toady
27 Oct 2011, 10:26 AM
oh, you are using the MVC? Here is a thread concerning defining store events in a controller.
http://www.sencha.com/forum/showthread.php?152360-MVC-store-listener&p=664645

I don't know if it is the best way. I have never used the MVC extensively. For actual components you would use the control function to define your events in the controller, like the render event below I pulled from the MVC guide.


Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',

init: function () {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},

onPanelRendered: function () {
console.log('The panel was rendered');
}
});

Preexo
30 Oct 2011, 12:42 AM
Hey,

thanks for all your help!

You're actually right, it doesn't make much sense to listen in the store to its own events. It's properly better to let the controller listen to the stores events.