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

最新推荐文章于 2024-04-05 22:49:40 发布

原创最新推荐文章于 2024-04-05 22:49:40 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

ext6 专栏收录该内容

18 篇文章

订阅专栏

在ExtJS6.2中，若使用admin-dashboard模板并希望为树菜单添加滚动条，直接设置autoScroll和containerScroll属性无效。解决方法是将xtype: mainContainerWrap替换为两个独立的小面板，使菜单与右侧展示区分离，各自拥有独立的滚动条。同时，由于结构变化，原有的onToggleNavigationSize函数需调整，以适应新的布局需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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