PDA

View Full Version : Paging Grid Problem



Neotk
22 Oct 2007, 3:49 AM
Hi Ext Expertise guys!
I spent these last days working with the GridPanel from this wonderful
library called Ext JS. :)
After many problems and solutions I'm finnaly very close to my objective: A very functional Grid.

I'm having some annoying problem right now with the pagination:

1 - When the 'next' icon is clicked, it calls the load method from the store. Everything returns ok but I get an error on this code, from the file ext-all-debug.js:



scrollToTop : function(){
this.scroller.dom.scrollTop = 0;
this.scroller.dom.scrollLeft = 0;
}


well, this problem I "solved" wrapping with a Try/Catch block, but i'd like to know the true origin of this issue.

2 - When the grid is loaded everything is ok. But when I click "next" on the paging, the grid is loaded but the column titles become invisible. O_O

Here is what is happening:

http://i169.photobucket.com/albums/u201/digaomatias/beforeClicking.jpg

After Clicking:

http://i169.photobucket.com/albums/u201/digaomatias/afterClicking.jpg

3 - There are some features I'd like to add but don't know how to do it.
When the grid is in the first page, I'd like to disable the "before" button. Or if its the last page, disable the "next" button. I'd like to animate the "refresh" icon when server request, is it possible?

Here is some code:

Init:



Ext.onReady(Init);

function Init(){
ds = GetDataStore();

bbar = CreateToolBar(ds);
ds.on('load', function () { BuildGrid(ds, bbar); });

ds.load({params:{start:0, limit:10}});

Ext.util.Format.brMoney = function(v){
v = (Math.round((v-0)*100))/100;
v = (v == Math.floor(v)) ? v + ".00" : ((v*10 == Math.floor(v*10)) ? v + "0" : v);
return "R$" + v ;
};
}


GridPanel


function BuildGrid(ds, bbar)
{
cm = GetColumns();

var grid = new Ext.grid.GridPanel(
{
el: 'grid-example',
ds: ds,
cm: cm,
width: 530,
height: 330,
header: true,
footer: true,
iconCls: 'icon-grid',
title:'Pedidos pendentes',
id: 'gridBonito',
viewConfig: { forceFit: true },
autoScroll: true,
bbar: bbar
});


grid.render();
}


PagingToolBar:

[CODE]
function CreateToolBar(ds)
{
var bbar = new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: 'Mostrando pedidos pendentes {0} - {1} de {2}',
emptyMsg: 'N

Neotk
22 Oct 2007, 8:44 AM
Bump!

won't I have any help???

Animal
22 Oct 2007, 10:48 AM
Do not use autoScroll on the Grid.

It has a special scroller element which wraps the table.

The latest code in SVN sets it to false because so many people hit this prob.

Neotk
22 Oct 2007, 10:54 AM
Thank you Animal!

Any tips on the PagingToolbar problem?

Animal
22 Oct 2007, 11:04 AM
It does disable buttons which are not usable.

Add a loadexception handler to the Store.

Neotk
23 Oct 2007, 2:56 AM
I tryed the autoScroll: false but the Header Text is missing yet. It's ok on firefox, this problem is IE related.

Neotk
25 Oct 2007, 11:32 AM
Animal. I got another painful problem.

Everything works well at the first grid's page.
But after i click to go to next page, the column text are missing (I already disabled the autoscroll) and my dynamic loaded Ext Window Control can't be closed properly. It gets dark and the buttons get all disabled.

look at those pictures...

Row click grid's page 2:

http://i169.photobucket.com/albums/u201/digaomatias/Page2rowclicked.jpg

Trying to move: Notice that the window gets duplicated in the screen as if it was created 2 times:
http://i169.photobucket.com/albums/u201/digaomatias/Page2TryingtoMove.jpg

After drop the window:

http://i169.photobucket.com/albums/u201/digaomatias/AfterMove.jpg

And after close the front window, the screen after trying to close the other window:

http://i169.photobucket.com/albums/u201/digaomatias/TryingtoCLose.jpg


The controls disapeared and this window blocks me from doing anything on grid or in itself. I cant click any button either click any grid row.

Probably its a BUG, my code is all right.

Animal
25 Oct 2007, 11:40 AM
How are you creating the Window? You should only create it once and keep a reference to it.

If you don't want to hold a reference, look it up by ID to use it the second time.

Neotk
26 Oct 2007, 4:19 AM
Ok, i'll give it a try!

Thank you.

Neotk
26 Oct 2007, 8:25 AM
Animal, after some time trying to accomplish with your solution without success I found the problem and fixed it.

The problem was that the onrowclick was being called 2 times at one row click. But this only happens after paginating the grid.

So you would tell me: "This was because you was adding a new event on each pagination." So I would answer: "So in the 3rd page the event should be fired 3 times and its not what is happening."

The question is: Why the event was firing 2 times after paging???

I don't know but i fixed putting an if block in the handler to verify if there is a window with id 'xxx' created. If not created, create it. This fixed the problem.

Now i have few problems to solve:
1 - The Text from the grid's header disappear after paging, and reappear on mouse over the header... this issue only happens at IE.

2 - The paging is getting higher than total row: like "Showing results 20-35 from 30 total" :-?

Thank you guys! Keep going with this ONE Javascript framework. I liked it a lot!

Animal
26 Oct 2007, 9:31 AM
Where are the rowclick handlers added?

I think we're not being shown the whole story here. It's really much easier than this. It all just works.

Neotk
29 Oct 2007, 3:12 AM
Well, here is my whole code revised:
[CODE]// JScript File
/*
* Ext JS Library 2.0 Beta 1
* Copyright(c) 2006-2007, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/

Ext.onReady(Init);

function Init(){
ds = GetDataStore();

bbar = CreateToolBar(ds);
ds.on('load', function () { BuildGrid(ds, bbar); });

ds.load({params:{start:0, limit:10}});

Ext.util.Format.brMoney = function(v, m){
v = (Math.round((v-0)*100))/100;
v = (v == Math.floor(v)) ? v + ".00" : ((v*10 == Math.floor(v*10)) ? v + "0" : v);
return "R$" + v ;
};

Ext.util.Format.date = DateVencidaFormat;
}

function DateVencidaFormat(textData, classInfo, recordRow){

if(recordRow.json['gerado'] == 'T')
classInfo.attr = 'style="color:green;"';

dateArray = textData.split("/");
date = new Date(dateArray[2], dateArray[1] - 1, dateArray[0]);
curDate = new Date();
if(( date.getFullYear() == curDate.getFullYear())&& ( date.getMonth() == curDate.getMonth()))
{
if( date.getDate() < curDate.getDate())
classInfo.attr = 'style="color:red;"';
}
else
classInfo.attr = 'style="color:red;"';

return textData;
}

function BuildGrid(ds, bbar)
{
cm = GetColumns();

var grid = new Ext.grid.GridPanel(
{
el: 'grid-example',
ds: ds,
cm: cm,
width: 530,
height: 330,
header: true,
footer: true,
iconCls: 'icon-grid',
title:'Pedidos pendentes',
id: 'gridBonito',
viewConfig: { forceFit: true },
autoScroll: false,
bbar: bbar
});

grid.on('rowclick', BuildFormBoleto);

grid.render();
}

function CreateToolBar(ds)
{
var bbar = new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: 'Mostrando pedidos pendentes {0} - {1} de {2}',
emptyMsg: 'N

Animal
29 Oct 2007, 3:30 AM
Right.

Create your Grid before you load the Store.

It subscribes to the Store's events and updates itself when the Store's contents change.

Neotk
8 Nov 2007, 12:03 PM
Worked! Thank you Animal!