2013-10-25 96 views
0

我正在爲我的一個網格使用pagingtoolbar,但只刷新並手動輸入工作頁碼。 pagingtoolbar的下一個和上一個按鈕不起作用它不會觸發任何事件,因爲我注意到在螢火蟲中沒有任何服務器通話按鈕。 所以請幫我弄清楚這個按鈕有什麼問題。ExtJs 4.1 pagingtoolbar下一個和上一個按鈕不起作用

//分頁工具欄添加到電網

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

//商店

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

這是我的觀察:一個/上一個按鈕事件只執行當點擊具體欄的一部分,即在下一個/上一個按鈕圖標下方一點點。
經過大量的嘗試,我發現這種行爲只適用於IE中的Chrome,它工作正常。 PLZ查看以下工具欄源代碼內部元素「button-1121-btnIconEl」呈現箭頭圖像,但它沒有在Chrome中觸發點擊事件。根據我的理解ext js單擊事件綁定到id「button-1121-btnEl」。 所以plz幫助我解決這個問題,爲什麼點擊事件不點擊內部圖標是點擊按鈕的子元素。

"<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>" 

回答

1

嘗試引用商店在工具欄上是這樣的:

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

如果不行嘗試註釋掉

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

終於解決了 - 這個問題是由於到我的自定義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; 
} 

我已經刪除.x-btn-default-toolbar-small-pressed從上面的CSS和現在pagingtoolbar工作正常。

相關問題