La pagination dans extjs grille

J'ai une page html d'avoir un div id="grid-example".

J'ai renvoyé un fichier js contient comme code suivant

Ext.onReady(function () {
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am']
];
//create the data store
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{ name: 'company' },
{ name: 'price', type: 'float' },
{ name: 'change', type: 'float' },
{ name: 'pctChange', type: 'float' },
{ name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData
});
//create the Grid
//var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
columns: [
{
text: 'Company',
flex: 1,
sortable: true,
dataIndex: 'company'
},
{
text: 'Price',
width: 75,
sortable: true,
//renderer: 'usMoney',
dataIndex: 'price',
menuDisabled: true //it will show/hide menu for sorting.
},
{
text: 'Change',
width: 75,
sortable: true,
dataIndex: 'change',
menuDisabled: true //it will show/hide menu for sorting.
},
{
text: '% Change',
width: 75,
sortable: true,
dataIndex: 'pctChange'
},
{
text: 'Last Updated',
width: 185,
sortable: true,
renderer: Ext.util.Format.dateRenderer("d/M/yy"),
dataIndex: 'lastChange'
},
],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
pageSize: 5,              
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
height: 550,
width: 600,
title: 'Array Grid',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
});

Je suis la grille, mais la pagination ne fonctionne pas...merci de m'aider.`
Je ne veux pas. de lignes doit être de 5 par page.

OriginalL'auteur Amit | 2012-01-04

  1. 5

    @Amit

    Je vois que vous êtes en utilisant le tableau pour remplir les données dans la grille du panneau. ExtJS panneau grille de pagination de la barre d'outils ne fonctionne qu'avec le serveur de données et utilise les propriétés suivantes pour récupérer les données depuis le serveur et calculer les pages:

    • commencer
    • limite
    • totalProperty - sur le lecteur
    • pageSize

    Le serveur doit gérer le début et la limite et la pageSize pour retourner les données demandées et définissez le nombre total de dossiers à la une de la propriété, qui est fixé à totalProperty (disons, 'totalRecords').

    Dans le cas où vous êtes à la recherche pour la pagination avec les données en mémoire, vous pouvez vous référer à http://www.sencha.com/forum/showthread.php?71532-Ext.ux.data.PagingStore-v0.5 ou reportez-vous aux exemples de code dans votre téléchargé extjs 3.dossier x - examples/ux/PagingMemoryProxy.js

    OriginalL'auteur Ajit Kumar

  2. 3

    pageSize: 5 config doit aller sur le store.

    J'AI CHANGÉ LA TAILLE DE LA PAGE:5, TOUJOURS PAS DE TRAVAIL..
    avez-vous utiliser tous les bouchons?

    OriginalL'auteur dbrin

  3. 0

    Essayez de supprimer limit:10
    Je ne le vois pas dans le Poste.PagingToolbar de configs.

    J'ai SUPPRIMÉ la limite:10 à partir de l'Ext.PagingToolbar de configs, mais encore la pagination ne fonctionne pas.. mon code est comme ci-dessus maintenant..
    ajouter cette: store.charge({params:{début:0, maximum:5}}); Dire si les travaux
    Salut Hadas,Où utiliser store.charge({params:{début:0, maximum:5}});
    Vous pouvez l'écrire après le magasin définition: var magasin= ... ; store.charge({params:{début:0, maximum:5}});

    OriginalL'auteur Hadas

  4. 0

    Pour moi paramètre le bon lecteur de propriétés est ce qui l'a fait. Ensuite vous avez juste à gérer les paramètres de chaîne de requête start et limit sur votre serveur pour effectuer la sélection de données. DataSource.Skip(start).Take(limit);

    var myStore = Ext.create('Ext.data.Store', {
model: 'Book',
pageSize: 10,
proxy: {
type: 'ajax',
url: '/api/data',
reader: {
//sends url?start={number}&limit={number}
type: 'json',
totalProperty: "results",
root: "rows"
}
},
autoLoad: { params: { start: 0, limit: 10 } }
});

    La resposne que je serait de retour à partir du service web afin de coïncider avec les paramètres ci-dessus.

    {
"success":"true",
"results":100,
"rows":[
{"Title":"Book #61","Author":"Some Guy","Year":2010}
....
....
]
}

    OriginalL'auteur Despertar