1，效果如图
2，思路 将左侧每一块锚点内容区域的 reference 与 右侧 的 导航栏的 每一个节点的 itemId 对应 点击导航栏节点的时候 获取 响应的 锚点区域相对于容器顶部的距离 然后设置视窗的滚动距离
3，主要代码
/**
* Created by Sukla on 2017/12/6.
*/
Ext.define('app.view.common.anchorNav', {
extend: 'Ext.Container',
alias: 'widget.anchor-nav',
controller:'anchornavcontroller',
layout: {
type: 'border'
},
viewModel: {
data: {
progressvalue: 0.8,
companyname: '标题',
imgsrc:'resources/images/khjz/company/sukla.jpg'
}
},
items: [
{
region: 'north',
height: 120,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
height: 70,
layout: {
type: 'hbox'
},
items: [
{
width: 250,
margin: '20 0 0 10',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'textfield',
flex: 1,
emptytext: '请输入检索条件'
},
{
xtype: 'button',
width: 70,
text: '查询'
}
]
},
{
flex: 1
},
{
width: 160,
margin: '15 10 0 0',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'label',
text: '资料完善比例'
},
{
xtype: 'progressbarwidget',
bind: {
value: '{progressvalue}'
},
textTpl: [
'{percent:number("0")}%'
]
}
]
}
]
},
{
height: 50,
cls: 'myanchor-company-title',
bind: {
html: '{companyname}'
}
}
]
},
{
region: 'east',
scrollable:true,
width: 160,
cls: 'myanchor-nav-btn-view ',
defaults: {
layout: {
type: 'vbox',
align: 'stretch'
}
},
items: [
{
items: [
{
xtype: 'button',
textAlign: 'left',
cls: 'my-goto-anchor-btn myanchor-item-btn',
handler:'goToAnchor',
text: '1 点击到锚点',
itemId:'myanchor-item-001'
},
{
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype: 'button',
text: '1 锚点',
textAlign: 'left',
cls: 'my-goto-anchor-btn',
handler:'goToAnchor'
},
items: [
{
text:'1.1 点击到锚点',
itemId:'myanchor-leaf-item-101'
},
{
text:'1.2 点击到锚点',
itemId:'myanchor-leaf-item-102'
},
{
text:'1.3 点击到锚点',
itemId:'myanchor-leaf-item-103'
},
{
text:'1.4 点击到锚点',
itemId:'myanchor-leaf-item-104'
}
]
}
]
},
{
items: [
{
xtype: 'button',
textAlign: 'left',
cls: 'my-goto-anchor-btn myanchor-item-btn',
handler:'goToAnchor',
text: '2 点击到锚点',
itemId:'myanchor-item-002'
},
{
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype: 'button',
text: '1 锚点',
textAlign: 'left',
cls: 'my-goto-anchor-btn',
handler:'goToAnchor'
},
items: [
{
text:'2.1 点击到锚点',
itemId:'myanchor-leaf-item-201'
},
{
text:'2.2 点击到锚点',
itemId:'myanchor-leaf-item-202'
},
{
text:'2.3 点击到锚点',
itemId:'myanchor-leaf-item-203'
}
]
}
]
},
{
items: [
{
xtype: 'button',
textAlign: 'left',
cls: 'my-goto-anchor-btn myanchor-item-btn',
handler:'goToAnchor',
text: '3 点击到锚点',
itemId:'myanchor-item-003'
},
{
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype: 'button',
text: '1 锚点',
textAlign: 'left',
cls: 'my-goto-anchor-btn',
handler:'goToAnchor'
},
items: [
{
text:'3.1 点击到锚点',
itemId:'myanchor-leaf-item-301'
},
{
text:'3.2 点击到锚点',
itemId:'myanchor-leaf-item-302'
}
]
}
]
},
{
items: [
{
xtype: 'button',
textAlign: 'left',
cls: 'my-goto-anchor-btn myanchor-item-btn',
handler:'goToAnchor',
text: '4 点击到锚点',
itemId:'myanchor-item-004'
},
{
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype: 'button',
text: '1 锚点',
textAlign: 'left',
cls: 'my-goto-anchor-btn',
handler:'goToAnchor'
},
items: [
{
text:'4.1 点击到锚点',
itemId:'myanchor-leaf-item-401'
},
{
text:'4.2 点击到锚点',
itemId:'myanchor-leaf-item-402'
},
{
text:'4.3 点击到锚点',
itemId:'myanchor-leaf-item-403'
},
{
text:'4.4 点击到锚点',
itemId:'myanchor-leaf-item-404'
},
{
text:'4.5 点击到锚点',
itemId:'myanchor-leaf-item-405'
},
{
text:'4.6 点击到锚点',
itemId:'myanchor-leaf-item-406'
}
]
}
]
}
]
},
{
region: 'center',
reference:'anchorcenter',
scrollable:true,
defaults:{
layout: {
type: 'vbox',
align: 'stretch'
}
},
items: [
{
reference:'myanchor-item-001',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'1'
}
},
items: [
{
cls: 'myanchor-center-item',
layout: {
type: 'hbox',
align: 'stretch'
},
height: 30,
items: [
{
width: 250,
bind:{
html: '<h3 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h3>'
}
},
{
flex: 1
}
]
},
{
padding:'10 0 0 30',
defaults:{
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
cls: 'myanchor-center-item',
layout: {
type: 'hbox',
align: 'stretch'
},
height: 30,
items: [
{
width: 250,
bind:{
html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>'
}
},
{
flex: 1
},
{
width: 70,
xtype: 'button',
bind:{
text: '编辑{myanchorindex}'
}
}
]
},
{
height:200,
bind:{
html:'{myanchorindex}'
}
}
]
},
items: [
{
reference:'myanchor-leaf-item-101',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'1.1'
}
},
items: [
{
cls: 'myanchor-center-item',
layout: {
type: 'hbox',
align: 'stretch'
},
height: 30,
items: [
{
width: 250,
bind:{
html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>'
}
},
{
flex: 1
},
{
width: 70,
xtype: 'button',
bind:{
text: '编辑{myanchorindex}'
}
}
]
},
{
layout:{
type:'hbox',
align:'stretch'
},
padding:10,
items:[
{
width:100,
bind:{
html: '<img style="display:block;margin:0 auto;width:100%;height:100px" src = "{imgsrc}">'
}
},
{
xtype:'form',
flex:1,
layout:{
type:'table',
columns:3,
tableAttrs: {
style: {
width: '100%'
}
}
},
defaults:{
xtype:'textfield',
fieldLabel:'字段',
labelAlign:'right',
labelWidth:70,
width:'100%'
},
items:[
{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},
{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},
{
fieldLabel:'字段'
},{
fieldLabel:'字段',
colspan:2
},
{
fieldLabel:'字段',
colspan:2
},{
fieldLabel:'字段'
},
{
fieldLabel:'字段',
colspan:3
}
]
}
]
}
]
},
{
reference:'myanchor-leaf-item-102',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'1.2'
}
},
items: [
{
cls: 'myanchor-center-item',
layout: {
type: 'hbox',
align: 'stretch'
},
height: 30,
items: [
{
width: 250,
bind:{
html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>'
}
},
{
flex: 1
},
{
width: 70,
xtype: 'button',
bind:{
text: '编辑{myanchorindex}'
}
}
]
},
{
layout:{
type:'hbox',
align:'stretch'
},
padding:10,
items:[
{
width:100,
bind:{
html: '<img style="display:block;margin:0 auto;width:100%;height:100px" src = "{imgsrc}">'
}
},
{
xtype:'form',
flex:1,
layout:{
type:'table',
columns:3,
tableAttrs: {
style: {
width: '100%'
}
}
},
defaults:{
xtype:'textfield',
fieldLabel:'字段',
labelAlign:'right',
labelWidth:70,
width:'100%'
},
items:[
{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},
{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},
{
fieldLabel:'字段'
},{
fieldLabel:'字段',
colspan:2
},
{
fieldLabel:'字段',
colspan:2
},{
fieldLabel:'字段'
},
{
fieldLabel:'字段',
colspan:3
}
]
}
]
}
]
},
{
reference:'myanchor-leaf-item-103',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'1.3'
}
},
items: [
{
cls: 'myanchor-center-item',
layout: {
type: 'hbox',
align: 'stretch'
},
height: 30,
items: [
{
width: 250,
bind:{
html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>'
}
},
{
flex: 1
},
{
width: 70,
xtype: 'button',
bind:{
text: '编辑{myanchorindex}'
}
}
]
},
{
layout:{
type:'hbox',
align:'stretch'
},
padding:10,
items:[
{
width:100,
bind:{
html: '<img style="display:block;margin:0 auto;width:100%;height:100px" src = "{imgsrc}">'
}
},
{
xtype:'form',
flex:1,
layout:{
type:'table',
columns:3,
tableAttrs: {
style: {
width: '100%'
}
}
},
defaults:{
xtype:'textfield',
fieldLabel:'字段',
labelAlign:'right',
labelWidth:70,
width:'100%'
},
items:[
{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},
{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},
{
fieldLabel:'字段'
},{
fieldLabel:'字段',
colspan:2
},
{
fieldLabel:'字段',
colspan:2
},{
fieldLabel:'字段'
},
{
fieldLabel:'字段',
colspan:3
}
]
}
]
}
]
},
{
reference:'myanchor-leaf-item-104',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'1.4'
}
},
items: [
{
cls: 'myanchor-center-item',
layout: {
type: 'hbox',
align: 'stretch'
},
height: 30,
items: [
{
width: 250,
bind:{
html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>'
}
},
{
flex: 1
},
{
width: 70,
xtype: 'button',
bind:{
text: '编辑{myanchorindex}'
}
}
]
},
{
layout:{
type:'hbox',
align:'stretch'
},
padding:10,
items:[
{
width:100,
bind:{
html: '<img style="display:block;margin:0 auto;width:100%;height:100px" src = "{imgsrc}">'
}
},
{
xtype:'form',
flex:1,
layout:{
type:'table',
columns:3,
tableAttrs: {
style: {
width: '100%'
}
}
},
defaults:{
xtype:'textfield',
fieldLabel:'字段',
labelAlign:'right',
labelWidth:70,
width:'100%'
},
items:[
{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},
{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},{
fieldLabel:'字段'
},
{
fieldLabel:'字段'
},{
fieldLabel:'字段',
colspan:2
},
{
fieldLabel:'字段',
colspan:2
},{
fieldLabel:'字段'
},
{
fieldLabel:'字段',
colspan:3
}
]
}
]
}
]
}
]
}
]
},
{
reference:'myanchor-item-002',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'2'
}
},
items: [
{
cls: 'myanchor-center-item',
layout: {
type: 'hbox',
align: 'stretch'
},
height: 30,
items: [
{
width: 250,
bind:{
html: '<h3 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h3>'
}
},
{
flex: 1
}
]
},
{
padding:'10 0 0 30',
defaults:{
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
cls: 'myanchor-center-item',
layout: {
type: 'hbox',
align: 'stretch'
},
height: 30,
items: [
{
width: 250,
bind:{
html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>'
}
},
{
flex: 1
},
{
width: 70,
xtype: 'button',
bind:{
text: '编辑{myanchorindex}'
}
}
]
},
{
height:200,
bind:{
html:'{myanchorindex}'
}
}
]
},
items: [
{
reference:'myanchor-leaf-item-201',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'2.1'
}
}
},
{
reference:'myanchor-leaf-item-202',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'2.2'
}
}
},
{
reference:'myanchor-leaf-item-203',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'2.3'
}
}
}
]
}
]
},
{
reference:'myanchor-item-003',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'3'
}
},
items: [
{
cls: 'myanchor-center-item',
layout: {
type: 'hbox',
align: 'stretch'
},
height: 30,
items: [
{
width: 250,
bind:{
html: '<h3 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h3>'
}
},
{
flex: 1
}
]
},
{
padding:'10 0 0 30',
defaults:{
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
cls: 'myanchor-center-item',
layout: {
type: 'hbox',
align: 'stretch'
},
height: 30,
items: [
{
width: 250,
bind:{
html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>'
}
},
{
flex: 1
},
{
width: 70,
xtype: 'button',
bind:{
text: '编辑{myanchorindex}'
}
}
]
},
{
height:200,
bind:{
html:'{myanchorindex}'
}
}
]
},
items: [
{
reference:'myanchor-leaf-item-301',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'3.1'
}
}
},
{
reference:'myanchor-leaf-item-302',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'3.2'
}
}
}
]
}
]
},
{
reference:'myanchor-item-004',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'4'
}
},
items: [
{
cls: 'myanchor-center-item',
layout: {
type: 'hbox',
align: 'stretch'
},
height: 30,
items: [
{
width: 250,
bind:{
html: '<h3 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h3>'
}
},
{
flex: 1
}
]
},
{
padding:'10 0 0 30',
defaults:{
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
cls: 'myanchor-center-item',
layout: {
type: 'hbox',
align: 'stretch'
},
height: 30,
items: [
{
width: 250,
bind:{
html: '<h4 class="myanchor-item-title"><span>{myanchorindex}</span>{myanchortitle}</h4>'
}
},
{
flex: 1
},
{
width: 70,
xtype: 'button',
bind:{
text: '编辑{myanchorindex}'
}
}
]
},
{
height:200,
bind:{
html:'{myanchorindex}'
}
}
]
},
items: [
{
reference:'myanchor-leaf-item-401',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'4.1'
}
}
},
{
reference:'myanchor-leaf-item-402',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'4.2'
}
}
},
{
reference:'myanchor-leaf-item-403',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'4.3'
}
}
},
{
reference:'myanchor-leaf-item-404',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'4.4'
}
}
},
{
reference:'myanchor-leaf-item-405',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'4.5'
}
}
},
{
reference:'myanchor-leaf-item-406',
viewModel:{
data:{
myanchortitle:'锚点',
myanchorindex:'4.6'
}
}
}
]
}
]
}
]
}
]
})/**
* Created by Sukla on 2017/12/6.
*/
Ext.define('app.view.common.anchorNav.AnchorNavController',{
extend:'Ext.app.ViewController',
alias: 'controller.anchornavcontroller',
goToAnchor: function (btn) {
var targetTop = 0;
var isleaf=btn.itemId.split('-leaf-').length==2?true:false;
if (this.getView().lookupReference(btn.itemId)) {
targetTop = this.getView().lookupReference(btn.itemId).el.dom.offsetTop;
if(isleaf){
targetTop+=this.getView().lookupReference(btn.itemId).ownerCt.ownerCt.el.dom.offsetTop;
}
}
console.log(targetTop);
var scrollId = this.getView().lookupReference('anchorcenter').el.dom.id + '-body';
document.getElementById(scrollId).scrollTop = targetTop;
}
5，样式表
//锚点导航
.myanchor-nav-btn-view {
padding: 20px 0 0 0 !important;
background-color: #fff !important;
background-image: url(images/khjz/icon-line-bg.png) !important;
background-size: 9px 9px;
background-repeat: repeat-y;
background-position: 30px 20px;
}
.my-goto-anchor-btn {
height:30px;
padding: 0 0 0 55px !important;
background-color: transparent !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
color: #333 !important;
background-image: url(images/khjz/my-goto-anchor.gif) !important;
background-size: 40px 20px;
background-repeat: no-repeat;
background-position: 0 center;
}
.my-goto-anchor-btn.x-btn-focus {
background-image: url(images/khjz/my-goto-anchor-focus.gif) !important;
}
.my-goto-anchor-btn .x-btn-inner {
color: inherit;
}
.myanchor-item-btn .x-btn-inner {
font-weight: bold;
font-size: 14px;
margin-left: -12px;
}
.myanchor-nav-btn-view .x-panel-body-default, .myanchor-company-title .x-panel-body-default {
background-color: transparent !important;
}
.myanchor-company-title .x-panel-body-default {
font-size: inherit;
font-weight: inherit;
}
.myanchor-company-title {
background-color: #efefef !important;
text-align: center;
line-height: 50px;
font-size: 20px !important;
font-weight: bold !important;
}
.myanchor-center-item .myanchor-item-title {
margin: 0;
padding: 0;
font-weight: bold;
line-height: 30px;
}
.myanchor-center-item .myanchor-item-title span {
display: inline-block;
background-color: dodgerblue;
color: #ffffff;
margin-right: 10px;
min-width: 30px;
text-align: center;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar{
width:10px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
background:#fff;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:2px;
background:#e1edec;
}
::-webkit-scrollbar-thumb:window-inactive {
background:#e1edec;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
