grid pagination, sort help

**cleancutEddie** · 20 Sep 2007 7:48 AM

I'm new to extjs grid, and need some help with the sort (it's visible but not working), and pagination. I took the basic "sample" grid example by bd318, and modified the files (sample.js, sample.php, sample.html) for my data. It's using Json. The good news is that it successfully retrieves the data and puts it in the grid. However, I've got two problems:

1) I can't figure out how to provide pagination.
2) When I right-click on the column and click sort-ascending or sort-descending, nothing happens.

Thanks in advance.

**steffenk** · 20 Sep 2007 7:57 AM

The grid has two sort-options.
if this is set:
remoteSort: true
a request is send to the external file with the sort-param as GET/POST, so the script has to retrieve the sorted data.
If the flag is not set, the grid sorts the "visible" rows (like in the examples)

Pagination is really simple, you do that by this code:

PHP Code:


var gridFoot = grid.getView().getFooterPanel(true);

        // add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
    pageSize: limit,
    displayInfo: true,
    displayMsg: 'show data {0} - {1} from total {2}',
    emptyMsg: "no data found"
});

**cleancutEddie** · 20 Sep 2007 10:16 AM

I've done what you said, and the pagination is still not working. Thanks.

**jimmyphp** · 20 Sep 2007 10:52 AM

Check with firebug your server response.

Is sorted?

post your php code.

**cleancutEddie** · 21 Sep 2007 6:56 AM

The PHP code that I'm using is really basic:

PHP Code:


<head>

<script language="JavaScript" type="text/javascript" src="../jscss/extjs/adapter/ext/ext-base.js"></script>

<script language="JavaScript" type="text/javascript" src="../jscss/extjs/ext-all.js"></script>

<script language="JavaScript" type="text/javascript" src="sample.js"></script>

<link rel="stylesheet" type="text/css" href="../jscss/extjs/resources/css/ext-all.css" media="screen" />

</head>



<body>

<div id="grid-panel" style="width:720px;height:480px;"> 

<div id="editor-grid"></div> 



<div id="editGrid"> 

</div>

</body>

And, the js file includes:

PHP Code:


    var gridFoot = grid.getView().getFooterPanel(true);



    // add a paging toolbar to the grid's footer

    var paging = new Ext.PagingToolbar(gridFoot, ds, {

        pageSize: ps,

        displayInfo: true,

        displayMsg: 'Displaying configuration {0} - {1} of {2}',

        emptyMsg: "No data available"

    });

Again, the data is there, the columns sort properly. Everything works, except it doesn't paginate. What am I missing, or doing incorrectly? Thanks.

cleanCutEddie

**evant** · 21 Sep 2007 7:00 AM

When you say it doesn't paginate, do you mean you always have the full number of results returned, or you only ever get the first page?

Is your PHP code limiting the amount of records it returns? Because this must be done server side.

**cleancutEddie** · 21 Sep 2007 11:47 AM

> When you say it doesn't paginate, do you mean you always have the full number of results returned, or you only ever get the first page?

I'll try to clarify. When I say the pagination doesn't work, I mean that the pagination toolbar does not appear at all.

**evant** · 21 Sep 2007 6:05 PM

You're adding the paging toolbar after you render the grid right?

**cleancutEddie** · 24 Sep 2007 5:59 AM

Yes, I've tried adding it both ways (before and after the render).

**evant** · 24 Sep 2007 1:42 PM

Post an online example.

grid pagination, sort help

Thread Tools

Search Thread

Display

grid pagination, sort help

grid pagination, sort help