ext6.2 如何給樹選單新增滾動條
阿新 • • 發佈:2018-12-27
使用extjs6官方模板admin-dashboard的話 直接在main.js 裡直接加 滾動條的屬性 autoScroll:true,containerScroll : true, 是不管用的,
方法如下:xtype:mainContainerWrap 這個 替換成下面這個 從之前的一個整個大個面板變成2個小面板 讓 選單,和右邊的展示 獨立分開 這樣子就改變了之前 他們是用一個滾動條方式了
由於我用的自己的store 你需要改成自己的資料來源,{ //下方容器 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%' } }] }
下一步別忘了 還有縮小選單這個功能需要修改 因為之前原始碼在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 }); } } }