How can I override the functionality of browser's back button? I have navigation view in page and I want to synchronize the browser back button and navigation view's back button. I can override navigation button's functionality but I don't know how to do the same thing for browser back.
Any help will be appreciated.
You have to use routes, this tutorial will show you how: http://railsdevtricksofthetrade.blogspot.com/2012/04/sencha-touch-2-routes-and-back-button.html?m=1
I managed to override the back button of the nav view with the following code
In your controller, create a new ref:
backToNav: 'myNavXtypeName button[text=Back]'
In the same controller, link the ref to a control:
backToNav: {
tap: 'backToNav'
}
Finally create the controller method that implements the navigation view's pop functionality.
backToNav: function() {
Ext.getCmp('myNavXtypeName').pop()
}
Done.
Read more about refs and controls here
Related
Is there a way to close the mobile hamburger menu when you click on a menu link? We have a menu link that launches a modal window, but the menu is still showing behind it when I close the modal.
The state of the hamburger menu is kept in HamburgerMenuService. You can inject this service in your modal for example you can call the toggle(false) method in this component's onInit hook.
This way when the modal initializes the menu will close.
Thanks for the pointers. This is how I achieved the task:
Inject the HamburgerMenuService into the component:
import { HamburgerMenuService } from ‘#spartacus/storefront’;
Add my constructor:
constructor(private hamburger: HamburgerMenuService) {}
Access the toggle method in my modal function:
this.hamburger.toggle(true); // force close
Does anyone know how a navigation drawer similar to the one in the Sonos app can be implemented? I have checked both Android and iOS versions of the app and see that the navigation drawer has been implemented in the same way for both platforms.
The two key things that I like and want to implement are:
the slide out drawer is below the navigation bar. When it slides out, the navigation bar is still visible
it appears as if it is the drawer that slides out, rather than the detail view moving to the right. I've noticed that the default master detail page slides out in a different way and it's not what we want.
Have a look at the images below so see I mean.
thanks
Although not technically a good practice, if you put a MasterDetailPage into a NavigationPage, it will slide out like in the above pictures. Here's how you do that:
In the App.cs constructor or your app's OnStart() method:
MainPage = new NavigationPage(new MyMasterDetailPage()) {
Title = "Your Title"
};
Create a new MasterDetailPage called MyMasterDetailPage.
In the constructor, add the following code:
Detail = new HomePage();
Master = new MenuPage()
{
Title = "Menu"
};
You then need to create a ContentPage for both HomePage and MenuPage.
One issue that you will run into if you use this method, is that if you don't call MyMasterDetailPage as the first page upon opening the app, the three horizontal bars on the NavigationBar won't appear, which will make it hard for users to tell there is a drawer. So if you need users to go to a login page or another page before your MasterDetailPage, you may want to find another implementation.
I am working with Xamarin Forms and I am using MasterDetailPage and NavigationPage and everything is working. Now, I need to configure the page button (three bars on the left) to be visible on all views.
I have a MasterDetailPage with a menu and the user clicks a menu its navigate to other pages. First page (homepage) look like that:
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<home:HomePage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
When the user clicks in menu inside masterdetailpage or other menus outside masterdetailpage it performs a navigation:
The three bars page button is visible only on the first view, when I navigate to others views, that button disapears.
But, I want something like that:
The page back button showns automatically when i navigate to other pages and it's fine.
How to let the three bars page button visible to all views and maintain the back page button?
I am using the following code to navigate between views:
await Navigation.PushAsync(MyNewPage());
Thanks!
Your master detail page has to handle the navigation to the detail pages for it to work correctly.
Connect the menu listview:
ListView.ItemSelected += OnItemSelected;
In the OnItemSelected event.
{MasterDetailPage}.Detail.Navigation.PushAsync(new MyNewPage());
Here is an example of master detail navigation:
async void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
var item = e.SelectedItem as MasterPageItem;
if (item != null)
{
NavigationPage nextDetailPage = null;
await Task.Run(() =>
{
nextDetailPage = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
});
Detail = nextDetailPage;
masterPage.ListView.SelectedItem = null;
IsPresented = false;
}
}
This is not possible, as you can't have two buttons on the left side. And as many applications I have seen, no app supports this kind of UI. Unless you write custom navigation bar and put it on top of every page.
You can create a stack of detail pages in your main MasterDetailPage. So whenever you want to push a new page, instead you can just set page as Detail and put old Detail in your own stack.
For Android you can wrap back button event to pop page from stack, but on iOS there is no back button, so you will have to create some sort of back button in detail page's toolbar.
I think that you will have to write a Custom Renderer to achieve what you want.
But if you want only to keep the hamburger button, without the back button, you can navigate to your pages using this code:
Detail = new NavigationPage(new MyNewPage());
I have a selectfield in a view and when I am navigating to that view I want keypad opens automatically when I am moving to that view. I am trying to call focus method but it is not working,
Any one help me in this.
You have to call focus on the textfield as soon as it is initialized something like below,
listeners: {
initialize: function(view, eOpts) {
Ext.getCmp('_phoneNumberId').focus();
}
}
I came across a situation in sencha touch where i need to change from one view to another on click of a button .
My view 1 is a dashboard which displays around 8 icons and on click of each icon different views are shown . So, i placed an home button in the header of those 8 different views and i am trying to get back to the dashboard which is not hapenning .Instead it is showing a blank screen and there was no error displayed in the console for me to check .
My code for changing the view on button click was :
{
xtype:'button',
cls:'clsHome',
text:'Home',
style: 'background:#4A4245;color:white;',
handler: function() {
console.log("Home Clicked");
var dashboardPanel = Ext.create('AppSupport.view.DashBoard');
Ext.Viewport.add(dashboardPanel);
//Ext.Viewport.setActiveItem(dashboardPanel,{type: 'slide', direction: 'left'});
}
}
Help me Guys ... Thanks in Advance ...!!!
You should try the Using Navigation View tutorial in sencha architect documentation... It gives a simple step by step guide for view navigation for an app. The navigation view also provides in built history support from sencha touch 2 onwards which also makes going back simple and easy
http://docs.sencha.com/architect/2/#!/guide/navigationview