Pagination avec extDesigner

**abraxis** · 07/10/2010, 15h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ^^

**goldledoigt** · 08/10/2010, 05h11

Dans ton store à la place de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

autoLoad:true

tu peux mettre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**abraxis** · 11/10/2010, 11h00

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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"
},{.....}]})';
?>

**goldledoigt** · 11/10/2010, 12h33

Enleve deja les parentheses pour que ton Json soit valide:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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"
},{.....}]}';
?>

**abraxis** · 11/10/2010, 12h36

Les parenthèses ont été retirées mais toujours pas de pagination possible.

**goldledoigt** · 11/10/2010, 13h26

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 ?

**abraxis** · 11/10/2010, 14h10

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 :

limit 20
start 0
task LISTING

Par contre je ne fais aucuns traitement de ces paramètres dans ma page PHP.

**goldledoigt** · 11/10/2010, 14h18

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$query = "SELECT champ_1, champ_2 FROM ma_table LIMIT $_REQUEST['start'], $_REQUEST['limit']";

**abraxis** · 11/10/2010, 14h22

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

**goldledoigt** · 11/10/2010, 14h44

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**abraxis** · 11/10/2010, 15h26

... 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Pagination avec extDesigner

Ext JS / Sencha

Discussions similaires

Partager

Partager