Pagination avec extDesigner

Version imprimable

Bonjour,

Je rencontre encore un problème.
Pour tester j'ai utilisé ExtJS Designer pour construire un tableau (grid) et mettre en place la pagination.
Mon problèm est que je ne sais pas comment passer les paramètres "start" et "limit" dans le système construit par ExtDesigner.

Si l'un d'entre avait une petite idée, je vous donne les codes généré par le designer.

Code:

1
2
3
4
5
6
7
8
9
10
11
/*
 * File: MyGrid.js
 * You should implement event handling and custom methods in this
 * class.
 */
 
MyGrid = Ext.extend(MyGridUi, {
    initComponent: function() {
        MyGrid.superclass.initComponent.call(this);
    }
});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
/*
 * File: MyGrid.ui.js
 * Do NOT hand edit this file.
 */
 
MyGridUi = Ext.extend(Ext.grid.GridPanel, {
    title: 'My Grid',
    store: 'dataStore',
    width: 762,
    height: 483,
    initComponent: function() {
        this.bbar = {
            xtype: 'paging',
            pageSize: 20,
            store: 'dataStore',
            displayInfo: true
        };
        this.columns = [
            {
                xtype: 'gridcolumn',
                header: 'Description',
                dataIndex: 'description',
                sortable: true,
                width: 100
            },
            {
                xtype: 'gridcolumn',
                header: 'Nom',
                dataIndex: 'nom',
                sortable: true,
                width: 100
            },
            {
                xtype: 'gridcolumn',
                header: 'Résumé',
                dataIndex: 'resume',
                sortable: true,
                width: 100
            },
            {
                xtype: 'gridcolumn',
                header: 'Version',
                dataIndex: 'version',
                sortable: true,
                width: 100
            },
            {
                xtype: 'datecolumn',
                header: 'Date',
                dataIndex: 'date',
                sortable: true,
                width: 100
            },
            {
                xtype: 'gridcolumn',
                header: 'Application',
                dataIndex: application',
                sortable: true,
                width: 100
            }
        ];
        MyGridUi.superclass.initComponent.call(this);
    }
});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/*
 * File: MyStore.js
 * Do NOT hand edit this file.
 */
 
MyStore = Ext.extend(Ext.data.JsonStore, {
    constructor: function(cfg) {
        cfg = cfg || {};
        MyStore.superclass.constructor.call(this, Ext.apply({
            storeId: 'dataStore',
            url: 'php/aaa.php',
            idProperty: 'ID',
            totalProperty: 'totalCount',
            root: 'results',
            autoLoad: true,
            autoDestroy: true,
            sortField: 'commentaire',
            paramNames: {
                start: 0,
                limit: 20
            },
            fields: [
                {
                    name: 'description',
                    mapping: 'DESCRIPTION'
                },
                {
                    name: 'nom',
                    mapping: 'NAME'
                },
                {
                    name: 'resume',
                    mapping: 'RESUME'
                },
                {
                    name: 'version',
                    mapping: 'VERSION'
                },
                {
                    name: 'date',
                    mapping: 'CREATION_TIME',
                    type: 'date'
                },
                {
                    name: 'application',
                    mapping: 'APPS'
                }
            ]
        }, cfg));
    }
});
new MyStore();

Merci par avance de vos réponses ^^

08/10/2010, 04h11
goldledoigt

Dans ton store à la place de :

Code:

autoLoad:true

tu peux mettre :

Code:

autoLoad:{params:{start:0, limit:20}}

Merci pour cette réponse que je viens de tester.
Je vois bien le "start" et le "limit" passer en paramètres mais la pagination ne fonctionne pas pour autant.
Je me pose alors la question sur mon fichier php contenant le JSON.
Il se compose comme ceci:
Code:

1 2 3 4 5 6 7 8 9 10 <?php $var = '({"totalCount":"104","results":[{ "DESCRIPTION":"", "VERSION":"562", "NAME":"Mon nom est ici", "RESUME":"bla bla bla bla bla bla bla bla bla", "CREATION_TIME":"15/01/2010 17:43:23", "APPS":"nom de l\'apps ici" },{.....}]})'; ?>

Enleve deja les parentheses pour que ton Json soit valide:

Code:

