ExtJs 4.1 pagingtoolbar next and previous button not working

0
votes

I am using pagingtoolbar for one of my grid but only refresh and manually enter page number working. next and previous button of pagingtoolbar not working it's not triggering any event as i notice in firebug there is not any server call on click of buttons. so please help me to figure out what wrong with this buttons.

//paging tool bar added to grid 

dockedItems :[ {
                                            xtype : 'pagingtoolbar',
                                            store : 'Laborcosts',
                                            dock : 'bottom',
                                            displayInfo : true
                                        } ],

//Store

Ext.define('MD.store.Laborcosts', { 
extend : "Ext.data.Store",
storeID:'Laborcosts',       
model: 'MD.model.Laborcosts',
autoLoad: {start: 0, limit: 10},
remoteSort: true,
pageSize :10 ,
loadMask: true,
proxy: {
    type: 'rest',
     url: '../services/mdcat/laborcost/getLaborCostCDM',
    timeout: 300000,
    reader: {
        type: 'json',
        root: 'records',
        totalProperty: 'total'
    }
}
});

next /previous button event execute only when click on specific portion of bar mark in red

this is my observation: next /previous button event execute only when click on specific portion of bar i.e little bit below the next/previous button icon.
After lots of try i found that this behavior only for chrome in IE it's working fine. plz look into following toolbar source code inner element "button-1121-btnIconEl" render arrow image but its not fired click event in chrome. as per my understanding ext js click event bound to id "button-1121-btnEl". so plz help me to solve this problem why click event not fire on click of inner icon which is sub element of button. 

"<em id="button-1121-btnWrap"><button id="button-1121-btnEl" type="button" class="x-      btn-center" role="button" autocomplete="off" data-qtip="Next Page" style="height: 16px; "><span id="button-1121-btnInnerEl" class="x-btn-inner" style="">&nbsp;</span><span id="button-1121-btnIconEl" class="x-btn-icon x-tbar-page-next"></span></button></em>"
2
extjscross-browserextjs4.1

2 Answers

1
votes

Try to reference the store in the toolbar like this:

  store: this.store , //where this would point to grid (you would need to move the toolbar declaration into the initComponent method).

if that doesn't work try commenting out the 

 autoLoad: {start: 0, limit: 10},
0
votes

Finally solved - this issue due to my custom css 

.menubarCls .x-btn-default-toolbar-small-menu-active, .x-btn-default-toolbar-small-pressed
{
background-image:none !important;
border:none !important;
background-color:#91877B !important;
border-radius:0px !important;
padding:6px 15px 6px !important;
}

I have removed .x-btn-default-toolbar-small-pressed from above css and now pagingtoolbar working fine.