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