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.
Related
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
I have a Window, and when i click on a button i will pop open it (as a pop up). Here's my code and it works fine.
var w= Ext.widget('mywindow');
w.show();
Now, i have a tab bar panel, where when the user clicks the button i need to open it (But, not as a Pop-up). It should occupy the whole screen (Replace the previous view). How should i do this ?
The definition of my tab panel
Ext.define('App.view.TabPanelClass', {
extend: 'Ext.tab.Panel',
alias: 'widget.persontabpanel',
.....
UPDATE
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'panel',
items: { xtype: 'firstPanel' }
},....
You can use card layout to replace one view with another. Alternatively you can create a window with maximized:true config.
The normal way to go about this is to put the tabpanel inside of a viewport and give it a layout: 'card' config to cover any other views, a layout: 'fit' config would work better if this is the only view you have in the viewport. Windows aren't children of the ExtJS viewport so a window and a tabpanel would only be one item in the viewport.
A viewport will keep it's contents sized to match the browser window size even when it gets resized. See the docs on viewport here.
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.
I am trying to slide a Panel from the bottom, so that it covers the entire viewport, like the Bookmarks panel in iOS Safari. This is similar to the ActionSheet, but fulscreen, and without the dark frame around it.
this.advSearch = Ext.ComponentMgr.create({xtype: 'advanced_search', itemId: 'pnlAdvancedSearch'});
this.advSearch.autoRender = true;
this.advSearch.show({type: 'slide', direction: 'up'});
This sort of works, but the new panel doesn't fill the whole screen, and parts of it appear behind the background panel. I've tried various layouts, including fit, vbox, with varying degrees of ugliness, but the root problem seems to be that the panel doesn't know how tall it needs to be. Maybe because it doesn't have a container?
Any suggestions? Is this even the right approach, or should I try to hack the ActionSheet to expand to fullscreen, and show without the border?
Thanks.
Because your panel is floating (or I presume it is), you will need to give the panel a fixed height in Sencha Touch 1. You are very restricted in that respect. This following code should work:
var sheet = new Ext.Sheet({
html: 'hello',
style: 'color:#fff',
height: window.innerHeight,
stretchX: true
});
// replace this show with your animation
sheet.show();
As you can see, I give it a fixed height of the window and then stretch it on the X axis (y doesn't work).
I have an application where the UI components are added to a formField dynamically. As the UI controls to placed on screen is decided run-time depending on server response, sometime the screen gets filled with multiple components. As the screen elements are added, i required to scroll through the screen to select the fields place to the end of the screen. But when i scroll the form bounces, but the scroll is not happening the way expected. Now i am not able to select the UI controls placed to the end of the form.
The screen has 3 components, Title Bar, Button Dock bar, and a form field. Here is the code i have used for form field
var formBase = new Ext.form.FormPanel({
scroll: 'vertical',
xtype: 'form',
ui: 'round',
// i have added the items and it shows on UI, As things are dynamic i cant place it here
items: [{}];
});
Help me to fix the same.
Try this this should work.
Ext.apply(this, {
scroll: 'vertical',
pinHeaders: true,
dockedItems : [{}],
items : []
});
MyApp.views.MyScreenScreen.superclass.initComponent.call(this);
},
It happens because of the form height. Add height property to the object passed to the FormPanel. Something like this:
height: Ext.Viewport.getWindowHeight()-(the height of other compenents like toolbar)
Example for this would be:
height: Ext.Viewport.getWindowHeight()-50
Adding height config with some value might solve the issue.