PDA

View Full Version : Moving to ExtJS3.0. Store not loading any data



sixkiller
5 May 2009, 10:18 AM
Hello everyone,

I'm trying to move my application to extjs-3 because I had few unresolved problems on the extjs-2 serie.
The rendering problems I had in the past (checkbox, radio) with the update to extjs-3 are gone.
But now one new more important problems is arise: I can not load any data with the Store. the load or exception listener does not fire at all. It does not work on Combos neither on Grid.
Whenever I switch back on the ext-2.2 it loads data perfectly.

Here is some code, I hope someone can help me in that


Ext.namespace('ggm.tournament');

ggm.tournament.ArchiveTournament = Ext.extend(Ext.Panel, {

// soft config (can be changed from outside)
id: 'main-panel',
cls : 'common-panel',
autoScroll: true,
border:false

,initComponent:function() {

var connection = new Ext.data.Connection({
url:'getOldTournamentList.do',
method:'POST'
});

var tournamentRecord = Ext.data.Record.create([
{name: 'idTournament'},
{name: 'state'},
{name: 'tournamentInformation.name'},
{name: 'tournamentInformation.kind.name'},
{name: 'tournamentInformation.numTables'},
{name: 'tournamentInformation.numPlayers'},
{name: 'tournamentInformation.bankAmount'},
{name: 'tournamentInformation.prize'},
{name: 'tournamentInformation.quota'},
{name: 'startDate', type: 'date', mapping: 'startDate.time', dateFormat: 'time'},
{name: 'endDate', type: 'date', mapping: 'endDate.time', dateFormat: 'time'}
]);

var reader = new Ext.data.JsonReader({
root: "data",
totalProperty: "results",
successProperty: "success",
id: "id"
}, tournamentRecord);

var dataStore = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy(connection),
reader: reader,
remoteSort: false,
autoLoad:false,
listeners: {
load: function(store, response){
alert('loaded');
},
loadexception: function(proxy, store, response, e) {
failureMsg(response.responseText)
}
},
sortInfo:{field: 'idTournament', direction: "DESC"}/*,
groupField:'kind'*/
});

dataStore.load({});

var grid = new Ext.grid.GridPanel({
//frame:true,
/*width: 800,
height: 450,*/
border: false,
collapsible: false,
animCollapse: false,
id:'gridPanel',
//title: 'Archived Tournaments',
//iconCls: 'icon-grid',
style: 'padding:0px;',
store: dataStore,
columns: [
{id:'name',header: "Tournament Name", width: 60, sortable: true, dataIndex: 'tournamentInformation.name'},
{header: "Prize", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'tournamentInformation.prize'},
{header: "Players", width: 20, sortable: true, dataIndex: 'tournamentInformation.numPlayers'},
{header: "Quote", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'tournamentInformation.quota'},
{header: "Kind", width: 20, sortable: true, dataIndex: 'tournamentInformation.kind.name'},
{header: "Start", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'startDate'},
{header: "End", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'endDate'}
],
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
});

var north = new Ext.Panel({
border: false,
layout: 'fit',
height: 300,
region: 'north',
items:grid
});

var center = new Ext.Panel({
border: false,
//layout: 'fit',
region: 'center',
items: new ggm.tournament.TournamentDetail({})
});

var doublePanel = new Ext.Panel({
id:'doublePanel',
layout: 'fit',
border: false,
items:[north,center]
});

// hard coded (cannot be changed from outside)
var config = {
//region: 'center',
title: 'Tournament Archive',
items:[doublePanel]
};

// apply config
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);

// call parent
ggm.tournament.ArchiveTournament.superclass.initComponent.apply(this, arguments);

// after parent code here, e.g. install event handlers

} // eo function initComponent

,onRender:function() {

// before parent code

// call parent
ggm.tournament.ArchiveTournament.superclass.onRender.apply(this, arguments);

// after parent code, e.g. install event handlers on rendered components

} // eo function onRender

// any other added/overrided methods
,initEvents: function() {
// call the superclass's initEvents implementation
ggm.tournament.ArchiveTournament.superclass.initEvents.call(this);

//var bookGridSm = this.getComponent('gridPanel').getSelectionModel();
var bookGridSm = Ext.getCmp('gridPanel').getSelectionModel();
bookGridSm.on('rowselect', this.onRowSelect, this);
}
,onRowSelect: function(sm, rowIdx, r) {
var detailPanel = Ext.getCmp('detailPanel');

var obj = new Array();
obj["idTournament"] = r.data.idTournament;
obj["name"] = r.json.tournamentInformation.name;
obj["startDate"] = r.data.startDate;
obj["endDate"] = r.data.endDate;
obj["quote"] = r.json.tournamentInformation.quota;
obj["prize"] = r.json.tournamentInformation.prize;
obj["kindName"] = r.json.tournamentInformation.kind.name;

//detailPanel.updateDetail(r.data);
detailPanel.updateDetail(obj);
}

}); // eo extend
Thanks in advance

