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
Related
My system has 2 views: Login and Account.The Account view is a Tab Panel that has 5 tabs.If users log into system successful, system will show second tab of Account view. I had tried many ways to do this but all of them are not working.The event is written in the Controller.
In login action:
if (loginSuccess) {
this.redirectTo("account");
}
In the define of route account, I write 3 ways.
First way:
var view = this.getAccountView();
view.setActiveTab(1);
Ext.Viewport.animateActiveItem(view, {type:'slide'});
Second way:
var view = this.getAccountView();
view.animateActiveItem(1, {type: 'slide', direction: 'left'});
Third way:
var view = this.getAccountView();
view.setActiveItem(1);
Ext.Viewport.animateActiveItem(view, {type:'slide'});
All of them are go to "First tab" not "Second tab". Is anyone knows it? Thanks.
If the ref is well pointed, it should work with:
this.getAccountView().setActiveItem(1);
I'm using a navigation.View to hold a list, so I can easily implement a detail view which appears when someone clicks on an item. I also have a search bar docked at the top of this list view, but what I'd like to do is hide this by default and have a button within the titlebar which would allow the user to show/hide the search bar.
I've tried using the following code to achieve this:
navigationBar: {
items: [{
xtype: 'button',
align: 'right',
text: 'Search'
}]
}
but this causes the button to display on every page I push into the navigation view, whereas I want the button to only appear on the root list page. Is this even possible?
Any help is appreciated.
In this case, you had better not use Ext.NavigationView. Just use normal views which toolbars.
But if you still want to use navigation view, here maybe a hint to start with:
Add that button to your navigation bar and set config hidden: true by default.
Listen for an event which can observe when your active view is changed. This may vary depending on your app structure.
When your "special" view is activated, show that button to the navigation bar, and when it is deactivated, hide that button.
In Sencha Touch 2, the TabPanel is really great when you've got 5 or less tabs. Any more than that, and it doesn't fit on a phone in portrait mode (see this fiddle).
What are my options? Is there any way to make the last button pop up a sub-TabBar? or can I put an arrow on the right end of the TabBar that makes the bar slide over for a new one? or can I make the TabBar scrollable?
You can make the tab bar scrollable using the following config:
tabBar: {
scrollable: {
direction: 'horizontal'
}
},
Here's the updated fiddle.
I would like to use an actionsheet but am unclear where to place it. I have tried adding it to a button event function but it doesn't show (the modal screen does however). I get a message about ActionSheet#show showing a component that currently doesn't have any container. Please use Ext.Viewport.add() to add this component to the viewport. Not sure how to do that - using Ext.Viewport.add() doesn't work for me - i may be because of my layout which is:
I have a viewport controller/view which is a card layout. When I click a button I have a function in the viewport controller that loads a new controller/view card in the viewport. The actionsheet is in one of these cards. The app is to big to post so hopefully it makes sense.
I have tried adding the actionsheet in my view items array but do not know how to make it show - making a reference to the xtype actionsheet doesn't return an object with a show() method it seems.
Edit: after more experiments it seems the issue is that I am placing it inside of a card - the card layout container has a relative position and the actionsheet absolute - somehow this is causing the actionsheet to go off screen. Setting card container to absolute fixes it but now I have problems with navbar positions. Suggestions?
So a bit stuck...
This is what you need to do to show your action sheet :
var actionSheet = Ext.create('Ext.ActionSheet', {
items: [
{
text: 'Delete draft',
ui : 'decline'
},
{
text: 'Save draft'
},
{
text: 'Cancel',
ui : 'confirm'
}
]
});
Ext.Viewport.add(actionSheet);
actionSheet.show();
I want to update the toolbar's content of the main view from a subview (HotelApp.views.hotelDetail)
This is my toolbar from HotelApp.views.mainView
this.topBar = new Ext.Toolbar({
dock:'top',
id:'main_page_topbar',
title:'H10 Sencha Demo',
items:[this.back,
{xtype: 'spacer'}
]
});
The toolbar already have a back button. The problem is i can see the shape of a button, but no text either ID. What i'm doing wrong??
I use this code:
var toolbar = HotelApp.views.mainView.getDockedItems()[1];
var images = new Ext.Button({
text:'Images',
id:'images',
ui:'drastic'
})
toolbar.setTitle(record.get('nombre'));
toolbar.add({items: images});
toolbar.doLayout();
Thanks!!!
I think that your problem is only that you have to add your button calling
toolbar.add(images);
instead of
toolbar.add({items: images});
I even suggest you to don't use 'id' config for your components but 'itemId'.
In this way you can always get your views components by calling
myView.getComponent('myComponentItemId');
or
myView.getDockedComponent('myComponentItemId');
for DockedComponents like toolbars.
Hope this helps.