PDA

View Full Version : back button in navigation view



jaami
2 Oct 2013, 12:21 PM
i want to manage navigation view the way i want with buttons. the back button there is sure a stupid idea i dont want to use. i cannot hide back button that appears as soon 2nd view goes to viewport. there is no code i can modofy for back button to destroy it. please tell me how to get rid of the back button. if not possible then write new touch sdk with no back button.
my posts are on spam list? why im not getting any response?

Kikketer
2 Oct 2013, 6:53 PM
I'm also looking for a way to modify the generated back button. I would think it would be a common use case to have the title of the previous card be the text inside the generated back button.

Ideally I would like to have absolute control over this back button. I really do like the animation and single navigation bar, it's far superior (and less work) than having to create the navigation bar over and over for each page with a specific back button.

I'll visit again if I discover anything.

Kurt001
2 Oct 2013, 7:46 PM
You can override the navigationview like this:



onItemAdd:function(item, index){
// Check for title configuration
if(item && item.getDocked()&& item.config.title ===true){
this.$titleContainer = item;
}
this.doItemLayoutAdd(item, index);
var navigaitonBar =this.getInitialConfig().navigationBar;
if(!this.isItemsInitializing && item.isInnerItem()){
this.setActiveItem(item);
// Update the navigationBar
if(navigaitonBar){
this.getNavigationBar().onViewAdd(this, item, index);
}
// Update the custom backButton
if(this.$backButtonContainer){
// this.$backButton.show(); // <==== drop this line
}
}
if(item && item.isInnerItem()){
// Update the title container title
this.updateTitleContainerTitle((item.getTitle)? item.getTitle(): item.config.title);
}
if(this.initialized){
this.fireEvent('add',this, item, index);
}
},

Kurt001
4 Oct 2013, 7:26 AM
the back button in navigation view is not needed because i am developing app for ipad. ... kindly help me to understand the code you posted. or if possible then post complete code of navigation view that i will extend. ....

An override replaces parts of the official Sencha Code with your own changes. If you would change this in the source code of Sencha you would loose it by the next update of Sencha. Writing an override will still be in place after the next update.
!!! WARNING !!!
If Sencha changes exactly this code, you still have to update.

That's why it's important to understand you are doing there.

Place the following code in


root/app/override/navigation.View.js

And add to app.js (if it already contains a requires section, then add it to that one)


requires: ['MyApp.override.navigation.View']

Here is the code:


Ext.define('MyApp.override.navigation.View', {
override: 'Ext.navigation.View',

onItemAdd:function(item, index){
// Check for title configuration
if(item && item.getDocked()&& item.config.title ===true){
this.$titleContainer = item;
}

this.doItemLayoutAdd(item, index);

var navigaitonBar =this.getInitialConfig().navigationBar;

if(!this.isItemsInitializing && item.isInnerItem()){
this.setActiveItem(item);

// Update the navigationBar
if(navigaitonBar){
this.getNavigationBar().onViewAdd(this, item, index);
}

// Update the custom backButton
if(this.$backButtonContainer){
//this.$backButton.show();
}
}

if(item && item.isInnerItem()){
// Update the title container title
this.updateTitleContainerTitle((item.getTitle)? item.getTitle(): item.config.title);
}

if(this.initialized){
this.fireEvent('add',this, item, index);
}
}
});

jaami
8 Oct 2013, 9:46 AM
Thank you kurt. i am still not able to run the code. there is no error in code but the navigation view is not shown in browser. please check my code?

app.js file adds MyNavigationView to viewport. MyNavigationView is extended view of NavigationView and NavigationView overrides Ext.navigation.View. the code for override is same as the code you gave.

app.js








//@require @packageOverrides
// Ext.Loader.setConfig({


// });
Ext.Loader.setPath({ MyApp : 'app' });
Ext.require([
'MyApp.view.NavigationView'
]);


Ext.application({

models: [

],
stores: [

],
views: [
'MyNavigationView'
],
controllers: [
'MyController'
],
name: 'MyApp',


launch: function() {
Ext.create('MyApp.view.MyNavigationView', {fullscreen: true});

}


});





MyNavigationView.js



Ext.define('MyApp.view.MyNavigationView', {
extend: 'MyApp.view.NavigationView',
alias: 'mynavigationview',


config: {
id: 'navID',
navigationBar: {
docked: 'top',
items: [
{
xtype: 'button',
id: 'b1',
text: 'MyButton'
},
{
xtype: 'button',
id: 'b2',
text: 'MyButton1'
}
]
}
}


});


NavigationView.js


Ext.define('MyApp.view.NavigationView', {
override: 'Ext.navigation.View',


onItemAdd:function(item, index){
// Check for title configuration
if(item && item.getDocked()&& item.config.title ===true){


this.doItemLayoutAdd(item, index);


var navigaitonBar =this.getInitialConfig().navigationBar;


if(!this.isItemsInitializing && item.isInnerItem()){
this.setActiveItem(item);


this.$titleContainer = item;
}
// Update the navigationBar
if(navigaitonBar){
this.getNavigationBar().onViewAdd(this, item, index);
}


// Update the custom backButton
if(this.$backButtonContainer){
//this.$backButton.show();
}
}


if(item && item.isInnerItem()){
// Update the title container title
this.updateTitleContainerTitle((item.getTitle)? item.getTitle(): item.config.title);
}


if(this.initialized){
this.fireEvent('add',this, item, index);
}
}
});