5 May 2009, 10:27 AM
Why set autoLoad to false, then call load?

Why not just set autoLoad to true.

That said, what does your JSON look like? Have you verified that the request was made?

sixkiller
5 May 2009, 11:04 AM
the json looks like that:


{"results":1,"success":true,"errors":"","data":[{"creationDate":{"date":28,"day":2,"hours":23,"minutes":3,"month":3,"nanos":0,"seconds":48,"time":1240952628000,"timezoneOffset":-120,"year":109},"endDate":{"date":30,"day":4,"hours":3,"minutes":0,"month":3,"nanos":0,"seconds":0,"time":1241053200000,"timezoneOffset":-120,"year":109},"expiringDate":{"date":30,"day":4,"hours":4,"minutes":0,"month":3,"nanos":0,"seconds":0,"time":1241056800000,"timezoneOffset":-120,"year":109},"idTournament":53,"startDate":{"date":29,"day":3,"hours":2,"minutes":0,"month":3,"nanos":0,"seconds":0,"time":1240963200000,"timezoneOffset":-120,"year":109},"state":0,"tournamentInformation":{"bankAmount":100,"idTournament":53,"kind":{"id":2,"name":"No Limits"},"name":"EEEEE","numPlayers":7,"numTables":88,"prize":9,"quota":10}}]}
About the autoLoad, I have tried both (true and false). also I was trying with a line of code like that on the onRender method


Ext.StoreMgr.get('t_store').load();and as t_store was the storeId property of the store

all the same results. no Store loaded.

The weird thing is that it does happen in all the Panel that I have in my application (none of the stores are loading with extjs3)

5 May 2009, 11:09 AM
On a vanilla page, i got it to work with the latest build of Ext JS from SVN.

can you download 3.0 RC1.1 to test to see if this issue still exists?

sixkiller
5 May 2009, 11:11 AM
On a vanilla page, i got it to work with the latest build of Ext JS from SVN.

can you download 3.0 RC1.1 to test to see if this issue still exists?

The version that I'm using is the 3.0 RC1.1

Animal
5 May 2009, 12:24 PM
pointless wrapping of a Panel in a Panel:



var north = new Ext.Panel({
border: false,
layout: 'fit',
height: 300,
region: 'north',
items:grid
});


Done more than once.

sixkiller
5 May 2009, 12:40 PM
pointless wrapping of a Panel in a Panel:



var north = new Ext.Panel({
border: false,
layout: 'fit',
height: 300,
region: 'north',
items:grid
});
Done more than once.

I have changed that too, but nothing change. I'm going to try to load those pages on a vanilla page because my application uses the viewport, so it might be a reason.


Ext.namespace('ggm.tournament');

