PDA

View Full Version : [NOREPRO] Navigation 'pop' doesn't seem to work.



Sakafo
8 May 2015, 12:56 PM
On the modern API, I tried to have a navigation view, but whenever I pop a view out, the previous view doesn't seem to render.

I tried a very simple example from Sencha Touch 2.4.1 documentation as follow:
http://docs.sencha.com/touch/2.4/components/navigation_view.html


Ext.application({ name: 'Sencha',


launch: function() {


//create the navigation view and add it into the Ext.Viewport
var view = Ext.Viewport.add({
xtype: 'navigationview',


/*
* We only give it one item by default, which will be the only
* item in the 'stack' when it loads
*/
items: [
{
//items can have titles
title: 'Navigation View',
padding: 10,


//inside this first item we are going to add a button
items: [
{
xtype: 'button',
text: 'Push another view!',
handler: function() {


/*
* When someone taps this button,
* it will push another view into stack
*/


view.push({
//this one also has a title
title: 'Second View',
padding: 10,


//once again, this view has one button
items: [
{
xtype: 'button',
text: 'Pop this view!',
handler: function() {
//pop current view out of the stack
view.pop();
}
}
]
});
}
}
]
}
]
});
}
});

and I could reproduce the issue, so I'm pretty sure it's not my code.

Also, the push and pop events never seem to fire.

Are there any overrides in the works?

Thanks.

Gary Schlosberg
8 May 2015, 1:18 PM
Thanks for the report! I have opened a bug in our bug tracker.

robboerman
14 May 2015, 9:47 AM
There are a couple of problems with the navigation view. First it tries to remove items immediately. When setting autoDestroy: false on the navigation view that is fixed but you run into other problems. The Container should schedule the actual removal of items after the animation has completed but it doesn't. Also, on removal of the items you pop off the navigation view, it runs into another problem (destroying a binding that does not allow it).

Although it's a quick hack, the below override solves these issues so you can get at least get it to work.



Ext.define('2gears.override.navigation.View', {
override: 'Ext.navigation.View',

config: {
autoDestroy: false
},

remove: function(item, destroy) {
var me = this,
index, innerItems;

var animation = this.getLayout().getAnimation();

item = me.getComponent(item);

index = me.indexOf(item);
innerItems = me.getInnerItems();

if (destroy === undefined) {
destroy = me.getAutoDestroy();
}

if (index !== -1) {
if (!me.removingAll && innerItems.length > 1 && item === me.getActiveItem()) {
if (animation && animation.isAnimation) {
animation.on({
animationend: 'doRemove',
scope: me,
single: true,
args: [item, index, destroy]
});
} else {
me.doRemove(item, index, destroy);
}

me.doResetActiveItem(innerItems.indexOf(item));
}
else {
me.doRemove(item, index, destroy);
if (innerItems.length === 0) {
me.setActiveItem(null);
}
}
}

return me;
},

doRemove: function(item, index, destroy) {
var me = this;

var animation = this.getLayout().getAnimation();

if (animation && animation.isAnimation) {
animation.setReverse(false);
}

me.items.remove(item);

if (item.isInnerItem()) {
me.removeInner(item);
}

me.onItemRemove(item, index, destroy);

// item.onRemoved(item.destroying || destroy);

if (destroy) {
item.destroy();
}
}

});

Sakafo
19 May 2015, 9:16 AM
Thanks, this override seems to work for me.

There seems to be some issues still with the navigation bar still showing the back button all the time and the title changing its alignment. I'm looking into it right now. I'll post if I find anything.

Sakafo
20 May 2015, 6:16 AM
There seems to be multiple other issues with the navigation bar (Ext.navigation.Bar).

First of all, when you have an item in the navigation view's "items" config, it seems to add it twice to the navigation bar's "backButtonStack", meaning the back button is always visible, even on the first panel.

Second, the animation on the title in the navigation bar adds a "transform" css property that sticks the title to the right-most of the screen, instead of keeping it centered (as configured).

Finally, when binding a navigation view item's title via a viewmodel, the navigation bar doesn't update at the correct moment. For example, I'm binding a viewer's title to a list selection. Whenever I select a row, it gives me the title of my previous selection. So the binding does work, it's only late.

Oh, and also, I can't natively bind a title to anything in Extjs 6 Modern, I always have to add the



config: {
title: ""
}

snippet for it to work. And since most of your examples for viewmodel bindings take the title as an example, it's kind of weird.

I've digged a bit into the source for the navigation bar and I think I found a proper fix for the first issue (the backButtonStack duplicating the first item in it) with the following override:


Ext.define('WmsTouch.override.navigation.Bar', {
override: 'Ext.navigation.Bar',

updateView: function(newView) {
var me = this,
backButton = me.getBackButton(),
innerItems, i, backButtonText, item, title, titleText;

me.getItems();

if (newView) { //This part was the culprit.
//update the back button stack with the current inner items of the view
//innerItems = newView.getInnerItems();
//for (i = 0; i < innerItems.length; i++) {
// item = innerItems[i];
// title = (item.getTitle) ? item.getTitle() : item.config.title;
//
// me.backButtonStack.push(title || '&nbsp;');
//}

titleText = me.getTitleText();

if (titleText === undefined) {
titleText = '';
}

me.setTitle(titleText);

backButtonText = me.getBackButtonText();
if (backButtonText) {
backButton.setText(backButtonText);
backButton.show();
}
}
}
});

As for the second solution, I'm confident the override of navigation view proposed by robboerman is not the cause, as it was doing it before. I am not familiar enough with how the animations work in ExtJS to be able to fix it, but it seems to me the animation believes it has to put the title on the right side of the navigation bar instead of it's configured position. I tried looking into refreshTitlePosition() but it didn't seem to be the culprit.

Finally, for a binded title, notifying the viewmodel on my panel's "show" event fixes the problem, but it seems to me the navigation bar should be able to do this itself.


listeners: {
show: function(){
this.getViewModel().notify();
}
},

robboerman
31 May 2015, 5:11 AM
In the beta1 ExtJS 6.0 the navigation view seems to be fixed. I can recommend upgrading to 6.0

M165437
8 Oct 2016, 9:09 AM
I'm using Ext JS 6.2 and to me it doesn't seem like the bug has been fixed. The navigation view still does not animate popping items as seen in their documentation fiddle: https://docs.sencha.com/extjs/6.2.0/modern/Ext.navigation.View.html The second view disappears immediately upon clicking the back button. Your overwrite, @robboerman, solves this issue.