PDA

View Full Version : Ext.tab.Panel autoScroll plugin?



Endolino
7 Dec 2011, 7:08 AM
Hi,

i know if i set the feature autoscroll:true, i get scrollbars to left and the right of my tabbar. If i have got a few tabs and click the scollbutton i will see the next one and so on.
But is it possible to tell the scollbars to jump over 3 tabs?

I couldn't find any declaration on ext/src for these scollbars. Only in Class.Component i can find the declaration of autoScroll for the first time.

Would be nice to get any anwser....

Thanks a lot!

tobiu
7 Dec 2011, 7:51 AM
the tabBar:
http://docs.sencha.com/ext-js/4-0/source/Bar2.html#Ext-tab-Bar

uses:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.boxOverflow.Scroller

internally. this scroller has the config:


scrollIncrement : Number
The number of pixels to scroll by on scroller click

Defaults to: 20


so, you are able to change the increment, but not to specify a number of tabs. i guess the problem with that is, that tab headers can have different widths and the scroller is not aware how far to move to reach the right position.

Endolino
8 Dec 2011, 1:00 AM
Hi Tobi,

i try it with followiing code:


Ext.define('NaviTabBarScroller',{
extend:'Ext.layout.container.boxOverflow.Scroller',
animateScroll: true,
scrollIncrement: 80,
wheelIncrement: 10,
scrollRepeatInterval: 60,
scrollDuration: 800
})



Ext.define('NaviTabBar',{
extend: 'Ext.tab.Bar',
initComponent: function() {
var me = this,keys;
if (me.plain){me.setUI(me.ui + '-plain');}
me.addClsWithUI(me.dock);
me.addEvents('change');
me.addChildEls('body', 'strip');
me.callParent(arguments);
// TabBar must override the Header's align setting.
me.layout.align = (me.orientation == 'vertical') ? 'left' : 'top';
me.layout.overflowHandler = Ext.create('NaviTabBarScroller', me.layout);
me.remove(me.titleCmp);
delete me.titleCmp;
// Subscribe to Ext.FocusManager for key navigation
keys = me.orientation == 'vertical' ? ['up', 'down'] : ['left', 'right'];
Ext.FocusManager.subscribe(me, {keys: keys});
Ext.apply(me.renderData, {bodyCls: me.bodyCls});
}
})

tabs = Ext.create('Ext.tab.Panel',{
renderTo: 'naviTabs',
activeTab: 0,
width: naviWidth,
height:30,
animateScroll:true,
tabWidth:20,
plain:true,
autoScroll:true,
iconCls: 'Endolino',
defaults:{autoScroll: true},
items: categories,
tabBar: Ext.create('NaviTabBar')
});


but nothing happens. Where is the bug? tabBar waits for a tabBar-Object. I give him a tabBarObject by creating an instance of "NaviTabBar" which extend Ext.tab.Bar.

Pleasepleaseplease help me :-)! Thank you!

Endolino
8 Dec 2011, 2:04 AM
Okay,
next thing i try was to manipulate the standard ext-all-debug.js and set the value of animate:true.
Next step creating e standard TabPanel with autoscoll:true and 7 items.
Okay the scrollbars do their job, but they wont be animated while scrolling.

Is it a bug of EXTJS4?

tobiu
8 Dec 2011, 5:40 AM
you should never touch the ext-all-debug :)

the tabPanel has a config: tabBar where you can set the configs.

so i would try out something like (untested):


Ext.create('Ext.tab.Panel',{
...
tabBar: {
layout: { // this gets passed to the scroller
scrollIncrement: 80,
wheelIncrement: 10,
scrollRepeatInterval: 60,
scrollDuration: 800
}
}
});

Endolino
8 Dec 2011, 7:20 AM
Hi Tobi,

this was my idea 4hours before. But nothing happens. It's a mess!:((:((
Sencha never shows a demonstration of an animatied TabMenu? Why? I think its the best UX for a TabBar.



Ext.onReady(function() {
var tabPanel = Ext.create('Ext.tab.Panel', {
height: 300,
autoScroll:true,
renderTo: Ext.getBody(),
tabBar: {
layout: { // this gets passed to the scroller
animateScroll:true,
scrollIncrement: 80,
wheelIncrement: 80,
scrollRepeatInterval: 60,
scrollDuration: 800
}
},
width: 200,
layout: 'fit',
title: 'Exercising scrollable tabs with a TabScroller menu',
border: false,
items: [{
title: 'First tab',
html: 'Creating more tabs...'
}]
});

// Add a bunch of tabs dynamically
var tabLimit = 12;

Ext.defer(function (num) {
var i,
title,
tabs = [];
for (i = 1; i <= tabLimit; i++) {
title = 'Tab # ' + i;
tabs.push({
title: title,
html: 'Hi, I am tab ' + i,
tabTip: title,
closable: true
});
}
tabPanel.add(tabs);
//tabPanel.getComponent(0).body.update('Done!');
}, 100);
});