ext6.2 如何给树菜单添加滚动条

来源：互联网发布：如何创建网络销售平台编辑：程序博客网时间：2024/04/28 15:39

使用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                });            }        }    }

阅读全文

0 0