Faire une bonne pagination pour un grille - extJS

Je suis nouveau sur ExtJS.
J'ai suivi un tutoriel dans le but de créer une pagination sur une grille.
Le code est simple, et j'ai trouvé ça suspect...
comme résultat, la pagination de la barre d'outils est là, mais il y a encore toutes les données affichées sur la première charge.
Voici mon code dans le fichier d'Affichage :

Ext.define('AM.view.user.List' ,{


extend: 'Ext.grid.GridPanel',

alias: 'widget.userlist',

cls: 'overall', 

title: 'xxx <img src="ressource/image/xxx.png" class="title-icon" style= "width: 5%; height: 5%; vertical-align:middle; margin-bottom:0px;" />',

columnLines: true,

dockedItems: [{
    xtype: 'pagingtoolbar',
    store: 'Users',
    pageSize: 2,
    dock: 'bottom',
    displayInfo: true
}],

J'ai aussi vu un tutoriel avec un var, mais je ne sais où les mettre en œuvre.
Je suis désolé, je sais qu'il existe de nombreux tutoriels à propos de la sortir de là, mais j'ai du mal sur elle :(, je n'ai pas la maîtrise JS assez !

Merci d'avance ^_^

edit :
Mon code dans mon fichier de Magasin :

var itemsPerPage = 2;
var store = Ext.define('AM.store.Users', {

pageSize: itemsPerPage,
extend: 'Ext.data.Store',
model: 'AM.model.User',


proxy: {
    type: 'ajax',

api: {
    read: 'application/data/users.json',
    update: 'application/data/updateUsers.json',
    },
    reader: {
        type: 'json',
        root: 'users',
    idProperty: 'POC',
        successProperty: 'success',
    totalProperty : 'total'
    }
},
autoLoad: false,

});

store.load({
params:{
   start:0,    
   limit: itemsPerPage
}
});

C'est de me dire : Uncaught TypeError: la fonction de l'Objet du constructeur() { ... n'a pas de méthode "load"

J'ai essayé d'enlever le magasin.charge, et d'ajouter {début: 0, maximum: 2} après l'AutoLoad, selon ce http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.toolbar.Paging.html

Avec cette méthode, la barre d'outils me montre "2-13 données affichées" comme il se doit, mais il n'y a pas de données affichées dans la grille :'(.

Vous avez besoin d'un tampon magasin pour échange. Pouvez-vous ajouter le code de la aux Utilisateurs de stocker à votre question?
Bien sûr, ici, il va !

OriginalL'auteur | 2013-06-18

4

Votre serveur-côté pile (PHP, .NET, peu importe) devront être conscient de la page, start, et limit paramètres qui sont passés à travers comme partie de la demande. C'est ce que vous allez utiliser pour créer la bonne requête SQL (ou ce que l'on fait pour récupérer les enregistrements) pour limiter les résultats correspondent à la pagination pris en charge par le magasin.

Je devine que vous êtes l'obtention de tous les résultats parce que votre serveur d'application est de renvoyer tous les résultats. La pagination fournis par ExtJS est vraiment juste une poignée de main avec ce code s'exécute sur le serveur...la pagination dans un magasin distant n'est pas en limitant les dossiers, votre code côté serveur. La requête AJAX que le magasin proxy envoie simplement dit au serveur qu'il s'attend à recevoir en retour que des données.

Merci, je suppose que cela signifie que je dois mettre quelque chose comme "magasin.charge({params: {début:0, maximum:2}});" quelque part 🙂 !
Hey, nouvelle question. J'ai mis à jour mon post avec mon nouveau code. Il faut que je précise que je suis en utilisant un local fichier JSOn pour simuler les données, donc pas de requête SQL.
Ah, dans ce cas, peut-être essayer le PagingMemoryProxy: docs.sencha.com/extjs/4.2.1/#!/api/...

OriginalL'auteur existdissolve
1

C'est de me dire : Uncaught TypeError: la fonction de l'Objet du constructeur()
{ ... n'a pas de méthode "load"

La raison pour laquelle il est en vous disant que c'est parce que vous tentez d'appeler la méthode load() sur la "classe" au lieu de le faire sur un exemple:
```
var store = Ext.define('AM.store.Users', {
```
Ext.définir définit une classe. Pour obtenir une instance, vous devez appeler Ext.créer:
```
var store = Ext.create('AM.store.Users', { /* ... */ });
```
Cela devrait se produire après la "classe" a été défini, mais avant d'appeler la charge.

Peut-être vous devriez prendre l'habitude de stocker le résultat de Ext.définir une variable avec un nom commençant par une lettre majuscule, de sorte que vous pouvez le voir, il représente une classe et une instance:
```
var Users = Ext.define('AM.store.Users', {
```
OriginalL'auteur Stijn de Witt
0

De la Pagination dans une grille nécessite un tampon magasin. Quelque chose comme ceci
```
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',

//snip
buffered: true,
pageSize: 5
//snip

proxy: {
    type: 'ajax',
api: {
    read: 'application/data/users.json',
    update: 'application/data/updateUsers.json',
    },
    reader: {
        type: 'json',
        root: 'users',
    idProperty: 'POC',
        successProperty: 'success',
        totalProperty: 'yourTotalProperty'
    }
}

});
```
Vérifier les demandes sortantes (chrome developer tools, firebug ou fiddler). Si on ajoute à la page info (page et pageSize) pour les Utilisateurs-demande alors votre Ext Js code est correct. Et bien sûr, vous avez aussi besoin d'un service web qui prend en charge la pagination et fournit les données demandées morceaux.

Merci, mais maintenant, quand je charge ma page, il y a une icône de Chargement que de garder sur le tournage, c'est tout ^^. Peut-être en raison de l'autoLoad:vrai ? Pour le moment je n'ai que 15 les données à afficher, et je veux seulement 5 par page de test, de sorte qu'il ne devrait pas prendre aussi longtemps à charger.
Voyez-vous la page de l'info dans les demandes sortantes? Et êtes-vous servi des pages spécifiques? Bien sûr, vous avez besoin de la taille de la page maintenant à 5. Votre problème ne devrait pas entraîner (directement) à partir de autoload=true. Je pense que votre problème peut venir d'un manque total de propriété dans le proxy. Il est ici dans la doc api docs.sencha.com/extjs/4.1.1/#!/api/...
Je ne pense pas que c'est exact de dire qu'un tampon de magasin est nécessaire pour la pagination. On peut parfaitement normal, non mis en mémoire tampon du magasin qui peuvent être utilisés dans une grille avec une pagination de la barre d'outils. Cet exemple de pagination (docs.sencha.com/extjs/4.2.1/extjs-build/examples/grid/...) n'est pas tamponnée...
Hey, j'ai supprimé de la mémoire tampon: vrai et ajouter un totalProperty: total. Maintenant, ExtJS sait le nombre de pages qu'il a à l'écran (14 données = 7 pages affichées dans la barre d'outils), mais encore tous les 14 les données restent sur la même page 🙁
Oui, vous avez besoin pour mettre en œuvre le code de votre côté serveur, le code de l'application qui sera uniquement retour 2 enregistrements par page.

OriginalL'auteur Christoph

Vous devez vous connecter pour publier un commentaire.