Lazy loading Panel grid ExtJs 4.2.2

Version imprimable

21/05/2015, 23h15
geforce

1 pièce(s) jointe(s)

Lazy loading Panel grid ExtJs 4.2.2

Bonjour a tous,

Je veux arrive a chargé mes données par batche de 20 dans une Gride avec des pagination ?

Je me suis fait mon exemple avec ça : http://docs.sencha.com/extjs/4.2.2/#...toolbar.Paging
Mais ça ne fonctionne pas bine puisque il me charge toujours tout mes donnes sur une seul page même sur la tools bar affiche "Displaying 1-20 of 20869" ? y t'il des exemples simple ou des chose que je dois faire avant ?

Merci
ci-joint mon projet Pièce jointe 178480
22/05/2015, 08h28
sekaijin

dans extjs la pagination ne fait que préparer l'interface utilisateur et passer les paramètre dans la requête au serveur

dans tous les cas le widget affiche l'intégralité des données qu'il reçois du serveur.
c'est au serveur de fournir une réponse contenant la page de donnée demandée. c'est pour cette raison qu'extjs envois les paramètres de pagination au serveur.

on pourrait penser que c'est le client qui assure la pagination. Mais la pagination est faite pour minimiser les échanges entre le client et le serveur.
si c'est le client qui doit paginer on ne minimise rien. de plus aucun navigateur n'est capable de mettre en mémoire (RAM) 100 000 000 lignes
Alors que 1 000 000 de fois 100 ligne ne pose pas de problème.

imagine que tu navigue dans ton appli depuis un smartphone. si pour afficher les 10 première ligne d'une grid tu devait charger dans la mémoire du smartphone 100 000 000 de ligne les découper en packet de 10 sur le smartphone un tu en prendrait pour des plombes avec le réseau. deux la mémoire du smartphone serait saturée.

avec ExtJS il faut penser qu'on a en fait deux appli
un client et un serveur
le client sait géré peut de données les présenter de façon sophistiquée et interagir avec l'utilisateur.
le serveur sait géré beaucoup de données, et sait faire des traitement complexe et/ou de masse.
les deux communique via http

A+JYT
22/05/2015, 15h22
geforce
Citation:

Envoyé par sekaijin

c'est pour cette raison qu'extjs envois les paramètres de pagination au serveur.

OK, comment il est possible d'envoyer les paramètres de pagination au serveur ? (c'est quoi qui permet d'activer cette fonctionnalité)

Aussi dans le code plus haut : j'utilise
Code:

1 2 3 4 5 // allow the grid to interact with the paging scroller by buffering buffered: true, leadingBufferZone: 50, pageSize: 50, purgePageCount: 0,
Puis j'ai l'erreur suivant :
Uncaught TypeError: Cannot read property 'length' of undefined dans "ext-all-debug.js:98849" sur la ligne "if (records.length < 1) {"

NB: je suis avec Extjs 4.2.2.

Merci
22/05/2015, 18h04
sekaijin

il te faut lire la doc
je te conseille le tuto MVC

lorsque ExtJS envois la requête Ajax celle-ci contient toutes les information nécessaire au serveur pour récupérer la page de donnée.

en retour il attends un objet JSON dont la structure est précisée dans la doc.
cet objet contient plusieurs champs
le nombre total d'éléments
le nombre d'élément dans la page retournée
un tableau des éléments de la page
un attribut success qui doit être à true si le serveur à réussi à false sinon

tout cela est précisé dans la doc.
A+JYT
22/05/2015, 20h07
geforce

Je ne trouve pas d'exemple ou de doc qui parle de ce cas précis dons tu parle, tu peu m'envoyé le lien ?

Merci d’avance

NB: y a cette exemple la mais dans leurs code y pas de notion de limite de pagination (je ne la voix pas):
https://github.com/loiane/extjs4-mvc-paging-grid

Je vois qu tu utilises bien les paramètres de pagination dans ton fichier application/store/Transfo.js:

Code:

1
2
3
4
params:{
    start:0,
    limit: 20
}

