PDA

View Full Version : Dynamic Grid without Using Paging; Paging Memory Proxy



deitch
23 Apr 2009, 1:12 PM
I have released a grid extension that can handle extremely large data sets without paging. The DynaGrid (dynamic grid) is a very small ExtJS extension (4,570 bytes minified) that provides two key features:


DynaGrid - Dynamic grid that uses store's paging capabilities but displays the data as an infinite grid.
PagingMemoryProxy - MemoryProxy extension that can handle paging on an in-memory dataset. Primarily useful for testing paging without using the server.


I have seen several discussions about this. I needed my own very small (i.e. lightweight) version, so I created it and released it.

The dyna-grid library is available along with write-store at http://jsorm.com

The library is on the download page, and there is a full wiki entry. A sample page will be available shortly at http://jsorm.com/doc/samples/ext/dyna-grid.html

It is currently GPL (like ExtJS). A commercial license is not yet available, but will be made so if demand is there. I expect it to be very low cost.

Looking forward to feedback.

moegal
23 Apr 2009, 1:35 PM
I am getting an error in both IE and FF with the example.

Thanks, Marty

deitch
23 Apr 2009, 1:38 PM
Hi Marty,

Yes, the example is not ready yet. I had to pull it out from the larger project. I will post here when it is ready (hence the "shortly" in the earlier post). Probably should have just held off saying anything about it, but cat is out of the bag (which is an interesting turn of phrase, probably has to do with the cat of nine tails and the British Navy).


I am getting an error in both IE and FF with the example.

Thanks, Marty

deitch
23 Apr 2009, 2:08 PM
The sample page listed earlier is now ready at http://jsorm.com/doc/samples/ext/dyna-grid.html

Along the way, I found a structure that was preventing it from working with anything earlier than ExtJS v2.2. It is now tested with ExtJS v2.1 (and I have no intention of working with anything earlier).

The sample page should have new features soon, as well.

deitch
23 Apr 2009, 3:23 PM
The sample page is improved, will show all of the adds/removes as they happen, and can be turned off to improve performance.

deitch
24 Apr 2009, 7:21 AM
Version 0.6 is out. It includes primarily additional load methods for PagingMemoryProxy.

http://jsorm.com

moegal
24 Apr 2009, 10:57 AM
Works now, very nice!

logging doesn't show in IE but it does in FF.

Marty

deitch
24 Apr 2009, 11:05 AM
Excellent, thank you.

The logging itself is not at all integral to the DynaGrid; it just uses standard ExtJS and JavaScript items, e.g. store.on('add',f), setInterval()/clearInterval(), and Ext.DomHelper.insertHtml().


Works now, very nice!

logging doesn't show in IE but it does in FF.

Marty

GraemeBryce
5 May 2009, 2:55 AM
Hi

This is a very nice concept and as you say in the intro "it is very small".

I have been trying to test it in an environment where the server already supports loading stores with paging via start and limit along with the requirement that it also be passed a number of other parameters typically set in the store's baseParams object.

I am setting start and limit either in the autoLoad config or in the load() method but either way they are dropped on any subsequent load when I scroll and so immediately the server returns all records and it's down hill all the way from there.

I have a number of things I would like to clarify:

1. That use of the PagingMemoryProxy is ONLY for testing or the odd occasion where you may want the user to have a paging experience over a local store (and then scroll it anyway) which essentially is default behaviour.

2. That the plugin is intended to support a normal store retrieving data from a server page by page assuming the server correctly honour the start, and limit parameters and as long as it returns the record count in each response.

3. The WIKI documentation shows the following



// after aStore is created
aStore.load({start: 0, limit: 50}); // will load the first 50 records

// at aStore creation
var aStore = new Ext.data.Store({
// lots of config parameters
autoLoad({start: 0, limit: 50});
});

is it not the case that start and limit are to be passed in the params object and thus the above should read:


The initial load is done in one of two ways:
// after aStore is created
aStore.load(params:{{start: 0, limit: 50}}); // will load the first 50 records

