PDA

View Full Version : How do I customize Ext.navigation.View



bweiler
2 Jan 2012, 11:17 AM
I've made some progress, but I can seem to get all my changes to work properly. Here's what I want to do:

1) Disable the sliding Title transition on the first pushed view (my menu)

2) Add a settings button to the first pushed view only and disable any transition animations.

3) Replace the automatically generated back button and text with a home icon and no back button text on the second pushed view.

4) Use a standard back button with "Back" or "back" on the third through nth pushed views.

Thanks,

Bruce


1) I'm not sure how to disable the sliding title transition on the first pushed view.

2) Here's how I added the settings icon to the Ext.navigation.View title bar. I'm just not sure how to disable the animation on the settings icon. Also, configuring the back button in the navigationBar configuration did not work.

Main View:


config: {
// True means the back button text will always be 'back'
//useTitleForBackButtonText: true,
navigationBar: {
items: [
// {
// backButton: {
// iconCls: 'home',
// iconMask: true,
// ui: 'plain',
// },
// },
{
itemId: 'settingsbutton',
iconCls: 'settings',
iconMask: true,
ui: 'plain',
align: 'right',
},
],
},



3) I made some progress on customizing the back button, but I'm still having problems with partial Title text appearing next to the home icon.

Controller:


init: function() {

var main = this.getMain();

this.appTitle = "Thomas";

//main.getNavigationBar().setDefaultBackButtonText(null);
main.getNavigationBar().setTitle(this.appTitle);
main.getNavigationBar().backButton.setIconCls('home');
main.getNavigationBar().backButton.setIconMask(true);
main.getNavigationBar().backButton.setUi('plain');
main.getNavigationBar().backButton.setText('');
main.getNavigationBar().setDefaultBackButtonText('Home');



4) I'm not sure how to reset the standard Ext.navigation.View behavior to use a standard back button on the third through nth views.

mitchellsimoens
2 Jan 2012, 11:50 AM
To change the animation, it's in the layout config:


layout: {
type: 'card',
animation: {
duration: 300,
easing: 'ease-in-out',
type: 'slide',
direction: 'left'
}
}

This will affect all transitions.

About the buttons, it sounds like you shouldn't really use Ext.navigation.View. It sounds like you should bake your own version extending Ext.Container and doing your own logic.

bweiler
3 Jan 2012, 1:24 PM
I really like the navigation view and it's perfect for my application. I just need to override a few features. I saw some hooks to accomplish this, but they don't seem to work as expected.

