PDA

View Full Version : [B1] Scrolling Toolbar Menu



Rhoover
4 Feb 2012, 8:02 AM
Things are going really well w/ST2, here's something that worked in PR4 but has stopped working in B1:

Too many toolbar menu items to fit on a phone screen, so things were set-up to scroll horizontally with swipe, except now with B1, the menu snaps back into it's original position instead of remaining scrolled to the left.



Ext.define ('alchemistBeer.view.NavBar', {
extend: 'Ext.Toolbar',
xtype: 'navbar',

config: {
docked: 'bottom',
cls: 'navbar',
layout: 'hbox',
scrollable: {
direction: 'horizontal',
directionLock: true,
indicators: false
},
items: [
{
xtype: 'button',
cls: 'navbutts',
pressedCls: 'navbutts_pressed',
labelCls: 'navbutts_labels',
text: 'Home',
action: 'homeview'
},
{
xtype: 'button',
cls: 'navbutts',
pressedCls: 'navbutts_pressed',
labelCls: 'navbutts_labels',
text: 'Blog',
action: 'bloglistview'
},
//....so on and so forth...
]
}
});


Wanted to check here before filing a bug report.

mitchellsimoens
5 Feb 2012, 10:38 AM
Hello there. I just ran the following code with the beta1 release and our latest code and the scrolling didn't bounce back:


Ext.define ('alchemistBeer.view.NavBar', {
extend: 'Ext.Toolbar',
xtype: 'navbar',

config: {
docked: 'bottom',
cls: 'navbar',
layout: 'hbox',
scrollable: {
direction: 'horizontal',
directionLock: true,
indicators: false
},
items: [
{
xtype: 'button',
cls: 'navbutts',
pressedCls: 'navbutts_pressed',
labelCls: 'navbutts_labels',
text: 'Home',
action: 'homeview'
},
{
xtype: 'button',
cls: 'navbutts',
pressedCls: 'navbutts_pressed',
labelCls: 'navbutts_labels',
text: 'Blog',
action: 'bloglistview'
},
{
xtype: 'button',
cls: 'navbutts',
pressedCls: 'navbutts_pressed',
labelCls: 'navbutts_labels',
text: 'Blog',
action: 'bloglistview'
},
{
xtype: 'button',
cls: 'navbutts',
pressedCls: 'navbutts_pressed',
labelCls: 'navbutts_labels',
text: 'Blog',
action: 'bloglistview'
},
{
xtype: 'button',
cls: 'navbutts',
pressedCls: 'navbutts_pressed',
labelCls: 'navbutts_labels',
text: 'Blog',
action: 'bloglistview'
},
{
xtype: 'button',
cls: 'navbutts',
pressedCls: 'navbutts_pressed',
labelCls: 'navbutts_labels',
text: 'Blog',
action: 'bloglistview'
},
{
xtype: 'button',
cls: 'navbutts',
pressedCls: 'navbutts_pressed',
labelCls: 'navbutts_labels',
text: 'Blog',
action: 'bloglistview'
},
{
xtype: 'button',
cls: 'navbutts',
pressedCls: 'navbutts_pressed',
labelCls: 'navbutts_labels',
text: 'Blog',
action: 'bloglistview'
},
{
xtype: 'button',
cls: 'navbutts',
pressedCls: 'navbutts_pressed',
labelCls: 'navbutts_labels',
text: 'Blog',
action: 'bloglistview'
}
]
}
});

Ext.setup({
onReady : function() {

new Ext.Container({
fullscreen : true,
items : [
{
xtype : 'navbar'
}
]
});

}
});

Rhoover
5 Feb 2012, 2:13 PM
Hmm. Interesting.

Thx for the time, your code is pretty much identical, except for the following (maybe this helps). My navbar is called, as yours was, as an xtype in a Container, except not through the onReady function:



Ext.define('alchemistBeer.view.Viewport', {
extend : 'Ext.Container',
xtype: 'mainport',

config: {
fullscreen: true,
layout: 'card',

items: [
{xtype: 'navbar'},
{xtype: 'homeview'}
]
}

});


Maybe also because my homeview's config object contains a scrollable: {direction: 'vertical'} ? Complete code for that below just in case.

Again, thanks!


Ext.define('alchemistBeer.view.Home', {
extend: 'Ext.Container',
xtype: 'homeview',

config: {
layout: 'card',
scrollable: {
direction: 'vertical',
indicators: false
},
defaults: {
styleHtmlContent: true
},
items: [
{
xtype: 'container',
layout: 'vbox',
styleHtmlContent: true,
items: [
{
cls: 'hometext',
html: '<p>The Alchemist Brewery:<br />'+
' Are You Ready For A Heady Topper?</p>'
},
{xtype: 'spacer'},
{
xtype: 'button',
cls: 'alchemistbuttons',
text: 'About The Brewery',
action: 'breweryview'
},
{xtype: 'spacer'},
{
xtype: 'button',
cls: 'alchemistbuttons',
text: 'Find The Brewery',
action: 'brewerymapview'
},
{xtype: 'spacer'}
]
}
]
}

});