Setting the reader on a extjs store

Question

I have a store on extjs4 that return a list of objects, and i want to set the reader property to be able to count the elements so i can use paging afterward.

For reference, the example that extjs use already comes with a count property(totalCount) and the type of object listed(topics), while mine dont have it, just the list.

for reference: example

Also, in my code the grid doesnt recognize the limit of results per page, but the paging toolbar does:

var sm = Ext.create('Ext.selection.CheckboxModel');

Ext.define('Cliente', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'ID',
        type: 'int'
    }, {
        name: 'Nome',
        type: 'string'
    }, {
        name: 'Email',
        type: 'string'
    }, {
        name: 'RazaoSocial',
        type: 'string'
    }, {
        name: 'TipoDeCliente',
        type: 'string'
    }],
    idProperty: 'ID'

});

var store = Ext.create('Ext.data.Store', {
    pageSize: 3,
    model: 'Cliente',
    remoteSort: true,
    proxy: {
        type: 'ajax',
        url: 'http://localhost:4904/Cliente/ObterClientes',
        extraParams: {
            nome: '',
            tipopessoa: '',
            email: '',
            cpf: '',
            estado: '',
            cidade: '',
            cep: ''
        },
        reader: {
            type: 'json',
            root: 'data'
        },
        simpleSortMode: true
    },
    sorters: [{
        property: 'Email',
        direction: 'DESC'
    }]
});

var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
    width: 500,
    height: 250,
    title: 'Array Grid',
    store: store,
    selModel: sm,

    loadMask: true,
    viewConfig: {
        id: 'gv',
        trackOver: false,
        stripeRows: false
    },
    columns: [{
        id: 'gridid',
        text: "ID",
        dataIndex: 'ID',
        hidden: true
    }, {
        text: 'Nome',
        width: 150,
        sortable: true,
        dataIndex: 'Nome'
    }, {
        text: 'Tipo de Cliente',
        width: 100,
        sortable: true,
        dataIndex: 'TipoDeCliente'
    }, {
        text: 'Email',
        width: 150,
        sortable: true,
        dataIndex: 'Email'
    }],
    bbar: Ext.create('Ext.PagingToolbar', {
        store: store,
        displayInfo: true,
        displayMsg: 'Exibindo clientes {0} - {1} of {2}',
        emptyMsg: "Nenhum cliente"
    }),
    renderTo: 'clientes',
});

store.loadPage(1);

dbrin dbrin · Accepted Answer · 2011-12-08T07:03:07

The store needs the total count to calculate the paging parameters and to show the total. Your server side implementation must change to add that count with your data. Also load the data like this store.load(); instead of loadPage.

EDIT: you also have an extra comma here: renderTo: 'clientes', I would suggest running your code through JSLint.

Setting the reader on a extjs store

1 Answers