1. #1
    Sencha User
    Join Date
    Oct 2010
    Location
    Brazil - MG, Belo Horizonte
    Posts
    62
    Answers
    4
    Vote Rating
    0
    wallynm is on a distinguished road

      0  

    Question Answered: Can't make pager work

    Answered: Can't make pager work


    Hello guys, it should be a simple task, but i don't know why the pager on the grid don't work...
    Here's an screen shot to explain the problem

    problem.jpg

    As you can see, the data on the grid are displayed, and the JSON response from the server, has the total number of records found, BUT the problem, it's because the pager don't work properly. It show just one page, but it should have many more than one..

    This is my store code:

    Code:
    Ext.define('taskmag.store.Tarefas', {    extend: 'Ext.data.Store',
        model: 'taskmag.model.Tarefas',
        autoLoad: true,
    
    
        proxy: {
            type: 'ajax',
            actionMethods: {read : 'POST'},
            api: {
                read: baseurl+'tarefas/listagem',
                update: baseurl+'app/data/update.json',
            },
            
            reader: {
                type: 'json',
                root: 'rows',
                totalProperty: 'total'
            }
        }
    });
    Attached Images

  2. I need to warn you that in your Ext.define code for the grid, Arrays and Objects specified as a property can be shared (that's just how JavaScript works). You need to specify those kinds of things in a method like initComponent so that a fresh set of arrays and objects will be created for each instance. Also, scope in the methods are that of the instance so you should be able to get the store for the pager from this.store.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What version are you using? I have had no problems with paging toolbars
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Answers
    21
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    try to set "pageSize" in store

  5. #4
    Sencha User
    Join Date
    Oct 2010
    Location
    Brazil - MG, Belo Horizonte
    Posts
    62
    Answers
    4
    Vote Rating
    0
    wallynm is on a distinguished road

      0  

    Default


    Quote Originally Posted by vadimv View Post
    try to set "pageSize" in store
    I tryed it, but nothing... It changes the the showed rows correctly, but the pager still not working...

  6. #5
    Sencha User
    Join Date
    Oct 2010
    Location
    Brazil - MG, Belo Horizonte
    Posts
    62
    Answers
    4
    Vote Rating
    0
    wallynm is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    What version are you using? I have had no problems with paging toolbars
    I'm using Extjs Ext 4.0.7
    I should use 4.0?

    (Sorry about the double post, i did't remember to post all quetions in one post...)
    Last edited by wallynm; 17 Nov 2011 at 8:24 AM. Reason: Double post... T_T

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by wallynm View Post
    I'm using Extjs Ext 4.0.7
    Have you seen the example that comes with the zip you downloaded for 4.0.7? It's using paging and doesn't have this issue. Can you post some code?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #7
    Sencha User
    Join Date
    Oct 2010
    Location
    Brazil - MG, Belo Horizonte
    Posts
    62
    Answers
    4
    Vote Rating
    0
    wallynm is on a distinguished road

      0  

    Default


    I Think i had discouver my problem... But i don't know hot to get it working...
    in my view i put the pager:

    That's my view code:

    Code:
    Ext.define('taskmag.view.tarefas.Lista', {    extend: 'Ext.grid.Panel',
        alias: 'widget.grid-lista-tarefas',
        itemId: 'grid-lista-tarefas',
        id: 'grid-lista-tarefas',
        title: 'Tarefas do sistema',
        store: 'Tarefas',
        
        columns: [
            {header: 'Nome da tarefa',  dataIndex: 'nometarefa',  flex: 3},
            {header: 'Criador', dataIndex: 'criador', flex: 3},
            {header: 'Reponsável', dataIndex: 'codresponsavel', flex: 3},
            {header: 'Data de criação', dataIndex: 'datacriacao', flex: 2},
            {header: 'Data de início', dataIndex: 'datainicio', flex: 2},
            {header: 'Data de finalização', dataIndex: 'datafinalizacao', flex: 2},
            {header: 'Status', dataIndex: 'status', width:50}
        ],
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            items: [
                    { xtype: 'button', text: 'Adicionar' },
                    { xtype: 'button', text: 'Editar' },
                    { xtype: 'button', text: 'Deletar' }
                ]
            }
        ],
    
    
        // paging bar on the bottom
        bbar: Ext.create('Ext.PagingToolbar', {
            displayInfo: true,
            beforePageText: 'Página',
            afterPageText: 'de {0}',
            displayMsg: 'Exibinido {0} - {1} de {2}',
            emptyMsg: "Nenhum item para exibir"
        }),
        
        initComponent: function() {
            this.callParent(arguments);
            this.addEvents('browseuser');
        }
    });
    As i'm using MVC architeture, the store is on other file:
    Code:
    Ext.define('taskmag.store.Tarefas', {    extend: 'Ext.data.Store',
        model: 'taskmag.model.Tarefas',
        autoLoad: true,
        pageSize: 10,
        proxy: {
            type: 'ajax',
            actionMethods: {read : 'POST'},
            api: {
                read: baseurl+'tarefas/listagem',
                update: baseurl+'app/data/update.json',
            },
            
            reader: {
                type: 'json',
                root: 'rows',
                totalProperty: 'total'
            }
        }
    });

    On Sencha Docs has one example:
    http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Paging

    It creates the Store and put it on an var like that:
    Code:
    var store = Ext.create('Ext.data.Store', {    id:'simpsonsStore',
        autoLoad: false,
        fields:['name', 'email', 'phone'],
        pageSize: itemsPerPage, // items per page
        proxy: {
            type: 'ajax',
            url: 'pagingstore.js',  // url that will load data with respect to start and limit params
            reader: {
                type: 'json',
                root: 'items',
                totalProperty: 'total'
            }
        }
    });

    THEM he use the store var on the pager. I'm not using the config var of the pager store, i wasn't using it, now i know that the pager need to have an refference to know how much data, rows, etc it has to config correctly, but my problem is, im not putting my store into an var, How could i get its refference?

    When i need an component refference, i just use getCmp, but how to do it with an store?
    I think that is the problem

  9. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I need to warn you that in your Ext.define code for the grid, Arrays and Objects specified as a property can be shared (that's just how JavaScript works). You need to specify those kinds of things in a method like initComponent so that a fresh set of arrays and objects will be created for each instance. Also, scope in the methods are that of the instance so you should be able to get the store for the pager from this.store.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #9
    Sencha User
    Join Date
    Oct 2010
    Location
    Brazil - MG, Belo Horizonte
    Posts
    62
    Answers
    4
    Vote Rating
    0
    wallynm is on a distinguished road

      0  

    Default


    Nice!!!
    Now it had worked, as you said, configuring the bbar inside initComponent and setting store config to the same reference, now everything are fine!!!

    Thanks @mitchellsimoens
    Code:
    initComponent: function() {
            // paging bar on the bottom
            this.bbar = Ext.create('Ext.PagingToolbar', {
                store: this.store, // That was my problem!!!
                displayInfo: true,
                beforePageText: 'Página',
                afterPageText: 'de {0}',
                displayMsg: 'Exibinido {0} - {1} de {2}',
                emptyMsg: "Nenhum item para exibir"
            })
    Really thanks!
    Also, last question, why you warned me to put it inside initComponent?
    To access this.store from there or has another meaning that i didn't get?

  11. #10
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by wallynm View Post
    Nice!!!
    Now it had worked, as you said, configuring the bbar inside initComponent and setting store config to the same reference, now everything are fine!!!

    Thanks @mitchellsimoens
    Code:
    initComponent: function() {
            // paging bar on the bottom
            this.bbar = Ext.create('Ext.PagingToolbar', {
                store: this.store, // That was my problem!!!
                displayInfo: true,
                beforePageText: 'Página',
                afterPageText: 'de {0}',
                displayMsg: 'Exibinido {0} - {1} de {2}',
                emptyMsg: "Nenhum item para exibir"
            })
    Really thanks!
    Also, last question, why you warned me to put it inside initComponent?
    To access this.store from there or has another meaning that i didn't get?
    Two reasons... you can access this.store but your paging toolbar would be shared across all instances of your taskmag.view.tarefas.Lista class which could lead you into problems later on.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 2

Tags for this Thread