Extjs6（四）——側邊欄導航根據路由跳轉頁面

本文基於ext-6.0.0

　　之前做的時候這個側邊欄導航是通過tab切換來切換頁面的，但是總感覺不太對勁，現在終於發現怎么通過路由跳轉了，分享給大家，可能有些不完善的地方，望大家讀后可以給些指點。歡迎留言！

　　另：這篇是接着上一篇的側邊欄寫的，最好先看一下上一篇Extjs6（三）——用extjs6.0寫一個簡單頁面。

 

　　先看一下效果，如下圖：

　　　　

　　　　

一、寫頁面的中間部分treesCenter.js

　　treesCenter.js

Ext.define('Learning.view.treelearn.region.treesCenter', {  
    extend: 'Ext.panel.Panel',  
    xtype: 'treesCenter',  
    autoScroll: true  
});  

　　別忘了把它引用到頁面中（下面的寫在trees.js里面）

　　　　{
            reference:'treesCenter',
            xtype:'treesCenter',
            region :'center',
            collapsible: false,
            split: false,
        },

 

二、treeController.js

　　1、指明要控制的組件

　　　  在選擇改變時，調用onTreeNavSelectionChange

　　control: {  
            'treesLeft': {//組件別名，表示要控制的是該組件  
            selectionchange: 'onTreeNavSelectionChange'  
        }  
    }, 

　　2、寫onTreeNavSelectionChange

　　　　redirectTo方法是用來更新Hash的，例如this.redirectTo('user/1234')，會更新 Hash 為 "#user/1234" ；更新的Hash與當前值相同時，redirectTo方法返回false，不會更新Hash。

　　　　id是寫在data.json里，就是上一篇側邊欄的數據

　　onTreeNavSelectionChange: function(selModel, records) {  
        var record = records[0];  
        if (record) {  
            this.redirectTo(record.getId()); 
            alert(record.getId()) 
        }  
    },

 　　

　　現在看一下效果，點擊側邊欄任意一個，會彈出相應的id，如下圖：

　　

 

 3、routes 配置

　　我們使用的路由是  /#id  ，如：  

　　“：id”中的這個id是參數，這個參數會傳入handleRoute。

　　routes  : {  
        ':id': 'handleRoute',//執行跳轉          
    },

 

4、寫handleRoute

　　①先聲明一些變量

　　②響應路由，左側樹定位到相應節點，把中間面板treesCenter清空

　　③如果是葉子結點，就把id對應的頁面放到treesCenter中顯示出來（id一定要和子頁面的xtype一致）

handleRoute : function(id) {  
        var me = this,  
            treeView = me.getView(),  
            treesLeft = treeView.down('treesLeft'), 
            treesCenter = treeView.down('treesCenter'), 
            store = treesLeft.getStore(),  
            node = store.getNodeById(id),
            className,cmp,ViewClass;  
      
        //響應路由，左側樹定位到相應節點  
        treesLeft.getSelectionModel().select(node);  
        treesLeft.getView().focusNode(node); 

        treesCenter.removeAll(true);  
        if (node.isLeaf()) {  
            className = Ext.ClassManager.getNameByAlias('widget.' + id);  
            cmp = Ext.create(className);  
            treesCenter.add(cmp);  
        }  
    }, 

 

 三、子頁面

　　子頁面隨便寫什么都可以，這里就用生成項目時自帶的那個List.js吧。

　　List.js的xtype是mainlist，就在data.json中寫

{
    id: 'mainlist',
    text: 'list',
    leaf: true
},

 

到此，就可以得到文初的效果了。

 

 完。---------------------------------------------

昨天寫的沒保存，你說氣不氣嘛╭(╯^╰)╮