// at aStore creation
var aStore = new Ext.data.Store({
// lots of config parameters
autoLoad(params:{{start: 0, limit: 50}});
});

Thanks for your help. I hope I can assist by feeding back further experiences in using the plugin to deal with certain server-side patterns.

deitch
5 May 2009, 2:30 PM
Hi Graeme,

It is always good to have you review the stuff; you really do find what needs to be better. Thank you for reviewing.

Responses are below.



I have been trying to test it in an environment where the server already supports loading stores with paging via start and limit along with the requirement that it also be passed a number of other parameters typically set in the store's baseParams object.

I am setting start and limit either in the autoLoad config or in the load() method but either way they are dropped on any subsequent load when I scroll and so immediately the server returns all records and it's down hill all the way from there.

Can you post the code you are using for the initial setup, and the expectation the server side has? Clearly, the dyna-grid is violating some assumption, I would like to catch it.



1. That use of the PagingMemoryProxy is ONLY for testing or the odd occasion where you may want the user to have a paging experience over a local store (and then scroll it anyway) which essentially is default behaviour.

Correct. I really created the PagingMemoryProxy because I needed a way to test the scrolling without being server-side dependent, and then with the server. Once done, it made sense to make it available to others.




2. That the plugin is intended to support a normal store retrieving data from a server page by page assuming the server correctly honour the start, and limit parameters and as long as it returns the record count in each response.

Correct again.



3. The WIKI documentation shows the following



// after aStore is created
aStore.load({start: 0, limit: 50}); // will load the first 50 records

// at aStore creation
var aStore = new Ext.data.Store({
// lots of config parameters
autoLoad({start: 0, limit: 50});
});is it not the case that start and limit are to be passed in the params object and thus the above should read:


The initial load is done in one of two ways:
// after aStore is created
aStore.load(params:{{start: 0, limit: 50}}); // will load the first 50 records

// at aStore creation
var aStore = new Ext.data.Store({
// lots of config parameters
autoLoad(params:{{start: 0, limit: 50}});
});Thanks for your help. I hope I can assist by feeding back further experiences in using the plugin to deal with certain server-side patterns.

In the eternal words of Homer Simpson, "Doh!" Nice catch, and you are correct yet again. I believe this may have bled into the scrolling handling code, which may be why the errors you saw above occurred. I will run it through the testing regimen with the changes, make sure they work, then modify the wiki and post here.

Thanks again for the excellent catches and feedback.

deitch
5 May 2009, 2:46 PM
I am setting start and limit either in the autoLoad config or in the load() method but either way they are dropped on any subsequent load when I scroll and so immediately the server returns all records and it's down hill all the way from there.

I do believe that this was due to the erroneous use of arguments. It is fixed in 0.7. Please do confirm.



3. The WIKI documentation shows the following

This has also been fixed.



I hope I can assist by feeding back further experiences in using the plugin to deal with certain server-side patterns.
Most definitely. As you see more patterns, please do post them so I can extend its functionality / compatibility.

rspaeth
15 Jun 2009, 1:38 PM
I think this is an interesting idea. I decided to test the dynagrid out with about 1000 records, but for some reason I have run into an issue i cannot seem to fix.

