支持导航滚动的Extjs实现

导航滚动组件的形式参考百度百科：
http://baike.baidu.com/subview/837441/10940762.htm


它由导航条和可滚动内容两者构成。

它具有以下3个特点：

1. 导航条本身是位置固定（Dock）或浮动的；

2. 点击导航条button，内容区会滚动到相应位置；

3. 在内容区滚动，导航条会自动active当前位置对应的button；

此形式的JQuery实现有很多，比如这个Scrollit.js

http://www.bytemuse.com/scrollIt.js/

相比较常见的标签页（tab）形式，两者都能快速地定位内容，导航滚动具备的最大优势是：

它可以更好地适应不同的屏幕分辨率，更高的屏幕高度，每屏可浏览更多内容。

ExtJS官方本身没有提供这种内容组织形式，但是在ExtJS提供的丰富的基础组件和开放的扩展机制上，实现这种形式并不难。我的实现思路如下：

1. 采用tabbar作为导航条；

2.调用函数scrollIntoView实现点击按钮，滚动到指定位置；

3.响应内容区的scroll事件，active对应的导航按钮；

实现效果如下：



点击按钮“Panel2”滚动



鼠标滚动内容区，滚动到显示Panel3的位置，导航按钮自动active“Panel3”



代码如下：

/**
* Demonstrates usage of navbar.
*/
Ext.define('DCApp.view.navpanel', {
extend: 'Ext.panel.Panel',
xtype: 'navpanel',
layout: {
type: 'fit',
pack: 'start',
align: 'stretch'
},

bodyPadding: 10,
width: 500,
height: 400,

items: [
{
id:'panel0',
listeners: {
render: function(p){
p = p.getEl();
var me= this.up();
me.h0=p.getHeight();
p.on('scroll', function(e, t){
//console.log(t.scrollTop +"   "+ t.clientHeight);
me.onscroll(t.scrollTop,t.clientHeight);
}, p);
}
},
title: 'Panel 0',
flex: 2,
frame: true,
xtype: 'container',
layout: 'anchor',
style: {
overflow: 'auto'
},
defaults: {
frame: true,
bodyPadding: 10
},
items: [
{
title: 'Panel 1',
flex: 1,
margin: '0 0 10 0',
cls:'nav_pos',
height:300,
html: 'height: 300'
},
{
title: 'Panel 2',
height: 100,
margin: '0 0 10 0',
cls:'nav_pos',
height:400,
html: 'height: 400'
},
{
title: 'Panel 3',
flex: 2,
cls:'nav_pos',
height:500,
html: 'height: 500'
}
]
}
],
onscroll:function(top,h0){
var items_navpos=this.items_navpos;
var offset=0;
//var h0 = this.h0;
for(var i=0; i<items_navpos.length; i++){
var item_navpos=items_navpos[i];
var h = item_navpos.getHeight();
//header落在移动窗口之内,或移动窗口在 两个offset之间都算
if((offset>=top && (offset<= (top+h0)))
|| (top>=offset && (top+h0) <= offset+h ))
break;
offset+=h;
}
this.nav(this.btns_dock.getAt(i));
},
nav:function(item,e){
if(this.item_last){
if(this.item_last==item)
return false;
this.item_last.removeCls('x-tab-active');
}
var pnav = item.pnav;
if(e){
pnav.getEl().scrollIntoView(pnav.up().getEl(),false,true);
}else{
item.addCls('x-tab-active');
}
this.item_last=item;
},
afterRender: function(ct, position) {
var items_dock=[];
var items_navpos=this.query('[cls=nav_pos]');
var me = this;
for(var i=0; i<items_navpos.length; i++){
var item_navpos=items_navpos[i];
var item_dock = {
closable:false,
text:item_navpos.title,
pnav:item_navpos,
handler:me.nav,
scope: me
};
items_dock[items_dock.length]=item_dock;
}
this.items_navpos=items_navpos;
this.btns_dock = this.addDocked([{
xtype: 'tabbar',
dock: 'top',
id:'tbar0',
activeItem:1,
items: items_dock
}])[0].items;
this.nav(this.btns_dock.getAt(0));
this.callParent();
},
initComponent: function(){
this.callParent();
}
});

Ext.application({
name : 'Fiddle',

launch : function() {
//Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
Ext.create('widget.navpanel', {renderTo:Ext.getBody()});
}
});

在线Demo

https://fiddle.sencha.com/#fiddle/kfr