ggm.tournament.ArchiveTournament = Ext.extend(Ext.Panel, {

// soft config (can be changed from outside)
id: 'main-panel',
cls : 'common-panel',
autoScroll: true,
border:false

,initComponent:function() {

var connection = new Ext.data.Connection({
url:'getOldTournamentList.do',
method:'POST'
});

var tournamentRecord = Ext.data.Record.create([
{name: 'idTournament'},
{name: 'state'},
{name: 'tournamentInformation.name'},
{name: 'tournamentInformation.kind.name'},
{name: 'tournamentInformation.numTables'},
{name: 'tournamentInformation.numPlayers'},
{name: 'tournamentInformation.bankAmount'},
{name: 'tournamentInformation.prize'},
{name: 'tournamentInformation.quota'},
{name: 'startDate', type: 'date', mapping: 'startDate.time', dateFormat: 'time'},
{name: 'endDate', type: 'date', mapping: 'endDate.time', dateFormat: 'time'}
]);

var reader = new Ext.data.JsonReader({
root: "data",
totalProperty: "results",
successProperty: "success",
id: "idTournament"
}, tournamentRecord);

var dataStore = new Ext.data.GroupingStore({

proxy: new Ext.data.HttpProxy(connection),
reader: reader,
remoteSort: false,
autoLoad:false,
storeId: 't_store',
listeners: {
load: function(store, response){
alert('loaded');
},
loadexception: function(proxy, store, response, e) {
failureMsg(response.responseText)
}
},
single: true,
sortInfo:{field: 'idTournament', direction: "DESC"}/*,
groupField:'kind'*/
});

dataStore.load({});

var grid = new Ext.grid.GridPanel({
//frame:true,
/*width: 800,
height: 450,*/
height: 300,
border: false,
collapsible: false,
animCollapse: false,
layout: 'fit',
region: 'north',
id:'gridPanel',
//title: 'Archived Tournaments',
//iconCls: 'icon-grid',
style: 'padding:0px;',
store: dataStore,
columns: [
{id:'name',header: "Tournament Name", width: 60, sortable: true, dataIndex: 'tournamentInformation.name'},
{header: "Prize", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'tournamentInformation.prize'},
{header: "Players", width: 20, sortable: true, dataIndex: 'tournamentInformation.numPlayers'},
{header: "Quote", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'tournamentInformation.quota'},
{header: "Kind", width: 20, sortable: true, dataIndex: 'tournamentInformation.kind.name'},
{header: "Start", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'startDate'},
{header: "End", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'endDate'}
],
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
});

/*var north = new Ext.Panel({
border: false,
layout: 'fit',
height: 300,
region: 'north',
items:grid
});*/

var center = new Ext.Panel({
border: false,
//layout: 'fit',
region: 'center',
items: new ggm.tournament.TournamentDetail({})
});

var doublePanel = new Ext.Panel({
id:'doublePanel',
layout: 'fit',
border: false,
//items:[north,center]
items:[grid,center]
});

// hard coded (cannot be changed from outside)
var config = {
//region: 'center',
title: 'Tournament Archive',
items:[doublePanel]
};

// apply config
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);

// call parent
ggm.tournament.ArchiveTournament.superclass.initComponent.apply(this, arguments);

// after parent code here, e.g. install event handlers

} // eo function initComponent

,onRender:function() {

// before parent code

// call parent
ggm.tournament.ArchiveTournament.superclass.onRender.apply(this, arguments);

// after parent code, e.g. install event handlers on rendered components
Ext.StoreMgr.get('t_store').load();

} // eo function onRender

// any other added/overrided methods
,initEvents: function() {
// call the superclass's initEvents implementation
ggm.tournament.ArchiveTournament.superclass.initEvents.call(this);

// now add application specific events
// notice we use the selectionmodel's rowselect event rather
// than a click event from the grid to provide key navigation
// as well as mouse navigation
//var bookGridSm = this.getComponent('gridPanel').getSelectionModel();
var bookGridSm = Ext.getCmp('gridPanel').getSelectionModel();
bookGridSm.on('rowselect', this.onRowSelect, this);
}
// add a method called onRowSelect
// This matches the method signature as defined by the 'rowselect'
// event defined in Ext.grid.RowSelectionModel
,onRowSelect: function(sm, rowIdx, r) {
// getComponent will retrieve itemId's or id's. Note that itemId's
// are scoped locally to this instance of a component to avoid
// conflicts with the ComponentMgr
//var detailPanel = this.getComponent('detailPanel');
var detailPanel = Ext.getCmp('detailPanel');

var obj = new Array();
obj["idTournament"] = r.data.idTournament;
obj["name"] = r.json.tournamentInformation.name;
obj["startDate"] = r.data.startDate;
obj["endDate"] = r.data.endDate;
obj["quote"] = r.json.tournamentInformation.quota;
obj["prize"] = r.json.tournamentInformation.prize;
obj["kindName"] = r.json.tournamentInformation.kind.name;

//detailPanel.updateDetail(r.data);
detailPanel.updateDetail(obj);
}

}); // eo extend

Animal
5 May 2009, 12:43 PM
No, that was just a general comment on something to sort out.

Your Store has a problem. Don't know what it is, but you can use ext-all-debug.js, and step right through the load process. It's not that big.

heidtmare
5 May 2009, 1:38 PM
once i updated i noticed that my method:'POST' was being ignored and my load was being sent through get... its making my servlet very unhappy.

Maybe you have a similar issue?

sixkiller
5 May 2009, 2:02 PM
once i updated i noticed that my method:'POST' was being ignored and my load was being sent through get... its making my servlet very unhappy.

Maybe you have a similar issue?

I don't think so, the servlet is working just fine. The method called is the right one as well as the output returned as json.

sixkiller
5 May 2009, 2:07 PM
No, that was just a general comment on something to sort out.

