PDA

View Full Version : Trying to convert infinte scrolling example for my purposes



ironandsteel
30 Jan 2012, 9:45 AM
I'm having a real hard time transitioning from 4.0.7 to 4.1 beta 1 or 2. I have an app that totally works in 4.0.7 BUT- sometimes the scroller misbehaves. I read that the virtual scrolling is a known problem in 4.0.7, so I've been trying to transition to 4.1.

I am going back to square 1, and trying to convert the latest infinite scrolling example to use my database and php script. Basically, the grid draws, but no data gets pulled in, and I never see the ajax call to my script that retrieves data. I'm having a hard time tracing through the code and tracking the problem down.

Here is the entire code, which is the modified infinte scrolling example. See anything obviously wrong?


Ext.Loader.setConfig({enabled: true});


Ext.Loader.setPath('Ext.ux', '../ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.PagingScroller'
]);


Ext.onReady(function(){
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'contId','catcode', 'name', 'addr'

// , {
// name: 'replycount',
// type: 'int'
// }, {
// name: 'lastpost',
// mapping: 'lastpost',
// type: 'date',
// dateFormat: 'timestamp'
// },
// 'lastposter', 'excerpt', 'threadid'
],
idProperty: 'contId'
});


// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'ForumThread',
remoteSort: false,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'jsonp',
//url: 'http://www.sencha.com/forum/remote_topics/index.php',
url: '../scripts/getContListChunk.php',
reader: {
root: 'data',
totalProperty: 'total'
},
// sends single sort as multi parameter
simpleSortMode: true
},
sorters: [{
property: 'name',
direction: 'DESC'
}]
});




var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'ExtJS.com - Browse Forums',
store: store,
loadMask: true,
selModel: {
pruneRemoved: false
},
multiSelect: true,
viewConfig: {
trackOver: false
},
// grid columns
columns:[{
xtype: 'rownumberer',
width: 50,
sortable: false
}
,{
id: 'contidID',
text: "ID",
dataIndex: 'contId',
flex: 1,
hidden: false,
sortable: true
}
,{
id: 'catcodeID',
text: "Catcode",
dataIndex: 'catcode',
flex: 1,
hidden: false,
sortable: true
}
,{
id: 'nameID',
text: "Name",
dataIndex: 'name',
flex: 1,
hidden: false,
sortable: true
}
,{
id: 'addrID',
text: "Addr",
dataIndex: 'addr',
flex: 1,
hidden: true,
sortable: true
}


],
renderTo: Ext.getBody()
});


// Load a maximum of 100 records into the prefetch buffer (which is NOT mapped to the UI)
// When that has completed, instruct the Store to load the first page from prefetch into the live, mapped record cache



//I tried calling prefetch here as well as simply calling guaranteeRange directly. Still no ajax call results.
store.prefetch({
start: 0,
limit: 99,
callback: function() {
store.guaranteeRange(0, 49);
}
});
});

mitchellsimoens
30 Jan 2012, 11:06 AM
Is there an exception in the store reading the data?

ironandsteel
30 Jan 2012, 11:19 AM
Is there an exception in the store reading the data?

Yes- i just get one error in the firebug console, and it is not like anything I've seen before (i obfuscated the path):



missing ; before statement
http://localhost/xxxxx/admin/scripts/getContListChunk.php?_dc=1327950521256&start=0&limit=99&sort=name&dir=DESC&callback=Ext.data.JsonP.callback1
Line 2



Question- I assume that it should make the ajax call to my script when it does the prefetch call, right?
How should I go about debugging this? I'm using the debug with comments version. I'm tracing into the code when it does the prefectch, but so far, I'm not seeing where it is bailing out.

Thanks-
LK

mitchellsimoens
30 Jan 2012, 11:22 AM
Looks like your response isn't formatted correctly

ironandsteel
30 Jan 2012, 11:24 AM
yeah, it does...but this script works great with my 4.0.7 version of the app. And, I wonder why I never see the ajax request in the firebug console like I normally would...

epinc
30 Jan 2012, 12:19 PM
similar problem here, my ajax call is getting fired and returning data for the grid, but the grid never populates. I can't find any difference between my code and the sample code in the beta 2 release. I'm going to take a iced tea break and come back and look at it with a fresh set of eyes

ironandsteel
30 Jan 2012, 2:28 PM
similar problem here, my ajax call is getting fired and returning data for the grid, but the grid never populates. I can't find any difference between my code and the sample code in the beta 2 release. I'm going to take a iced tea break and come back and look at it with a fresh set of eyes
Yes- I have had this exact problem with another attempt I have made. Also, when I take my working ext 4.0.7 app which uses buffered scrolling and lay in 4.1b2, I don't get the grid at all- the grid doesn't even render. I assume this is due to a change in the rendering approach. I've read the api changes re rendering and I think I am doing it correctly.

ironandsteel
30 Jan 2012, 3:15 PM
Ok- my original error was due to my local apache/mysql server timing out and returning error html. I've temporarily restricted my script to 20 records. Now, I get the grid, and I get the ajax call, and it comes back with good data, but it doesn't populate the grid. Same problem as epinc.
Whole lotta tracin' goin on...