as i scroll down, the grid reaches an end (it shouldn't because we have not reached the end of the data), but the scroll ability continues. As I continue to scroll, the grid goes out of view but in the debugger I still see changing values in the grid and store (they are just not viewable to the user). In your sample, how do you get the grid endlessly display until the scrollbar reaches the bottom?

When i mess around with this line it seems to have an effect on the scroll area.
this.mainBody.setHeight(rowHeight*store.getTotalCount())

If I remove rowHeight, when i reach the bottom of the grid, my data is showing. There are a few side effects though, my grid wants to scroll to top, and the grid flickers as i pull the scrollbar down (including flicker above the grid in the north panel -using a border layout). Can you explain the above line of code please?

Thanks

deitch
16 Jun 2009, 9:07 AM
Can you put in some sample code, or even a live URL on the Internet? Would be happy to take a look at it.

The line you quoted below (above?) is instrumental to managing the scrollbar itself. The scrolled pane automatically positions itself to the relative position, based on the total height of the scrolled element, in this case the mainBody. If the mainBody were just the visible height shown, or the visible height plus the buffers, the scroll would always be much shorter. To create the illusion effect that it is in an appropriate place for a very large scrolling element, including all of those that are not currently visible or loaded, we need to:

Set the mainBody to be the total height it would be if all of the rows were loaded
Buffer the top so that the rows that are visible are in the right position they would be if all of the rows were loadedThe line you quoted handles the first element of that.



as i scroll down, the grid reaches an end (it shouldn't because we have not reached the end of the data), but the scroll ability continues. As I continue to scroll, the grid goes out of view but in the debugger I still see changing values in the grid and store (they are just not viewable to the user). In your sample, how do you get the grid endlessly display until the scrollbar reaches the bottom?

When i mess around with this line it seems to have an effect on the scroll area.
this.mainBody.setHeight(rowHeight*store.getTotalCount())

If I remove rowHeight, when i reach the bottom of the grid, my data is showing. There are a few side effects though, my grid wants to scroll to top, and the grid flickers as i pull the scrollbar down (including flicker above the grid in the north panel -using a border layout). Can you explain the above line of code please?

Thanks

deitch
16 Jun 2009, 9:08 AM
Gmail contacts are disastrous once you exceed a few hundred contacts. This is because it loads *all* of them into the browser. For those of us in networking or sales, or who have been around for a while, we have thousands, if not tens of thousands, of contacts. Using DynaGrid's concepts would go a long way towards solving it...

rspaeth
16 Jun 2009, 10:14 AM
Thanks for your reply. I will try to reproduce the issue in a small sample (I won't be able to give a live url). I just noticed all is working fine in IE. FF and Safari have the scroll issue i mention.

rspaeth
16 Jun 2009, 11:35 AM
I was able to reproduce the bug (for FF and Safari. IE works great) with the code below. Load the application, then click the load grid button. Scroll to the bottom and you should see the grid reach an end (the last data entry is not showing) but the scroll ability continues. When you scroll all the way to the bottom, check the debugger and you will see that the correct data is loaded (a break point in reorderStore will reveal this, or even walking through the add to watch all). It is just not viewable to the user because of the scrolling.



/**
* Paging memory proxy, to use for paging from a local memory source
* The main purpose for this is testing
*/
MyMemoryProxy = Ext.extend(Ext.data.MemoryProxy,
{
constructor : function(config)
{
var data = config;
MyMemoryProxy.superclass.constructor.call(this,config);
},
/**
* Need to override the load so it loads only what we want
*/
load : function(params, reader, callback, scope, arg)
{
params = params || {};
arg = arg || {};
var result, end, url = this.url;

try {
if(arg)
{
if(arg.folderId)
{
var run = false;

if(!this.currentFolderId)
{
this.currentFolderId = arg.folderId;
run = true;
} else if (this.currentFolderId != arg.folderId)
{
run = true;
}

if(run)
{
//right here i call a service i created which gets the data i need from the server
//for purposes of this example i will just return the data you have in your sample

this.currentFolderId = arg.folderId;
// keep the data
this.data = updateGridData(arg.folderId);
// run the load again, this time with data all ready
this.load(params,reader,callback,scope,arg);
}
else
{
// we failed, so pass the error message
callback.call(scope,null,arg,false);
}
}
}

//get the data from the model and reader.readRecords(this.data);
result = reader.readRecords(this.data);
// was it limited?
if (params.hasOwnProperty("start")) {

var limit = null;
if(params.hasOwnProperty("limit"))
{
limit = params.start+params.limit;
}

result.records = result.records.slice(params.start,limit);//params.hasOwnProperty("limit")?params.start+params.limit:null);

}
}catch(e){
this.fireEvent("loadexception", this, arg, null, e);
callback.call(scope, null, arg, false);
return;
}
callback.call(scope, result, arg, true);
}
});

Ext.onReady(
function()
{
var store = new Ext.data.Store({
proxy: new MyMemoryProxy(),
reader: new Ext.data.JsonReader(),
autoLoad: {params: {start: 0, limit: 50}}
});

this.grid = new JSORM.ext.DynaGrid({
autoScroll: true,
enableColumnHide: false,
enableColumnMove: false,
enableColumnResize: false,
columns: [{id: 'id', header: 'project Id',sortable: true},{id: 'name', header: 'name',sortable: true},{id: 'owner', header: 'owner',sortable: true}],
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
store: store
});

mainWindow = new Ext.Viewport(
{
layout: 'border'
,hideMode:'visibility'
,items: [
{
xtype: 'panel'
,border: true
,region: 'west'
,id: 'west'
,items:
[ //button
new Ext.Button({
text: "load grid",
handler: fn = function()
{
this.grid.loadGrid(2);
},
scope: this
})
]
},
{
xtype: 'panel'
,border: true
,region: 'center'
,id: 'gridCenter'
,layout: 'fit'
,items:
[ this.grid ]
}]
});
}
);

function updateGridData( projectId )
{
var stubdata = {
metaData: {
totalProperty: 'results',
root: 'subjects',
fields:
[{name: 'projectId'},{name:'name'},{name:'owner'}]
},
results: 118,
subjects:
[
{projectId: 0, name: 'John Smith', owner: 'jsmith'},
{projectId: 1, name: 'Jill Shine', owner: 'jshine'},
{projectId: 2, name: 'Jim Smooth', owner: 'jsmooth'},
{projectId: 3, name: 'Julia Share', owner: 'jshare'},
{projectId: 4, name: 'Jack Stack', owner: 'jstack'},
{projectId: 5, name: 'Jerry Stein', owner: 'jstein'},
{projectId: 6, name: 'Jonathan Sergio', owner: 'jsergio'},
{projectId: 7, name: 'Julie Smart', owner: 'jsmart'},
{projectId: 8, name: 'Jarvis Stiles', owner: 'jstiles'},
{projectId: 9, name: 'Jennifer Schwartz', owner: 'jschwartz'},
{projectId: 10, name: 'Jimmy Samuels', owner: 'jsamuels'},
{projectId: 11, name: 'Jeremy Skilling', owner: 'jskilling'},
{projectId: 12, name: 'Jared Sunder', owner: 'jsunder'},
{projectId: 13, name: 'Jillian SlprojectIde', owner: 'jslprojectIde'},
{projectId: 14, name: 'Jonny Sykes', owner: 'jsykes'},
{projectId: 15, name: 'Jasper Stouffer', owner: 'jstouffer'},
{projectId: 16, name: 'Janice Stern', owner: 'jstern'},
{projectId: 17, name: 'Jax Sullenberger', owner: 'jsullenberger'},
{projectId: 18, name: 'Jeffrey Solace', owner: 'jsolace'},
{projectId: 19, name: 'Jeff Striker', owner: 'jstriker'},
{projectId: 20, name: 'Jet Sunday', owner: 'jsunday'},
{projectId: 21, name: 'Jinger Sacks', owner: 'jsacks'},
{projectId: 22, name: 'Janine Staff', owner: 'jstaff'},
{projectId: 23, name: 'Jazz Shane', owner: 'jshane'},
{projectId: 24, name: 'Jackson Sopher', owner: 'jsopher'},
{projectId: 25, name: 'Job Suffers', owner: 'jsuffers'},
{projectId: 26, name: 'Javier Solana', owner: 'jsolana'},
{projectId: 27, name: 'Jed Scrips', owner: 'jscrips'},
{projectId: 28, name: 'June Summers', owner: 'jsummers'},
{projectId: 29, name: 'July Smithers', owner: 'jsmithers'},
{projectId: 30, name: 'John Smith', owner: 'jsmith'},
{projectId: 31, name: 'Jill Shine', owner: 'jshine'},
{projectId: 32, name: 'Jim Smooth', owner: 'jsmooth'},
{projectId: 33, name: 'Julia Share', owner: 'jshare'},
{projectId: 34, name: 'Jack Stack', owner: 'jstack'},
{projectId: 35, name: 'Jerry Stein', owner: 'jstein'},
{projectId: 36, name: 'Jonathan Sergio', owner: 'jsergio'},
{projectId: 37, name: 'Julie Smart', owner: 'jsmart'},
{projectId: 38, name: 'Jarvis Stiles', owner: 'jstiles'},
{projectId: 39, name: 'Jennifer Schwartz', owner: 'jschwartz'},
{projectId: 40, name: 'Jimmy Samuels', owner: 'jsamuels'},
{projectId: 41, name: 'Jeremy Skilling', owner: 'jskilling'},
{projectId: 42, name: 'Jared Sunder', owner: 'jsunder'},
{projectId: 43, name: 'Jillian SlprojectIde', owner: 'jslprojectIde'},
{projectId: 44, name: 'Jonny Sykes', owner: 'jsykes'},
{projectId: 45, name: 'Jasper Stouffer', owner: 'jstouffer'},
{projectId: 46, name: 'Janice Stern', owner: 'jstern'},
{projectId: 47, name: 'Jax Sullenberger', owner: 'jsullenberger'},
{projectId: 48, name: 'Jeffrey Solace', owner: 'jsolace'},
{projectId: 49, name: 'Jeff Striker', owner: 'jstriker'},
{projectId: 50, name: 'Jet Sunday', owner: 'jsunday'},
{projectId: 51, name: 'Jinger Sacks', owner: 'jsacks'},
{projectId: 52, name: 'Janine Staff', owner: 'jstaff'},
{projectId: 53, name: 'Jazz Shane', owner: 'jshane'},
{projectId: 54, name: 'Jackson Sopher', owner: 'jsopher'},
{projectId: 55, name: 'Job Suffers', owner: 'jsuffers'},
{projectId: 56, name: 'Javier Solana', owner: 'jsolana'},
{projectId: 57, name: 'Jed Scrips', owner: 'jscrips'},
{projectId: 58, name: 'June Summers', owner: 'jsummers'},
{projectId: 59, name: 'John Smith', owner: 'jsmith'},
{projectId: 60, name: 'Jill Shine', owner: 'jshine'},
{projectId: 61, name: 'Jim Smooth', owner: 'jsmooth'},
{projectId: 62, name: 'Julia Share', owner: 'jshare'},
{projectId: 63, name: 'Jack Stack', owner: 'jstack'},
{projectId: 64, name: 'Jerry Stein', owner: 'jstein'},
{projectId: 65, name: 'Jonathan Sergio', owner: 'jsergio'},
{projectId: 66, name: 'Julie Smart', owner: 'jsmart'},
{projectId: 67, name: 'Jarvis Stiles', owner: 'jstiles'},
{projectId: 68, name: 'Jennifer Schwartz', owner: 'jschwartz'},
{projectId: 69, name: 'Jimmy Samuels', owner: 'jsamuels'},
{projectId: 70, name: 'Jeremy Skilling', owner: 'jskilling'},
{projectId: 71, name: 'Jared Sunder', owner: 'jsunder'},
{projectId: 72, name: 'Jillian SlprojectIde', owner: 'jslprojectIde'},
{projectId: 73, name: 'Jonny Sykes', owner: 'jsykes'},
{projectId: 74, name: 'Jasper Stouffer', owner: 'jstouffer'},
{projectId: 75, name: 'Janice Stern', owner: 'jstern'},
{projectId: 76, name: 'Jax Sullenberger', owner: 'jsullenberger'},
{projectId: 77, name: 'Jeffrey Solace', owner: 'jsolace'},
{projectId: 78, name: 'Jeff Striker', owner: 'jstriker'},
{projectId: 79, name: 'Jet Sunday', owner: 'jsunday'},
{projectId: 80, name: 'Jinger Sacks', owner: 'jsacks'},
{projectId: 81, name: 'Janine Staff', owner: 'jstaff'},
{projectId: 82, name: 'Jazz Shane', owner: 'jshane'},
{projectId: 83, name: 'Jackson Sopher', owner: 'jsopher'},
{projectId: 84, name: 'Job Suffers', owner: 'jsuffers'},
{projectId: 85, name: 'Javier Solana', owner: 'jsolana'},
{projectId: 86, name: 'Jed Scrips', owner: 'jscrips'},
{projectId: 87, name: 'June Summers', owner: 'jsummers'},
{projectId: 88, name: 'July Smithers', owner: 'jsmithers'},
{projectId: 89, name: 'John Smith', owner: 'jsmith'},
{projectId: 90, name: 'Jill Shine', owner: 'jshine'},
{projectId: 91, name: 'Jim Smooth', owner: 'jsmooth'},
{projectId: 92, name: 'Julia Share', owner: 'jshare'},
{projectId: 93, name: 'Jack Stack', owner: 'jstack'},
{projectId: 94, name: 'Jerry Stein', owner: 'jstein'},
{projectId: 95, name: 'Jonathan Sergio', owner: 'jsergio'},
{projectId: 96, name: 'Julie Smart', owner: 'jsmart'},
{projectId: 97, name: 'Jarvis Stiles', owner: 'jstiles'},
{projectId: 98, name: 'Jennifer Schwartz', owner: 'jschwartz'},
{projectId: 99, name: 'Jimmy Samuels', owner: 'jsamuels'},
{projectId: 100, name: 'Jeremy Skilling', owner: 'jskilling'},
{projectId: 101, name: 'Jared Sunder', owner: 'jsunder'},
{projectId: 102, name: 'Jillian SlprojectIde', owner: 'jslprojectIde'},
{projectId: 103, name: 'Jonny Sykes', owner: 'jsykes'},
{projectId: 104, name: 'Jasper Stouffer', owner: 'jstouffer'},
{projectId: 105, name: 'Janice Stern', owner: 'jstern'},
{projectId: 106, name: 'Jax Sullenberger', owner: 'jsullenberger'},
{projectId: 107, name: 'Jeffrey Solace', owner: 'jsolace'},
{projectId: 108, name: 'Jeff Striker', owner: 'jstriker'},
{projectId: 109, name: 'Jet Sunday', owner: 'jsunday'},
{projectId: 110, name: 'Jinger Sacks', owner: 'jsacks'},
{projectId: 111, name: 'Janine Staff', owner: 'jstaff'},
{projectId: 112, name: 'Jazz Shane', owner: 'jshane'},
{projectId: 113, name: 'Jackson Sopher', owner: 'jsopher'},
{projectId: 114, name: 'Job Suffers', owner: 'jsuffers'},
{projectId: 115, name: 'Javier Solana', owner: 'jsolana'},
{projectId: 116, name: 'Jed Scrips', owner: 'jscrips'},
{projectId: 117, name: 'June Summers', owner: 'jsummers'}
]
};

return(stubdata);
}
This function is added to the DynaGrid code for grid loading. This is needed for our application because the grid loads based on the users selection of tree nodes. We will not know what to put in the grid untill the user interacts with the application.


loadGrid : function ( folderId )
{
//reset the dynagrid to default values
this.view.scrollTop();

var options = {
'folderId' : folderId
,params: {start: 0, limit: 50}
};

this.store.load(options);
}

deitch
19 Jun 2009, 5:29 AM
OK, getting to this today...

deitch
19 Jun 2009, 12:27 PM
rspaeth,

Minor point. You can eliminate the modification of DynaGrid (in the second section above), by using the following code instead on the button handler:



new Ext.Button({
text: "load grid",
handler: fn = function()
{
//reset the dynagrid to default values
this.grid.getView().scrollTop();
var options = {
'folderId' : 2
,params: {start: 0, limit: 50}
};
this.grid.getStore().load(options);
},
scope: this
})

deitch
19 Jun 2009, 12:47 PM
rspaeth,

I cannot replicate the problem. I took your sample code, wrapped it in html as appropriate, and loaded it up to http://jsorm.com/doc/samples/ext/rspaeth.html

I tried it under Firefox and Safari on Mac, and Firefox and IE on WinXP. Perhaps I am not understanding the problem? Can you describe (in painful detail) what you need to do with the page above to cause the problem (keystrokes, mouse movement/clicks, etc.) and how it manifests itself?

deitch

rspaeth
19 Jun 2009, 2:28 PM
All I do, is go to the page, click the button, and scroll down. For some reason, your example works when I click the link, while mine still does not (even after copying and pasting all you had just in case there were changes). What are the differences between the two examples?

1) my onReady is on it's own .js page
2) i do not include
<script type="text/javascript" src="localXHR2.js"></script>

which should not make a difference

3) I do not import (although I tried and it made no difference as expected)
@import url('ext/resources/css/xtheme-aero.css');

