PDA

View Full Version : autoLoad grid promlem via CRUDs api's



Skay
8 Jul 2010, 4:40 AM
I set API's:


{
read : '/schedule/get_list',
update : '/schedule/update',
create : '/schedule/create',
destroy: '/schedule/delete'
}

it works perfect if i use load() method from grid store, but autoLoad doesnt work. It gets data from the server, but doesnt want to render it to the grid. And column model replace with crazy load mask (see pic). My store configured with store:


{
xtype : 'jsonstore',
autoLoad : true,
autoSave : false,
root : 'records',
fields : [...],
proxy : new Ext.data.HttpProxy({
api: {
read : '/schedule/get_list',
update : '/schedule/update',
create : '/schedule/create',
destroy: '/schedule/delete'
}
})
listeners : {...}
}
}


Any suggestion?

And what is difference between 'load' and 'read' properties in api's object?


PS. First screenshot shows how it looks like when using autoLoad, second one - when using load() method manually.

Animal
8 Jul 2010, 4:54 AM
Use an exception event handler.

Skay
8 Jul 2010, 5:11 AM
Actually i'm using it... in my store it looks like:


exception : function(proxy, type, action, o, r){
console.log('exception');
switch (type) {
case 'response':
SExt.Base.internalError();
break;
case 'remote':
SExt.Base.internalError(r.raw.msg);
}
}


but there is no exception happened in my case. And I have no any idea from where load mask like on the first screenshot... load mask should looks like this:
http://support.mweb.ru/load_mask.png

Condor
8 Jul 2010, 5:13 AM
Are you using grid.load() instead of grid.getStore().load()?

Skay
8 Jul 2010, 5:14 AM
Animal, what is difference between load and read properties in api?

Skay
8 Jul 2010, 5:16 AM
Condor, if i use grid.getStore().load() everything is okey. I want autoLoad it. So, i set autoLoad: true in my store configuration and have a problem like on my screenshots.. ^_^
So, it should call load() method and it calls it, but data doesnt render to the grid, instead we can see strange load mask O_o

Condor
8 Jul 2010, 5:23 AM
1. There is no 'load' in the Api (that was a documentation error).
2. Are you sure you set autoLoad:true on the store and not on the grid?

Animal
8 Jul 2010, 5:34 AM
Oh, something is coming back to me about autoLoad and using an api CRUD config.

I forget what it is, but I seem to remember hitting this in a project I did.

I will have to look it up when I get home tonight.

Skay
8 Jul 2010, 9:13 AM
I forget what it is, but I seem to remember hitting this in a project I did.

I will have to look it up when I get home tonight.

appreciate your help. Keep waiting...

Animal
8 Jul 2010, 9:18 AM
Here's the override we use, and the Stores are configured with an api and autoload: true



Ext.override(Ext.data.Store, {
execute : function(action, rs, options, /* private */ batch) {
// blow up if action not Ext.data.CREATE, READ, UPDATE, DESTROY
if (!Ext.data.Api.isAction(action)) {
throw new Ext.data.Api.Error('execute', action);
}
// make sure options has a fresh, new params hash *based on the api definition*
if (!options) options = {};
var p = this.api && this.api[action] ? Ext.apply({}, this.api[action].params, options.params) : options.params||{};
options = Ext.apply(options||{}, {
params: p
});
if(batch !== undefined){
this.addToBatch(batch);
}
// have to separate before-events since load has a different signature than create,destroy and save events since load does not
// include the rs (record resultset) parameter. Capture return values from the beforeaction into doRequest flag.
var doRequest = true;

if (action === 'read') {
doRequest = this.fireEvent('beforeload', this, options);
Ext.applyIf(options.params, this.baseParams);
}
else {
// if Writer is configured as listful, force single-record rs to be [{}] instead of {}
// TODO Move listful rendering into DataWriter where the @cfg is defined. Should be easy now.
if (this.writer.listful === true && this.restful !== true) {
rs = (Ext.isArray(rs)) ? rs : [rs];
}
// if rs has just a single record, shift it off so that Writer writes data as '{}' rather than '[{}]'
else if (Ext.isArray(rs) && rs.length == 1) {
rs = rs.shift();
}
// Write the action to options.params
if ((doRequest = this.fireEvent('beforewrite', this, action, rs, options)) !== false) {
this.writer.apply(options.params, this.baseParams, action, rs);
}
}
if (doRequest !== false) {
// Send request to proxy.
if (this.writer && this.proxy.url && !this.proxy.restful && !Ext.data.Api.hasUniqueUrl(this.proxy, action)) {
options.params.xaction = action; // <-- really old, probably unnecessary.
}
// Note: Up until this point we've been dealing with 'action' as a key from Ext.data.Api.actions.
// We'll flip it now and send the value into DataProxy#request, since it's the value which maps to
// the user's configured DataProxy#api
// TODO Refactor all Proxies to accept an instance of Ext.data.Request (not yet defined) instead of this looooooong list
// of params. This method is an artifact from Ext2.
this.proxy.request(Ext.data.Api.actions[action], rs, options.params, this.reader, this.createCallback(action, rs, batch), this, options);
}
return doRequest;
}
});

Skay
8 Jul 2010, 11:32 PM
Animal, doesnt work your hit... maybe because extjs version... And we have some grids with autoLoad: true and some with autoLoad: false on the same page.

I temporarily fix this with listener:


listeners : {
render: function(){
this.getStore().load();
}
},


Anyway, i guess it's a bug in extjs.. maybe report aboit it?

Animal
8 Jul 2010, 11:49 PM
What version are you using :-/

Skay
8 Jul 2010, 11:51 PM
What version are you using :-/

i've tried your fix on extjs 3.2.0

Animal
9 Jul 2010, 12:05 AM
That's odd. I've used Stores configured with an api config with autoLoad: true

You'll have to step through the load method. Set a breakpoint in there, and follow it all the way through, checking what URl amd params are set, and what HTTP method is selected, and follow it all the way into the Ajax request.

Not forgetting to set a breakpoint in the callback which regains control, which is created at




createCallback : function(action, rs, batch) {
var actions = Ext.data.Api.actions;
return (action == 'read') ? this.loadRecords : function(data, response, success) {
// calls: onCreateRecords | onUpdateRecords | onDestroyRecords
this['on' + Ext.util.Format.capitalize(action) + 'Records'](success, rs, [].concat(data)); // <-- set BP here
// If success === false here, exception will have been called in DataProxy
if (success === true) {
this.fireEvent('write', this, action, data, response, rs);
}
this.removeFromBatch(batch, action, data);
};
},

Condor
9 Jul 2010, 12:10 AM
Are you absolutely 100% sure that you didn't specify autoLoad:true in the GridPanel config instead of the store?

Your screenshot is clearly of a loading Panel body and not of a loading GridView!

Skay
9 Jul 2010, 12:23 AM
Are you absolutely 100% sure that you didn't specify autoLoad:true in the GridPanel config instead of the store?

Your screenshot is clearly of a loading Panel body and not of a loading GridView!

yeap, i'm sure. See my first post with store configuration.