首先利用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("錯誤 ","該檢視不存在");
                        }
                    }
               }

至此，完成選單的展示和響應了。（在事件中只完成了一個，其他的操作時一樣的。在完善之後，可以針對程式碼的重用性等方面做處理）

PS：之後的功能設計中，會發現很多的功能都是重複出現的，就可以考慮建立檢視時通過繼承的方式來實現，而不需要過多的重複。