Code:
Ext.setup({
requires: [
'Ext.navigation.View',
'Ext.ActionSheet',
'Ext.SegmentedButton',
'Ext.Button',
'Ext.Toolbar'
],
onReady: function () {
Ext.Viewport.addListener('orientationchange',
function (theViewport, orientationWidth, orientationHeight, eOpts) {
// prep the notification message
//
var notificationMessage = "New orientation is: " + theViewport.getOrientation() + ", width: " + orientationWidth + ", height: " + orientationHeight + ".";
// show the new orientation
//
Ext.Msg.alert('Change Notification', notificationMessage, Ext.emptyFn);
// try to manually set the width and height ...
//
theViewport.setWidth(orientationWidth);
theViewport.setHeight((orientationHeight + 1));
// repaint the entire application (no visible change noticed from the execution of this call)
//
Ext.repaint();
});
/**
* Helpers
*/
function isRequestedViewActive(viewName) {
if (view.getNavBarTitle() == viewName) {
console.log("This particular selection is already shown.");
return true;
}
else {
return false;
}
}
/**
* Stage the overlay
*/
var overlayToolbar = Ext.create('Ext.Toolbar', {
docked: 'top',
xtype: 'toolbar',
title: 'Features'
});
var overlay = Ext.create('Ext.Panel', {
floating: true,
modal: true,
hidden: true,
hideOnMaskTap: true,
height: 300,
width: '70%',
contentEl: 'content',
styleHtmlContent: true,
scrollable: true,
items: [overlayToolbar]
});
/**
* navigation.View item factory method
*/
function createChildContainer(viewTitle, viewItemId, viewHtml, imagesArry) {
return Ext.create('Ext.Container', {
title: viewTitle,
itemId: viewItemId,
layout: {
type: 'vbox',
align: 'stretch'
},
padding: '0 1 1 1',
items: [
{
xtype: 'panel',
html: viewHtml
},
{
flex: 1.5,
xtype: 'carousel',
direction: 'horizontal',
directionLock: true,
items: [
{
xtype: 'image',
cls: 'my-carousel-item-img',
src: imagesArry[0]
},
{
xtype: 'image',
cls: 'my-carousel-item-img',
src: imagesArry[1]
},
{
xtype: 'image',
cls: 'my-carousel-item-img',
src: imagesArry[2]
}
],
itemConfig: {
cls: 'my-carousel-item'
}
}
]
});
}
/**
* Create an instance of Ext.navigation.View, which is fullscreen so it is inserted into Ext.Viewport
*/
var view = Ext.create('Ext.navigation.View', {
fullscreen: true,
useTitleForBackButtonText: true,
listeners: {
orientationchange: function (theViewPort, newOrientation, orientationWidth, orientationHeight, eOpts) {
var notificationMessage = "New orientation is: " + newOrientation + ", width: " + orientationWidth + ".";
Ext.Msg.alert('Change Notification', notificationMessage, Ext.emptyFn);
}
},
items: [
//bottom toolbar containing the settings button
{
docked: 'bottom',
xtype: 'toolbar',
ui: 'light',
items: [
{ xtype: 'spacer' },
{
iconMask: true,
iconCls: 'settings',
handler: function () {
//check if we can pop a view in the navigation view, if not, disable the pop button
//on the action sheet
// var popButton = optionsSheet.down('#pop');
// popButton.setDisabled(!view.canPop());
// var toggleButton = optionsSheet.down('#togglebackbuttontext'); // from itemId: 'togglebackbuttontext', defined on ActionSheet item ...
// toggleButton.setDisabled(!view.canPop());
//show the option sheet
console.log('Showing optionsSheet now ...');
optionsSheet.showBy(this);
console.log('Finished showing optionsSheet ...');
}
},
{
iconMask: true,
iconCls: 'info',
handler: function () {
console.log('overlayToolbar\'s title is: ' + overlayToolbar.getTitle());
overlayToolbar.setTitle(view.getNavBarTitle() + ' Features');
overlay.showBy(this);
}
}
]
},
createChildContainer('Chronicle', 'viewChronicle', '<center><div style="padding: 0.4em; width: 100%; font-size: .90em; text-align: center;">Chronicle keeps track of your time so you don\'t have to waste it remembering what you did.</div></center>', ['images/testApp.jpg', 'images/testApp2.jpg', 'images/testApp3.jpg'])
]
});
/**
* A ActionSheet which is used to display various options for the Navigation View
*/
var optionsSheet = Ext.create('Ext.ActionSheet', {
items: [
{
xtype: 'button',
text: 'Chronicle',
iconMask: true,
iconCls: 'action',
handler: function () {
if (!isRequestedViewActive('Chronicle')) {
console.log("Pushing selected item with carousel ...")
view.push(createChildContainer('Chronicle', 'viewChronicle', '<center><div style="padding: 0.4em; width: 100%; font-size: .90em; text-align: center;">Chronicle keeps track of your time so you don\'t have to waste it remembering what you did.</div></center>', ['images/testApp.jpg', 'images/testApp2.jpg', 'images/testApp3.jpg'])); // end view.push()
}
//hide the sheet
optionsSheet.hide();
}
},
{
xtype: 'button',
text: 'Paper Trail Designs',
iconMask: true,
iconCls: 'action',
handler: function () {
if (!isRequestedViewActive('Paper Trail Designs')) {
console.log("Pushing selected item with carousel ...");
view.push(createChildContainer('Paper Trail Designs', 'viewPaperTrailDesigns', '<center><div style="padding: 0.4em; width: 100%; font-size: 0.90em; text-align: center;">Pixel perfect graphics in contemporary design by Paper Trail Designs.</div></center>', ['images/testApp2.jpg', 'images/testApp3.jpg', 'images/testApp.jpg'])); // end view.push()
}
//hide the sheet
optionsSheet.hide();
}
},
{
xtype: 'button',
text: 'ReportVIEW',
iconMask: true,
iconCls: 'action',
itemId: 'reportviewbuttontext',
handler: function () {
if (!isRequestedViewActive('ReportVIEW')) {
console.log("Pushing selected item with carousel ...")
view.push(createChildContainer('ReportVIEW', 'viewReportVIEW', '<center><div style="padding: 0.4em; width: 100%; font-size: .90em; text-align: center;">Function - rich reporting in a stylized view.</div></center>', ['images/testApp3.jpg', 'images/testApp.jpg', 'images/testApp2.jpg'])); // end view.push()
}
//hide the sheet
optionsSheet.hide();
}
},
{
xtype: 'button',
iconMask: true,
iconCls: 'user',
text: 'Contact',
handler: function () {
//hide the sheet
optionsSheet.hide();
}
},
{
text: 'Cancel',
ui: 'decline',
iconMask: true,
iconCls: 'delete',
handler: function () {
//hide the sheet
optionsSheet.hide();
}
}
]
});
}
});
Dan
Unanswered: Ext.navigation.View: Pushing too many items of same title breaks Ext.navigation.Bar
Reply With Quote