1
2
3
4
5
6
7
8
9
10
<?php
$var = '{"totalCount":"104","results":[{
        "DESCRIPTION":"",
        "VERSION":"562",
        "NAME":"Mon nom est ici",
        "RESUME":"bla bla bla bla bla bla bla bla bla",
        "CREATION_TIME":"15/01/2010 17:43:23",
        "APPS":"nom de l\'apps ici"
},{.....}]}';
?>

11/10/2010, 11h36
abraxis

Les parenthèses ont été retirées mais toujours pas de pagination possible.
11/10/2010, 12h26
goldledoigt

Tu peux me faire un résumé de la situation, les lignes dans ton tableau s'affichent ? Tu n'as pas d'erreur dans firebug ?
Dans ta requête Ajax tu penses que tous les paramètres necessaires au traitement coté PHP sont présent ?
Tu as combien d'enregistrements à afficher toutes pages confondues ... 104 ?
11/10/2010, 13h10
abraxis

En résumé, mon tableau affiche bien mes données.
Mais elle y sont toutes (les 104) alors que je ne veux en afficher que 20 par pages.
Je n'est aucune erreur dans firebug et les paramètres que je passe sont :

Citation:

limit 20
start 0
task LISTING

Par contre je ne fais aucuns traitement de ces paramètres dans ma page PHP.
11/10/2010, 13h18
goldledoigt

:)

Tu t'imagines bien que si le client envoie au serveur des paramètres c'est pour qu'ils soient traités afin de retourner le resultat adéquat.
Alors en partant du principe que tu tires tes données d'une requete SQL, il serait bon de faire quelque chose comme ca:

Code:

$query = "SELECT champ_1, champ_2 FROM ma_table LIMIT $_REQUEST['start'], $_REQUEST['limit']";
11/10/2010, 13h22
abraxis

oui oui je me doute que pour le cas ou mes données viennent d'une requête sql je dois passer start et limit en paramètre de ma requête.
Mais mes données ne viennent pas d'une requête. Mon JSON est écrit en dur dans ma page PHP.

Quand j'ai donné l'exemple de mon fichier php il y avais bien un "$var = " au début donc je ne génère pas le json il est bel et bien écrit en dur.
Je m'excuse si je n'avais pas spécifié celà avant :x

Je te fais un exemple à la volée, non testé.
Si je ne me trompe pas ca devrait ressembler à ca:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
$var = '{"totalCount":"104","results":[{
	"DESCRIPTION":"",
	"VERSION":"562",
	"NAME":"Mon nom est ici",
	"RESUME":"bla bla bla bla bla bla bla bla bla",
	"CREATION_TIME":"15/01/2010 17:43:23",
	"APPS":"nom de l\'apps ici"
},{.....}]}';
 
$json = array();
$var = json_decode($var); // transforme une chaine de caractères en un array PHP
$results = $var['results'];
$end = $_REQUEST['start'] + $_REQUEST['limit']; // donne la limite des resultats à renvoyer
for ($i = $_REQUEST['start']; $i < $end; i++) { // parcours les lignes de ton tableau depuis "start" jusqu'à "end"
    $json[] = $results[$i]; // rempli un nouveau tableau
} 
 
print json_encode($json); // transforme ton tableau en json et le print dans la page pour etre envoyé au client
?>

Ce n'est surement pas la plus jolie manière de l'écrire...

... mais au moins ca fonctionne ^^

Bon j'ai apporté quelques petites modifs que je vais donner dans le cas ou une autre personne serais dans le même cas que moi.

Code:

1
2
3
4
5
6
7
8
9
10
$json = array();
$var = json_decode($var, true); // transforme une chaine de caractères en un array PHP
$results = $var['results'];
$end = $_REQUEST['start'] + $_REQUEST['limit']; // donne la limite des resultats à renvoyer
for ($i = $_REQUEST['start']; $i < $end; $i++) { // parcours les lignes de ton tableau depuis "start" jusqu'à "end"
	if ($results[$i] != NULL)
		$json[] = $results[$i]; // rempli un nouveau tableau
} 
$var = json_encode($json); // transforme ton tableau en json et le print dans la page pour etre envoyé au client
$var = '({"totalCount":"104","results":' . $var . '})';

Un grand merci à toi goldledoigt pour ton aide, je reviendrais te poser des question alors : ppp