defaultBackButtonText
(http://hwl2y21/dev/iphone/Sencha/touch2/docs/#!/api/Ext.navigation.View-cfg-defaultBackButtonText)
useTitleForBackButtonText
(http://hwl2y21/dev/iphone/Sencha/touch2/docs/#!/api/Ext.navigation.View-cfg-useTitleForBackButtonText)
I thought I could set the useTitleForBackButtonText to false and defaultBackButtonText to null, but that didn't seem to work.

Any thoughts before I give up and try to recreate a custom navigation view with 80% of the current navigation view features?

Thanks,

Bruce

jsweere
9 Jan 2012, 10:26 AM
Your problem might be that in order to use the useTitleForBackButtonText function in defaulted as false, if you are wanting to set the default text and use it throughout the app you would need to set the useTitleForBackButtonText to true.

Whenever I tried this however, the backbutton started getting screwy and popping up in random places and even in the header of the main view. A solution to that issue would be greatly appreciated.

bweiler
13 Jan 2012, 11:51 AM
I'm running into the same problems with the back button showing up multiple times on a toolbar. I did make some progress setting the back button options dynamically using the following:

main.getNavigationBar().setUseTitleForBackButtonText(true);
main.getNavigationBar().setDefaultBackButtonText("Home");

When I tried to set these options in the config section of the Ext.navigation.View class, Sench threw errors.

At this point, I'm ready to give up on navigation view. It is a great concept, but not customizable enough for what I need.

dotBomb
8 Feb 2012, 11:05 AM
I too experienced the random display of back buttons in the header of the Ext.navigation.View control. This type of anomaly seems to be occurring randomly and cannot be controlled or worked-around by the sencha framework consumer (developers like us). I also agree that the Ext.navigation.View class is buggy right now, and certainly not production-worthy. That said it has also seemed to have taken a step back in touch-2-b1. The example for this feature doesn't even run in chrome.

My code to reproduce for reference:


/**
* There are two main parts of this example:
*
* **Ext.navigation.View**
* This component is simply a container with a layout, which handles pushing and popping items/views
* at any time. It will automatically animate between those views, including the back button (if it is
* visibly) and a user defined title (if defined in your item).
*
* **Ext.ActionSheet**
* This is simply used to show off some additional functionality of the navigation view component.
*/
Ext.setup({
requires: [
'Ext.navigation.View',
'Ext.ActionSheet',
'Ext.SegmentedButton',
'Ext.Button',
'Ext.Toolbar'
],
onReady: function () {




Ext.Viewport.addListener('orientationchange',
function (theViewport, newOrientation, 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 + 5));


// perhaps resetting the fullscreen value will make it fit right ...
//
theViewport.setConfig('fullscreen', true);


// repaint the entire application. I can trace unresponsiveness
// of the UI to this single call.
//
// Ext.repaint();
});


/**
* Helpers
*/
function doesRequestedViewExist(itemIdToCheck) {
var returnFlag = false;
var currentViewActiveItem = view.getActiveItem();
var allItems = view.getItems();


if (currentViewActiveItem.getItemId() != itemIdToCheck) {
var itemNumber = 1;
var allItemsCount = allItems.length;


console.log("There are currently " + allItemsCount + " in the stack.");


while (itemNumber < (allItemsCount - 1)) {
var tmpViewItem = allItems.items[itemNumber];


console.log("Item ID is: " + tmpViewItem.getItemId());


if (tmpViewItem.getItemId() == itemIdToCheck) {


try {
console.log("Setting active item on view ...");
view.setActiveItem(tmpViewItem);
console.log("Active item on view set!");
}
catch (setActiveItemErr) {
console.log(setActiveItemErr.message);
}


returnFlag = true;


break;
}


++itemNumber;
}


if (!returnFlag) {
console.log("User selection not found in view items array.");
}
}
else {
console.log("This particular selection is already shown.");
returnFlag = true;
}


return returnFlag;
}


/**
* Stage the overlay
*/
var overlay = Ext.create('Ext.Panel', {
floating: true,
modal: true,
hidden: true,
height: 300,
width: '50%',
contentEl: 'content',
styleHtmlContent: true,
scrollable: true,
items: [{
docked: 'top',
xtype: 'toolbar',
title: 'Overlay Title'
}]
});


/**
* Stage the navigation.View items
*/
var childContainer1 = Ext.create('Ext.Container', {
title: 'Chronicle',
itemId: 'item_chronicle',
layout: {
type: 'vbox',
align: 'stretch'
},


padding: '0 1 1 1',


items: [
{
xtype: 'panel',
html: '<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>'
},
{
flex: 1.5,
xtype: 'carousel',
direction: 'horizontal',
directionLock: true,
items: [
{
xtype: 'image',
cls: 'my-carousel-item-img',
src: 'images/testApp.jpg'
},
{
xtype: 'image',
cls: 'my-carousel-item-img',
src: 'images/testApp2.jpg'
},
{
xtype: 'image',
cls: 'my-carousel-item-img',
src: 'images/testApp3.jpg'
}
],
itemConfig: {
cls: 'my-carousel-item'
}
}
]
});


var childContainer2 = Ext.create('Ext.Container', {
title: 'Paper Trail Designs',
itemId: 'item_paper_trail',
layout: {
type: 'vbox',
align: 'stretch'
},


padding: '0 1 1 1',


items: [
{
xtype: 'panel',
html: '<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>'
},
{
flex: 1.5,
xtype: 'carousel',
direction: 'horizontal',
directionLock: true,
items: [
{
xtype: 'image',
cls: 'my-carousel-item-img',
src: 'images/testApp2.jpg'
},
{
xtype: 'image',
cls: 'my-carousel-item-img',
src: 'images/testApp3.jpg'
},
{
xtype: 'image',
cls: 'my-carousel-item-img',
src: 'images/testApp.jpg'
}
],
itemConfig: {
cls: 'my-carousel-item'
}
}
]
});


var childContainer3 = Ext.create('Ext.Container', {
title: 'ReportVIEW',
itemId: 'item_reportview',
layout: {
type: 'vbox',
align: 'stretch'
},


padding: '0 1 1 1',


items: [
{
xtype: 'panel',
html: '<center><div style="padding: 0.4em; width: 100%; font-size: .90em; text-align: center;">Function - rich reporting in a stylized view.</div></center>'
},
{
flex: 1.5,
xtype: 'carousel',
direction: 'horizontal',
directionLock: true,
items: [
{
xtype: 'image',
cls: 'my-carousel-item-img',
src: 'images/testApp3.jpg'
},
{
xtype: 'image',
cls: 'my-carousel-item-img',
src: 'images/testApp.jpg'
},
{
xtype: 'image',
cls: 'my-carousel-item-img',
src: 'images/testApp2.jpg'
}
],
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,
items: [
//bottom toolbar containing the settings button
{
docked: 'bottom',
xtype: 'toolbar',
ui: 'light',
items: [
{ xtype: 'spacer' },
{
iconMask: true,
iconCls: 'settings',
handler: function () {
//show the option sheet
optionsSheet.showBy(this);
}
},
{
iconMask: true,
iconCls: 'info',
handler: function () {
overlay.showBy(this);
}
}
]
},
childContainer1
]
});


/**
* 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 (!doesRequestedViewExist('item_chronicle')) {
console.log("Pushing selected item with carousel ...")
//use the push method of the navigation view to create a new view
view.push(childContainer1); // end view.push()
}


//hide the sheet
optionsSheet.hide();
}
},
{
xtype: 'button',
text: 'Paper Trail Designs',
iconMask: true,
iconCls: 'action',
handler: function () {
if (!doesRequestedViewExist('item_paper_trail')) {
console.log("Pushing selected item with carousel ...")
//use the push method of the navigation view to create a new view
view.push(childContainer2); // end view.push()
}


//hide the sheet
optionsSheet.hide();
}
},
{
xtype: 'button',
text: 'ReportVIEW',
iconMask: true,
iconCls: 'action',
itemId: 'reportviewbuttontext',
handler: function () {
if (!doesRequestedViewExist('item_reportview')) {
console.log("Pushing selected item with carousel ...")
//use the push method of the navigation view to create a new view
view.push(childContainer3); // 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