Other than above, i cannot explain why I cannot get this to work on my server. I think I may have some conflicts with other code that i still load (even though i am not using it in the example). Perhaps I override something in conflict. I will keep debugging.

deitch
19 Jun 2009, 2:51 PM
Hmm, very strange. I will mull this one through, and try to get a valid "not working" copy using your code.

Oh, wait a minute, I just figured it out! Is this your code?



loadGrid : function ( folderId )
{
//reset the dynagrid to default values
this.view.scrollTop();

var options = {
'folderId' : folderId
,params: {start: 0, limit: 50}
};

this.store.load(options);
}


Ignoring the fact that I moved this into the handler, you have an error here:



this.view.scrollTop(); // NO SUCH FUNCTION

// perhaps better...
this.view.scrollToTop(); // WERE YOU LOOKING FOR THIS?


Run it in Firebug, you should see that error, which stops the adjustment from working correctly. Look at the source code of the example I posted at the link, should give you a better idea.



All I do, is go to the page, click the button, and scroll down. For some reason, your example works when I click the link, while mine still does not (even after copying and pasting all you had just in case there were changes). What are the differences between the two examples?

1) my onReady is on it's own .js page
2) i do not include
<script type="text/javascript" src="localXHR2.js"></script>

which should not make a difference

3) I do not import (although I tried and it made no difference as expected)
@import url('ext/resources/css/xtheme-aero.css');

