1. 程式人生 > >ext6.2 如何給樹選單新增滾動條

ext6.2 如何給樹選單新增滾動條

使用extjs6官方模板admin-dashboard的話 直接在main.js 裡直接加 滾動條的屬性 autoScroll:true,containerScroll : true, 是不管用的,

方法如下:xtype:mainContainerWrap 這個 替換成下面這個 從之前的一個整個大個面板變成2個小面板 讓 選單,和右邊的展示 獨立分開 這樣子就改變了之前 他們是用一個滾動條方式了 

{
            //下方容器
            xtype: 'container',
            id: 'main-view-detail-wrap',
            reference: 'mainContainerWrap',
            flex: 1,
            layout: {
                type: 'hbox',
                //是否支援動畫效果
                //用於支援選單欄摺疊/展開動畫效果
                animate: true,
                animatePolicy: {
                    x: true,
                    width: true
                }
            },
            items: [{
                //導航選單模組
                //導航欄與右側容器的滾動條相互獨立,互不干涉
                height: '100%',
                scrollable: 'y',
                reference: 'navigationContainer',
                cls: 'navigationContainer',
                xtype: 'container',
                width: 250,
                //container套panle用以支援獨立滾動條
                items: [{
                  xtype: 'treelist',
                  reference: 'navigationTreeList',
                  itemId: 'navigationTreeList',                
                  ui: 'navigation',
                  store: 'NavigationTree',                 
                  autoScroll:true,
                  containerScroll : true,
                  width: 250,
                  height:'100%',
                  expanderFirst: false,
                  expanderOnly: false,
                  listeners: {
                      selectionchange: 'onNavigationTreeSelectionChange'
                  }
              }]
            },
            {
              xtype: 'container',
              flex: 1,
              reference: 'mainCardPanel',
              cls: 'sencha-dash-right-main-container',
              itemId: 'contentPanel',
              layout: {
                  type: 'card',
                  anchor: '100%'
              }
          }]
        }
由於我用的自己的store 你需要改成自己的資料來源,

下一步別忘了 還有縮小選單這個功能需要修改 因為之前原始碼在MainController裡的函式 onToggleNavigationSize 是會出現問題的 由於結構的改變找不到原先的屬性了,這個函式需要修改成 如下

 //摺疊或展開導航樹
    onToggleNavigationSize: function () {
        var me = this,
        //獲取引用物件
        refs = me.getReferences(),
        //導航選單
        navigationList = refs.navigationTreeList,
        //導航選單容器
        navigationContainer = refs.navigationContainer,
        //下方容器
        wrapContainer = refs.mainContainerWrap,
        //導航選單是否摺疊
        collapsing = !navigationList.getMicro(),
        new_width = collapsing ? 64 : 250;

        if (Ext.isIE9m || !Ext.os.is.Desktop) {
            //ie9以及其他低版本瀏覽器處理邏輯
            //停止佈局處理
            Ext.suspendLayouts();
            // 動態設定頂部Ico寬度
            refs.senchaLogo.setWidth(new_width);
            //動態控制左側導航欄寬度
            navigationContainer.setWidth(new_width);
            navigationList.setWidth(new_width);
            //設定選單欄摺疊狀態
            navigationList.setMicro(collapsing);
            //恢復佈局
            Ext.resumeLayouts(); // do not flush the layout here...
            // 低版本瀏覽無動畫效果
            wrapContainer.layout.animatePolicy = wrapContainer.layout.animate = null;
            //下方容器重新佈局
            wrapContainer.updateLayout(); // ... since this will flush them
        } else {
            if (!collapsing) {
                //如果是展開狀態,調整樹形導航欄樣式
                navigationList.setWidth(new_width);
                navigationList.setMicro(false);
            }
            navigationList.canMeasure = false;

            // 動態設定頂部Ico樣式
            refs.senchaLogo.animate({
                dynamic: true,
                to: {
                    width: new_width
                }
            });
            //動態控制左側導航欄寬度
            navigationContainer.width = new_width;
            navigationList.width = new_width;
            //更新父容器佈局
            wrapContainer.updateLayout({
                isRoot: true
            });
            //增加動畫效果
            navigationList.el.addCls('nav-tree-animating');

            //摺疊時處理邏輯
            if (collapsing) {
                navigationContainer.on({
                    afterlayoutanimation: function () {
                        //如果是摺疊狀態,調整樹形導航欄樣式
                        navigationList.setMicro(true);
                        navigationList.setWidth(new_width);
                        navigationList.el.removeCls('nav-tree-animating');
                        navigationList.canMeasure = true;
                    },
                    single: true
                });
            }
        }
    }