I am attempting to recreate the Kitchen Sink's approach to it's navigation experience. I want to allow the navigation to either be docked or floating dependent on screen size, device, etc.
I've gotten the functionality to work, however, the anchor which was present in Touch 1.1 when the Ext.Component#showBy function was called, won't appear in Touch2. I also noticed in the Kitchen Sink that it is no longer used and all overlays/floating panels/modal windows are now centered and now longer anchored.
However, I did find the ".x-anchor" css class within the Touch2 style sheet.
Am I missing a configuration setting? :-?
Attachment 29883
Resize function:
Here's a Custom Panel Class I created.Code:handleResize: function(x,y){var bar = Ext.getCmp('menu-bar');var menu = Ext.getCmp('main-menu');
if( x <= 320 ){
bar.show();
menu.setHeight(150);
menu.setDocked(false);
menu.showBy(Ext.getCmp('menu-button')); // Button on bar
}
else{
bar.hide();
this.add(menu);
menu.setDocked('left');
menu.setHeight(window.innerHeight-50);
menu.show();
}
}
Code:// JavaScript Document
Ext.define('InView.views.MultiCardView', {
alias: ['widget.x-multicard'],
extend: 'Ext.Panel',
cardStack: [],
constructor: function (config) {
// Main Menu
var menubar = {
id: 'menu-bar',
xtype:'toolbar',
ui:'dark',
docked:'top',
hidden: (window.innerWidth > 500) ? true : false,
items:[{text:'Button',id:'menu-button'}]
};
// Main Menu
var menu = {
id: 'main-menu',
xtype: 'x-menu-plug',
hidden: (window.innerWidth < 500) ? true : false,
cls:[],
properties: {
//owner: 'mainViewport',
refs: Ext.Array.pluck(config.items,'id'),
labels: Ext.Array.pluck(config.items,'title')
}
};
// Create append navigation to card
Ext.apply(config,{
layout:'vbox',
items: config.items.concat([menubar,menu]),
listeners:{
resize: this.handleResize,
activeItemChange: this.handleBackBar
}
});
// Calls Ext.panel.Panel's constructor
this.callParent(arguments);
// Bind Viewport resize event to handle menu display
Ext.Viewport.on('resize',function (x,y) {
this.fireEvent('resize',x,y,event);
},this);
},
handleResize: function(x,y){
var bar = Ext.getCmp('menu-bar');
var menu = Ext.getCmp('main-menu');
if( x <= 320 ){
bar.show();
menu.setHeight(150);
menu.setDocked(false);
menu.showBy(Ext.getCmp('menu-button'));
}
else{
bar.hide();
this.add(menu);
menu.setDocked('left');
menu.setHeight(window.innerHeight-50);
menu.show();
}
},
handleBackBar: function( panel, newCard, prevCard ) {
if( newCard.id != this.cardStack[this.cardStack.length-1] ) {
var backBar = newCard.getComponent('backBar-'+ newCard.id);
if( backBar ) {
if(backBar.isHidden()){
backBar.setDocked('top');
backBar.show();
}
this.cardStack.push(prevCard.id);
}
}else if ( newCard.id == this.cardStack[this.cardStack.length-1] ){
this.cardStack.pop();
}
}
});
