上面寫過,Extjs4如何自定義toolbar組件,現在寫一下Extjs3如何自定義toolbar組件,並且與後臺交互
/**
* 該擴展可以通過一定解析規則的json串生成菜單
* 通過itemclick事件調用點擊菜單項的監聽函數;
* 通過afterload事件調用菜單加載完畢後的監聽函數;
* 注意:使用該控件須確保父菜單code值小於子菜單
* 'code', 'name', 'url', 'leaf', 'enabled', 'parentcode', 'iconcls'
* code、parentcode都是編碼,通常來講這個菜單表都是開發人員手工寫入數據庫的
* name 對應菜單上的文字,leaf爲空字符串、false、0的時候表示該節點下面還有子節點
* enabled 字段目前還沒什麼用,可以無視
*
* iconcls 就是菜單文件前圖標的css樣式類
*
* 1.1修改:加載完成後清楚內置的父容器緩存
*
* @version 1.1 2014-1-15
* @author zhubl
*/
Ext.namespace("com.increase.cen");
com.increase.cen.MenuToolbar = Ext.extend(Ext.Toolbar, {
height: 25,
/**
* @cfg {root} store的root
*/
root: 'menus',
/**
* @cfg {split} 一級菜單之間是否用橫線間隔
*/
split: true,
/**
* @cfg {store} 讀取記錄的store 默認爲jsonstore
*/
/**
* @cfg {url} 用於讀取菜單記錄串的url
*/
url: 'main!getMenus.action',
initComponent: function(){
this.addEvents(
/**
* @event itemclick 菜單被點擊時觸發
*/
'itemclick',
/**
* @event afterload 菜單項加載完畢後觸發
*/
'afterload');
if (!this.store)
this.store = new Ext.data.JsonStore({
url: this.url,
root: this.root,
fields: ['code', 'name', 'url', 'leaf', 'enabled', 'parentcode', 'iconcls']
});
this.store.on('load', this.loadRecords, this);
this.store.load();
com.increase.cen.MenuToolbar.superclass.initComponent.call(this);
},
//private 遍歷records生成菜單
loadRecords: function(s, r, o){
this.menuCache = {};//對菜單(Menu)按照code進行緩存 code必須是唯一的!
this.store.sort('code');
s.each(function(record){
var parentCt = this.getParnetCt(record.get('parentcode'));
if (parentCt === this && this.split)
this.add('-');
if (!record.get('leaf')) {//是個菜單
var menu = new Ext.menu.Menu({
code: record.get('code')
});
parentCt.add({
text: record.get('name'),
iconCls: record.get('iconcls'),
menu: menu,
width: 100
});
this.menuCache[record.get('code')] = menu;
} else {
var item = new Ext.menu.Item({
text: record.get('name'),
code: record.get('code'),
url: record.get('url')
});
item.on('click', function(item){//註冊點擊事件監聽函數
reflash();
this.lastItem = item;
this.fireEvent('itemclick', this, item);
parent.Ext.getCmp("pnNorth").setTitle(" 網絡資源清查工具管理系統 -導航>>"+item.text);
parent.Ext.getCmp("pnCenterframe").body
.update("<iframe id='domainTreeIframe' src='"+item.url+"' scrolling='yes' width='100%' height='100%' frameborder='no' border='0' marginwidth='0' marginheight='0' align='center'></iframe>");
}, this);
parentCt.add(item);
}
}, this);
this.add('-');
delete this.menuCache;//沒用,不要了
this.doLayout();
this.fireEvent('afterload', this);
},
//private 根據parentcode獲取它的容器對象,parentcode不存在或是cache中找不到就返回toolbar對象
getParnetCt: function(parentcode){
if (!parentcode) { //parentcode爲空時父容器就是toolbar
return this;
}
return this.menuCache[parentcode] ? this.menuCache[parentcode] : this;
},
//根據item對象或者code屬性獲取它的的路徑
getItemPath: function(item){
var code = typeof item == 'string' ? item : item.code;
var record = this.store.getAt(this.store.find('code', code));
if (!record)
return;
var path = [];
while (record) {
path.push(record.get('name'));
index = this.store.find('code', record.get('parentcode'));
record = this.store.getAt(index);
}
path.reverse();
return path.join('-->');
},
//獲取最後一個被點擊的item
getLastItem: function(){
return this.lastItem;
},
load: function(){
this.store.load();
}
});
Ext.reg("MenuToolBar", com.increase.cen.MenuToolbar);