Other than above, i cannot explain why I cannot get this to work on my server.

rspaeth
19 Jun 2009, 3:35 PM
I had an override for scrollToTop, and used scrollTop to actually scroll to the top. I had removed the override and had copy pasted your code and had no luck.

I think i found the issue (or difference between our samples). We have a doctype in our application, and you do not. When i remove the doctype, all works fine. Can you try adding
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

to the top of your file and see if you get the bug?

Thanks

rspaeth
19 Jun 2009, 3:59 PM
As a separate bug, using the same sample (the one on your server), try the following with IE (windows) and then FF (Mac -at least that is how i have been testing).

1) load the page
2) click the button to load the grid
3) select the first row in the grid
4) keep pressing the down arrow until you reach the bottom of the grid
5) keep pressing the down arrow after you reach the bottom of the grid to move to new rows out of view.

In IE I get an unspecified error in Ext.base line 10 character 1514 on

M=G.getBoundingClientRect()

If you ignore it and keep pressing down, another error of the same type will display.

In FF i seem to lose my selection (but only on the first load. If i try reselect and scroll down it works).

deitch
20 Jun 2009, 6:13 PM
Fascinating! I do, indeed, get the bug. There is something odd about how it does the load calculation. It is really interesting that this only kicks in now. This shouldn't be *that* hard to debug at this point, though.

