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

在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
                });
            }
        }
    }



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值