Donc ton problème dois venir de PHP (dont tu ne fournis pas la source dans ton ZIP):
Voici un exemple de ce que tu dois gérer dans ton script PHP (code simplifié pour facilité la compréhension)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
$start = 0; // valeur par défaut
$limit = 25; // valeur par défaut
if (isset($_REQUEST['start']) && is_numeric($_REQUEST['start'])) $start = $_REQUEST['start'];
if (isset($_REQUEST['limit']) && is_numeric($_REQUEST['limit'])) $limit = $_REQUEST['limit'];
 
// construction de ta requête avec les valeurs de pagination
$sql = '
SELECT     [yourfields]
FROM       [yourtable]
WHERE      [youroptions]
ORDER BY  [yourorders]
LIMIT     '.$start.','.$limit;
 
 
$result = $db->query($sql) or log_error_db(__FILE__, __LINE__, $db->error());
 
header('Content-Type: text/javascript');
echo $json->encode($db->fetch_assoc($result));
 
?>

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
<?php
$start = 0; // valeur par défaut
$limit = 25; // valeur par défaut
if (isset($_REQUEST['start']) && is_numeric($_REQUEST['start'])) $start = $_REQUEST['start'];
if (isset($_REQUEST['limit']) && is_numeric($_REQUEST['limit'])) $limit = $_REQUEST['limit'];
 
// construction de ta requête avec les valeurs de pagination
$sql = '
SELECT     [yourfields]
FROM       [yourtable]
WHERE      [youroptions]
ORDER BY  [yourorders]
LIMIT     '.$start.','.$limit;
 
//calcul du nombre d'éléments total.
$count =  $db->fetch_rows($db->query('SELECT COUNT(1) AS COUNT FROM [yourtable] WHERE  [youroptions]'))[0];
 
//recherche de la page de données. 
$data = $db->fetch_assoc($db->query($sql)); // utilise try catch à la place  de or log_error_db(__FILE__, __LINE__, $db->error());
        if (is_array($data) || null != $count) {
            if (null == $count) {
                $count = count($data);
            }
            $response = array(
                'success' => true,
                'results' =>$count,
                'count' =>count($data),
                'rows'=> $data
            );
        } else {
            $response = array(
                'success' => false,
                'error' => $db->error(),
                'results' =>0,
                'count' =>0,
                'rows'=> null
            );
        }
header('Content-Type: text/javascript');
echo $json->encode( $response );
 
// il est déconseillé de fermer le tag php (risque d'introduction de caractères parasites lors des includes 
//?>

la réponse doit contenir les membres success results count rows
sucess : true/false suivant que l'opération ait abouti ou pas.
results : nombre total d'éléments
count : est le nombre d'éléments retournés
rows : liste des lignes retournées (data)

et en cas d'erreur
error: le message d'erreur.

A+JYT

25/05/2015, 18h25
geforce

Bonjour à tous,
Mon backend en java, mais pas très grave je comprends le principe. (Merci pour les codes très clairs)
Mais si je comprends bien c'est moi même qui dois fait Start et Limit coter serveur (j'ai déjà fait comme c'est simple).

Mais sur Extjs4.2.2 comment je peu envoyer c'est paramétré (Start, Limit de toolbar.Paging) du client au Serveur avec le composant 'grid.Panel' ?

Merci
25/05/2015, 20h18
sekaijin

1 pièce(s) jointe(s)

c'est automatique

tu définis un model
un poxy
un datastore

une vue avec
une grid
et un paging toolbar

dans la définition de tous cess élément il y a dé référence de l'un sur l'autre
du coup lorsque tu affiche ta grid Extjs demande via le proxy les données au serveur.
S'il y a une paging toolbar Extjs va ajouter dans la requête les information nécessaire à la pagination.

Tu as donc dans la query de ta servelt java les paramètres pour la pagination.
Nombre d'éléments par page et N° de la page ou index du premier élément.

ces paramètres sont soit dans les paramètres GET ou POST.
Mais si ma mémoire est bonne ils sont encodé en JSON

A+JYT
PS: j'ai ajouté un code un peu ancien (mais c'est le seul que j'ai sous la main) d'un projet qui implémente en JAVA des servlets de ce type
Attention il utilise des abstracts servlet pour capitaliser le code.
tu peux t'en inspirer il s'agit d'une version présente sur mon ordi perso je pense qu'il a très certainement subit des test des corrections et des améliorations lorsqu'il a été intégré dans le projet global. s'il était sur ma machine perso c'est qu'il s'agissait encore d'une version d'étude. à prendre donc comme base pour comprendre et étudier mais pas à utiliser tel quel.
26/05/2015, 20h10
geforce