browser shows empty page. console shows no error.
Thank you again for helping me otherwise another week of efforts will go without any results.

Kurt001
8 Oct 2013, 10:36 AM
app.js


Ext.Loader.setPath(
{
MyApp : 'app'
}
);
Ext.application({
name: 'MyApp',
requires: [
'MyApp.view.NavigationView' // prefer: override folder but view might be ok
],
views: [ 'MyNavigationView' ],
controllers: [ 'MyController' ],
launch: function() {
Ext.create('MyApp.view.MyNavigationView', {fullscreen: true});
}
});
You should not extend the override, but the actual Sencha item. The override will still replace the parts you changed.


Ext.define('MyApp.view.MyNavigationView', {
extend: 'Ext.navigation.View',
xtype: 'mynavigationview',
config: {
itemId: 'navID',
navigationBar: {
docked: 'top',
items: [ // shouldn't these go with title into the navView instead of navBar?
{
xtype: 'button',
id: 'b1',
text: 'MyButton'
},
{
xtype: 'button',
id: 'b2',
text: 'MyButton1'
}
]
}
}
});

jaami
9 Oct 2013, 2:16 PM
Ext.define('MyApp.override.navigation.View',
requires: ['MyApp.override.navigation.View']
Ext.create('MyApp.override.navigation.View', {fullscreen: true});

define tells me that override folder has the file navigation.View.js or does it tell me that there is navigation folder and Inside the folder there is View.js file?

create method was not able to locate View.js so i made navigation folder and placed View.js file in it. also replaced create with setActiveItemExt.Viewport.setActiveItem({xtype: 'mynavigationview'});

also used navigation view instead of the navigation bar.

now i see error in view.js at the line
TypeError: 'undefined' is not a function (evaluating 'this.updateTitleContainerTitle((item.getTitle)? item.getTitle(): item.config.title)')

just to make sure that the view.js we created is actually running, i placed the console.log method right above the line were error is given. but msg was not displayed. i think the new View.js is not working.

please see where i made mistake in my code. project zip is attached. Thanks again for helping.

Kurt001
9 Oct 2013, 3:35 PM
Ext.define('MyApp.override.navigation.View',
requires: ['MyApp.override.navigation.View']
Ext.create('MyApp.override.navigation.View', {fullscreen: true});
You define the Override with this part:


Ext.define('MyApp.override.navigation.View', {
override: 'Ext.navigation.View',

After that there is not need to extend a class to this file.
Simply add it to requires in app.js and never touch it again.
The folder for the file would be:

root/app/override/navigation/View.js


Ext.Viewport.setActiveItem({xtype: 'mynavigationview'});

mynavigationview should extend Ext.navigation.View

jaami
10 Oct 2013, 7:23 AM
this time my View.js shows my msg in console.

there is only one statement in sencha code to show the back button that we commented in our code but button is still shown.

//this.$backButton.show();

code of original View.js is confusing. is it easy for you to figure out why button is still shown?

i have no idea which lines should be picked from original View.js i sure need a lot more to learn.

is there a bit more detail for me to start with overriding? let me know some general rules to define custom classes. i mean the block or lines of code from original class that are required for custom class.

not sure what else is important to know. Please guide more.

Kurt001
10 Oct 2013, 11:11 AM
Sorry it was the wrong place. Here is what I tested and it works:

Please change the name in app.js from ...view to ...bar
Please change the name of the file from View.js to Bar.js
Please change the code inside the override to:

Ext.define('MyApp.overrides.navigation.Bar', {
override: 'Ext.navigation.Bar',

doChangeView: function(view, hasPrevious, reverse) {
var me = this,
leftBox = me.leftBox,
leftBoxElement = leftBox.element,
titleComponent = me.titleComponent,
titleElement = titleComponent.element,
backButton = me.getBackButton(),
titleText = me.getTitleText(),
backButtonText = me.getBackButtonText(),
animation = me.getAnimation() && view.getLayout().getAnimation(),
animated = animation && animation.isAnimation && view.isPainted(),
properties, leftGhost, titleGhost, leftProps, titleProps;

if (animated) {
leftGhost = me.createProxy(leftBox.element);
leftBoxElement.setStyle('opacity', '0');
backButton.setText(backButtonText);
// backButton[hasPrevious ? 'show' : 'hide']();

titleGhost = me.createProxy(titleComponent.element.getParent());
titleElement.setStyle('opacity', '0');
me.setTitle(titleText);

properties = me.measureView(leftGhost, titleGhost, reverse);
leftProps = properties.left;
titleProps = properties.title;

me.isAnimating = true;
me.animate(leftBoxElement, leftProps.element);
me.animate(titleElement, titleProps.element, function() {
titleElement.setLeft(properties.titleLeft);
me.isAnimating = false;
me.refreshTitlePosition();
});

if (Ext.browser.is.AndroidStock2 && !this.getAndroid2Transforms()) {
leftGhost.ghost.destroy();
titleGhost.ghost.destroy();
}
else {
me.animate(leftGhost.ghost, leftProps.ghost);
me.animate(titleGhost.ghost, titleProps.ghost, function() {
leftGhost.ghost.destroy();
titleGhost.ghost.destroy();
});
}
}
else {
if (hasPrevious) {
backButton.setText(backButtonText);
// backButton.show();
}
else {
backButton.hide();
}
me.setTitle(titleText);
}
}
});

jaami
11 Oct 2013, 6:24 AM
navigation bar is now shown.

46292

=======================================================================

46291