最近很不幸的又是臨危受命去改版別人的東西,這次是POS
POS的東西有一項很重要的特性就是所有的按鍵都要大
其中Grid的列要如何加大,加高,這請自己去查
今天要講的是pagingtoolbar的問題
pagingtoolbar的「重新整理」這按鈕要怎麼查出來?
先看「錯誤示範」
=============================================
var grid = Ext.create('Ext.grid.Panel', {
...
...
...
//這裡先不做dockedItems設定
}
var otherButton={.....} //定義一個要在pagingToolBar加入的其他功能按鈕
//在gird外面宣告一個paging Tool bar
var pgToolbar = {
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true,
height:40,
items:[ otherButton ]
}
//放進 gird中
grid.addDocked(pgToolbar);
//這樣看起來看正常,是吧?
//接著,我們要把「重新整理」按鍵隱藏起來,不讓user去按
pgToolbar.down('#refresh').hide(); <--注意,這裡就會出現pgToolbar error:沒有「.down」方法函數
//這下子,志明跟春嬌的故事就演不下去了!!
================================================
要怎麼做才是正確的呢?
以下才是正確的方法:
=============================================
var grid = Ext.create('Ext.grid.Panel', {
...
...
...,
width: 735,
minHeight: 300,
//這時就要先放進grid中了
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
displayInfo: true,
dock: 'bottom',
height:40,
items: [
//在paging tool bar加上其他我們要用的動作鈕
{
xtype: 'button',
margin: '0 0 0 30',
text: '關閉',
handler: function () {
.....
}
}
]
}]
}
//宣告完了,現在,就可以找出「重新整理 」按鍵做隱藏動作了
grid.down('#refresh').hide(); <---這樣,就達成我們要的目的了
======================================================
其他的修改icon的動作也是如此,舉例吧
===================================
var btnNext = grid.down('#next');
btnNext.minWidth = 32;
btnNext.minHeight = 32;
btnNext.setText('');
btnNext.setIcon('');
btnNext.iconCls = null;
btnNext.cls = 'pagingToolBarBtnNext';
================================
(上例是你已定義一個css pagingToolBarBtnNext class,像是以下的玩意
.pagingToolBarBtnNext {
background-image: url('......../ToNext.png') !important;
}
)
以上,大家加油吧
