ExtJS5 實現樹形選單
阿新 • • 發佈:2019-01-05
首先利用sencha建立extjs的工程,然後是對頁面頂部和底部佈局的新增以及按鈕的美化,因為只要記錄的是選單的生成,就不記錄了。
具體工程我會上傳,因為是自己練練手的東西,所以寫的很雜。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
接下來開始建我們的樹形選單。
首先在mainmodel.js的data中增加資料。
NavigationMenu : [{ text : '工程管理', // 選單項的名稱 icon : '', // 選單頂的圖示地址 glyph : 0,// 選單項的圖示字型的數值 expanded : true, // 在樹形選單中是否展開 description : '', // 選單項的描述 items : [{ text : '工程專案', // 選單條的名稱 module : 'Global', // 對應模組的名稱 icon : '', // 選單條的圖示地址 glyph : 0xf0f7 // 選單條的圖示字型 }, { text : '工程標段', module : 'Project', icon : '', glyph : 0xf02e }] }, { text : '合同管理', expanded : true, items : [{ text : '專案合同', module : 'Agreement', glyph : 0xf02d }, { text : '合同付款計劃', module : 'AgreementPlan', glyph : 0xf03a }, { text : '合同請款單', module : 'Payment', glyph : 0xf022 }, { text : '合同付款單', module : 'Payout', glyph : 0xf0d6 }, { text : '合同發票', module : 'Invoice', glyph : 0xf0a0 }] }, { text : '綜合查詢', glyph : 0xf0ce, expanded : true, items : [{ text : '專案合同臺帳', module : 'Agreement', glyph : 0xf02d }, { text : '合同付款計劃臺帳', module : 'AgreementPlan', glyph : 0xf03a }, { text : '合同請款單臺帳', module : 'Payment', glyph : 0xf022 }, { text : '合同付款單臺帳', module : 'Payout', glyph : 0xf0d6 }, { text : '合同發票臺帳', module : 'Invoice', glyph : 0xf0a0 }] }]
隨後,新建mainmenutree.js的檢視,用於編寫選單。
mainmenutree.js繼承自Ext.panel.Panel,使用initComponent 方法擴充套件元件,同時在使用initComponent 時必須要呼叫this.callParent(),否則會導致不能初始化。
隨後在initComponent方法中進行操作。
1、獲得當前view物件
Var me = this;
2、獲得在model中定義的資料集
Var menus = this.getViewModel().get('NavigationMenu');
3、迴圈該資料集,遍歷所有items物件。
(對於一層樹形選單,只有一個根節點,其他均為葉子節點;對於多層樹形選單而言,存在一個根節點,多個節點和葉子節點。使用遞迴的思想,一棵樹可以是另一棵樹的子節點。)
for(var i in menus){ var menugroup = menus[i]; //取得一個組 var groupPanel = Ext.create('Ext.tree.TreePanel',{ expanded:false, store:makeTreeStore(menugroup), listeners:{ select:'onclickListener' } }); me.items.push(groupPanel) }
4、對3中的store操作,即得到一個組的完整的樹。然後把這個數當做根節點上的一部分新增上去。
function makeTreeStore(group){
var storeTree = Ext.create('Ext.data.TreeStore',{
root:{
text:group.text,
expanded:false,
id:group.text
}
});
var root = storeTree.getRootNode();
var menuItems = group.items;
for(var i in menuItems){
var item = menuItems[i];
var childNode = Ext.apply({},{
text:item.text,
leaf:1,
moduleId:item.module,
moduleName:item.text
});
root.appendChild(childNode);
}
return storeTree;
}=
至此,已經可以完成頁面的展示了,接下來我們進行點選事件的監聽
在步驟三中我們定義了Listener監聽事件,隨後在controller.js中完成這個時間的邏輯處理。
onclickListener : function(tree,record,index,eOpts){
if(index!=0){
if("Global"===(record.get('moduleId'))){
//根據ID去取得元件
var centerPanel = Ext.getCmp('center-panel');
//動態建立新檢視(create使用全名,widget使用xtype)
var Global = Ext.create('app.view.demo1.demo1view');
//移除元件上的檢視
centerPanel.removeAll(true);
//將新檢視新增
centerPanel.add(Global);
//更改標題
var title = record.get('text');
centerPanel.setTitle(title);
} else if("Global"===(record.get('moduleId'))){
//其他判斷
}else{
Ext.Msg.alert("錯誤 ","該檢視不存在");
}
}
}