What are you using DynaGrid for?


I had an override for scrollToTop, and used scrollTop to actually scroll to the top. I had removed the override and had copy pasted your code and had no luck.

I think i found the issue (or difference between our samples). We have a doctype in our application, and you do not. When i remove the doctype, all works fine. Can you try adding
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

to the top of your file and see if you get the bug?

Thanks

deitch
20 Jun 2009, 6:48 PM
Well, some ideas here. It actually is doing just about everything right, but one thing is not working. In order to make the scroll work right, the following process occurs:

Calculate the height of a typical row
Calculate how many rows in total there are (not those loaded, but the entire amount if loaded)
Load the rows desired, unload any others (this is the key to keeping memory management sane)
Pad the top row (i.e. the first one of the currently loaded set) with a thickness exactly matching the number of rows that would be loaded


It is that last piece that is behaving differently. The code is as follows:


Ext.get(r).setStyle("padding-top",firstRow*rowHeight);


For reasons unknown, when we are in XHTML 1.0 Strict (per the DOCTYPE), the setStyle is completely ignored. Is there something about setting the style of padding-top in XHTML Strict?

deitch
20 Jun 2009, 7:08 PM
Under STRICT mode, which the DOCTYPE causes the browser to enter, it is picky not only about the HTML, of course, but also about the CSS. Under STRICT CSS, the following is illegitimate:



