From Learn About the Ext JavaScript Library

Eu sugiro que você baixe o código fonte usado aqui assim você tem algo para começar a trabalhar, mesmo porque o código mostrado aqui não está completo. O exemplo funcionando pode ser acessado aqui.

Grade de Dados (Data Grid)

Uma paging grid deve ter um elemento no lado do servidor para executar a quebra dos dados em páginas.

Para este exemplo nós iremos usar o php como linguagem no lado do servidor, e o banco de dados Mysql com algums dados gerados randomicamente. O PHP script abaixo é usado para obter os dados e quebrar em páginas usando variáveis limit e start que são passadas do barra de ferramentas da grid.

$link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser") 
	or die("Could not connect");
mysql_select_db("test") or die("Could not select database");
 
$sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data";
$sql = $sql_count . " LIMIT ". (int) $_POST['start'].", ". (int) $_POST['limit'];
 
$rs_count = mysql_query($sql_count);
 
$rows = mysql_num_rows($rs_count);
 
$rs = mysql_query($sql);
 
while($obj = mysql_fetch_object($rs))
{
	$arr[] = $obj;
}
 
echo $_GET['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})';

Nós não estamos detalhando muito a fundo o código PHP, isso porque ele pode variar um pouco pela necessidade do programador e pelo ambiente.

O que é necessário para fazer uma 'Paged Grid'?

NOTA: O exemplo usa ScriptTagProxy somente porque os dados residem em um domínio diferente do código do exemplo. Na maioria das vezes você estará puxando dados do mesmo domínio que o código reside e usando HttpProxy.

A única diferença na fonte de dados é a adição de uma declaração de totalProperty. Em nosso exemplo, nós usamos o 'total' que está vindo de nosso script php com o valor total de linhas que nós teremos que quebrar em páginas.

var ds = new Ext.data.Store({
 
        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php'
        }),
 
        reader: new Ext.data.JsonReader({
            root: 'results',
            totalProperty: 'total',
            id: 'id'
        }, [
            {name: 'employee_name', mapping: 'name'},
            {name: 'job_title', mapping: 'title'},
            {name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'},
            {name: 'is_active', mapping: 'active'}
        ])
 
    });

Você pode utilizar o modelo normal de colunas e grid com qualquer outra grid desde que não exista nenhuma diferença em seus modelos e grades de coluna paginadas e não-paginadas.

Barra de paginação

Adicionar um barra de paginação na parte inferior da Grid, e está quase tudo pronto.

var gridFoot = grid.getView().getFooterPanel(true);
 
var paging = new Ext.PagingToolbar(gridFoot, ds, {
    pageSize: 25,
    displayInfo: true,
    displayMsg: 'Displaying results {0} - {1} of {2}',
    emptyMsg: "No results to display"
});

O último passo é passar o valor inicial dos parâmetros start e limit para carregar seus dados.

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

A maior parte do tempo gasto é no script do lado do servidor que manipular os dados passados de e para a Grid. Uma que você o script funcionando, a tarefa de adicionar paginação a uma Grid é muito simples.

• Ext Programmer's API Documentation
• Ext User Forums