Your Store has a problem. Don't know what it is, but you can use ext-all-debug.js, and step right through the load process. It's not that big.

I'm investigating the ext-all-debug.js... so far the only difference I could found between the extjs2 and extjs3 is that in the extjs3 after the method "load" the "loadRecord" method is never reached.
Instead in the extjs2 it enters into the method and the object "o" it looks like the record with the data.

In extjs3, after the load it reaches that code

line 11995
createCallback : function(action, rs) {
return (action == Ext.data.Api.READ) ? this.loadRecords : function(data, response, success) {


there (action == Ext.data.Api.READ) returns true... and it goes nowhere...

Animal
6 May 2009, 12:49 AM
Well that statement will return this.loadRecords as the callback, so keep following it until the Ajax request.

Then set a breakpoint in loadRecords, and then "GO". It should pop back up in loadRecords, and you can continue stepping to see how it reads the data block.

sixkiller
6 May 2009, 2:08 AM
Well that statement will return this.loadRecords as the callback, so keep following it until the Ajax request.

Then set a breakpoint in loadRecords, and then "GO". It should pop back up in loadRecords, and you can continue stepping to see how it reads the data block.

Yes, that is what I was doing. I set up a breakpoint in the first line of the loadRercords but it does not enter in that function.
When I try to go further from the createCallback point it goes back to my javascript file and even letting it going, the loadRecords function is not fired.

Animal
6 May 2009, 3:21 AM
Must be an Ajax failure? Does the Store fire a loadexception event?

sixkiller
6 May 2009, 4:18 AM
Must be an Ajax failure? Does the Store fire a loadexception event?

Neither the load nor the loadexception fires up.

mickh
7 May 2009, 9:19 PM
Hi sixkiller,
I'm not sure if this will be directly applicable to you, but I was seeing the same symptoms as you. I ended up fixing it by simplifying my code. It originally looked like:


var datastore = new Ext.data.Store(
{
proxy: new Ext.data.HttpProxy(
new Ext.data.Connection(
{
url: '/quotations.json',
method: 'GET'
}
)
),
reader: new Ext.data.JsonReader(
...
)
}
);


where I was creating the proxy and connection objects myself. That worked in 2.2, but not in 3.0.

I changed it to:



var datastore = new Ext.data.Store(
{
url: '/quotations.json',
reader: new Ext.data.JsonReader(
...
)
}
);


and it works for me now.

Like I said, I don't know if this will apply in your case, but I figured it can't hurt to mention it.

cheers,
mick

sixkiller
8 May 2009, 4:44 AM
Hi sixkiller,
I'm not sure if this will be directly applicable to you, but I was seeing the same symptoms as you. I ended up fixing it by simplifying my code. It originally looked like:


var datastore = new Ext.data.Store(
{
proxy: new Ext.data.HttpProxy(
new Ext.data.Connection(
{
url: '/quotations.json',
method: 'GET'
}
)
),
reader: new Ext.data.JsonReader(
...
)
}
);
where I was creating the proxy and connection objects myself. That worked in 2.2, but not in 3.0.

I changed it to:



var datastore = new Ext.data.Store(
{
url: '/quotations.json',
reader: new Ext.data.JsonReader(
...
)
}
);
and it works for me now.

Like I said, I don't know if this will apply in your case, but I figured it can't hurt to mention it.

cheers,
mick

Thanks mick!

I was trying your solution and it looks like it is working. Probably there is a bug in Ext.data.HttpProxy.

Animal
8 May 2009, 4:56 AM
Or not. There will be an HttpProxy instantiated there implicitly.

Animal
8 May 2009, 5:04 AM
I think it is a bug in HttpProxy when it's configured with an instanceof Ext.data.Connection...

aconran
8 May 2009, 9:02 AM
This *was* an issue due to a bug thats currently in SVN. Thanks for the report earlier Nige. It will be resolved shortly.

sixkiller
8 May 2009, 2:40 PM
I was doing some more "investigations" and it looks like with 3.0rc1 it works with HttpProxy and Connection, with rc1.1 I have to use the workaround of the url into the Store as suggested.

Animal
10 May 2009, 10:12 AM
Chris has fixed an issue where the HttpProxy was not setting the URL correctly when using it's own instance of Ext.data.Connection, as opposed to the Ajax singleton: http://extjs.com/forum/showthread.php?t=67922

pcrombach
12 May 2009, 10:04 AM
Hi there is another tread about store problems. http://extjs.com/forum/showthread.php?t=67635

There are problems with the POST/GET and with the start parameter.....