Ext.get(r).setStyle("padding-top",firstRow*rowHeight);


A padding style must have not just the number (firstRow*rowHeight in the example above), but also units. Quirks mode (or non-strict), defaults to px if you don't give it a unit, but STRICT mode insists on a unit. Thus, changing it to the following works perfectly:



Ext.get(r).setStyle("padding-top",firstRow*rowHeight+'px');


I have updated DynaGrid to 0.8 to fix this, releasing immediately.

Thanks for catching the flaw.

deitch
22 Jun 2009, 12:25 PM
rspaeth,

I don't get it. Is this still happening? I tried it, in both FF-Mac and IE-Win, and have no such problem. When I get to the bottom of the grid, and keep pressing down, nothing happens (which is the right thing, of course).




As a separate bug, using the same sample (the one on your server), try the following with IE (windows) and then FF (Mac -at least that is how i have been testing).

1) load the page
2) click the button to load the grid
3) select the first row in the grid
4) keep pressing the down arrow until you reach the bottom of the grid
5) keep pressing the down arrow after you reach the bottom of the grid to move to new rows out of view.

In IE I get an unspecified error in Ext.base line 10 character 1514 on

M=G.getBoundingClientRect()

If you ignore it and keep pressing down, another error of the same type will display.

In FF i seem to lose my selection (but only on the first load. If i try reselect and scroll down it works).

rspaeth
22 Jun 2009, 12:45 PM
The first bug, the scrolling issue, is fixed. Nice Job.

The down key presses is different issue. When i press the down key and it reaches the bottom of the viewable grid (not the end of the total rows of data), the behavior described in the previous post happens. When i wrote "bottom of the grid" i was referring to the items currently in view to the user. There are more items to view in the data, that had not yet loaded. Sorry for the confusion.

deitch
23 Jun 2009, 4:41 AM
OK, I see it now. I was also able to get that unspecified error on IE.

Essentially, you are saying that although scrolling with the scrollbar works, when you scroll down by selecting a row and then using the down arrow, it fails, and even causes an error in IE. However, if you *reselect* a row of the visible, and then scroll down, it does work, on both IE and FF.

Will look at this, we will figure it out.




The first bug, the scrolling issue, is fixed. Nice Job.

The down key presses is different issue. When i press the down key and it reaches the bottom of the viewable grid (not the end of the total rows of data), the behavior described in the previous post happens. When i wrote "bottom of the grid" i was referring to the items currently in view to the user. There are more items to view in the data, that had not yet loaded. Sorry for the confusion.

deitch
23 Jun 2009, 10:04 AM
That was a nasty little bug to track down. But, it is fixed, version 0.9 is released.