1 pièce(s) jointe(s)

Ok merci pour l'explication et le code (un peu complexe, dit je ne voix pas bien ou tu fais le GET pour la récupération paramétrées du Sart, Limit, page qui sont dans la capture, comme tu ma dit ils sont bien là)
Pièce jointe 178866
26/05/2015, 22h58
geforce
ok j'ai peu récupéré les les paramétrés (@QueryParam) pour les utilisé dans ma raquette
Code:

1 2 + " OFFSET "+paging.getStart() + " LIMIT "+paging.getLimit()
Puis la j'ai le problème que le COUNT() de ma requete est égale a COUNT(OFFSET - LIMIT) fait que que il y a pas d'autres page de pagination dans le 'paging toolbar'. comment je peux corriger ce comportement ?

Je dois faire un COUNT() avant et initialisé a dans 'totalProperty:' sur Extjs ? si oui comment c'est possible de le faire
27/05/2015, 17h59
sekaijin

oui tu dois faire un count pour récupérer le nombre total d'éléments

Select cont(1) as nb Form matable Where ma condition
pas de limit rien d'autre que ça

oui mon code était defini à une généralisation pour en produire un grand nombre

A+JYT

OK, donc je fait un service REST qui récupéré le nombre de ligne (nbOfRecord)
Mais comment et quand l'affecter au ' toolbar.Paging' ?

NB: j'utilise ma méthode dans mon Store Transfo.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
     listeners: {
         load : function(store) {
             //if need something to do after the store loads
            var countRecord = Ext.getStore('CountRecord');
            countRecord.load({       
                    callback: function (records, operation, success) {
                        if (success) {
                          console.log("OK for Get.");
                          store.totalCount = countRecord.count;
                        }
                      }
            }); 
 
         } 
     }

j'ai le message d'erreur suivant :

Code:

1
2
 
Uncaught TypeError: Cannot read property 'internalId' of undefined

Merci d’avance.

non lorsque ton client demande une page
il te faut retourner le nombre total d'éléments
et la liste des éléments.

tu as dans le zip que je t'ai donné un fichier
TranscoDAO.java
c'est le code qui exécute les requêtes. (attention c'est pour oracle donc pas de limit mais une requête imbriqué pour obtenir le bon résultat)

tu as dans ce fichier les méthode get qui permettent d'exécuter la requête avec un clause where ou sans
tu as aussi une methode count qui requête la base pour avoir le nombre total d'éléments.

ensuite tu as le fichier AbstactServlet.java dans le dossier transco c'est le code des servlets

à l'init la servelet instancie une classe concrète dérivée de TranscoDAO.java
dans le doGet et doPost
elle fait appel à
getOrder qui récupère les paramètres de tri
getClause qui récupère éventuellement la clause where (filtres de la grid)
ensuit fait appel à request.getParameter qui récupère les paramètres de pagination
et enfin utilise le DAO
Code:

1 2 dao.get(start, limit, clause, order); //pour récupérer les données dao.count(clause); //pour récupérer le nombre total
la réponse est constituée du success et de ces deux éléments
Code:

1 2 3 response.put("success", true); response.put(this.name, dao.get(start, limit, clause, order)); response.put("total", dao.count(clause));
la classe AbstractJsonServlet est un classe parent dont le but est de tout encoder en json et qui gère les erreurs
tu trouve l'appel au doGet ou doPost
Code:

1 2 3 4 5 6 7 8 9 10 11 JsonMap obj = new JsonMap(); try { JsonRequest jsonRequest = getResquest(request); this.doGet(jsonRequest, obj); obj.put("success", true); this.setResponse(response, obj); } catch (Exception e) { setError(response, obj, e); log.error("doGet error", e); }
la méthode setResponse encode en Json la réponse l'envoie en UTF8 et gère le content/type de la réponse.

tu as donc au final un objet JSON (JsonMap) qui contient
un élément sucess true/false
un élément contenant les données
et un élément total contenant le nombre total

le total est donc transmis dans la réponse à la demande de page.
ainsi si le contenu de la base change pendant qu'on change de page l'affichage en tien compte

A+JYT