Why iconCls is not working in tab panel bar when tab bar position is top in sencha touch 2?
It work fine when tab bar position is bottom.
Why it is not working when tab bar position is top?
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'top',
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}
]
});
output of above code:
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}
]
});
output of above code:
Why it is not working in top position?
It's the way that is defined in Sencha Touch framework classes.
If you want it your way, just override them :)
they designed it that way..
in their opinion if the tab panel is on the bottom of the screen it can look good with icon but if its on the top of the screen it doesn't go well with icon..
that being said I'm kind of agree with that decision but if you insist otherwise maybe you can try adding button as item of the tab panel and put the icon inside the button
Related
What is the proper way to change the back button text?
Ext.define('myapp.view.post.PostDetail', {
extend: 'Ext.Panel',
alias: 'widget.postdetailpage',
xtype: 'postdetailpage',
config: {
navigationBar: {
config: {
//change the back button text?
defaultBackButtonText: 'Go Back',
useTitleForBackButtonText: false
}
},
scrollable: 'vertical',
styleHtmlContent: true,
tpl: ['{content}'],
}
});
The backbutton text is set in the navigation view before displaying the detailed view.
Ext.define('mimo.view.PostPanel', {
extend: 'Ext.NavigationView',
xtype: 'postPanel',
requires: [
'mimo.view.post.PostList'
],
config: {
title: 'Blog',
iconCls: 'home',
// set the back button text here
defaultBackButtonText: 'Volver',
items:[{
title: 'Las entradas de blog',
xtype: 'postlist'
}]
}
});
</pre>
You are extending Ext.Panel. Ext.Panel does not accept the navigationBar configuration, you probably want to use Ext.navigation.View. Then on that view you can pass the defaultBackButtonText property. Otherwise if you want to customize the button further, inside of navigationBar object you want to specify a button object with button properties.
I'm using Sencha Touch, at the moment I'm adding to the view some HTML code and underneath a button. I would like have the content of the HTML code together with the button to be in the centre of the screen.
Could you suggest me how to do it? thanks for your time
Ext.define('Project.view.SettingsSuccess', {
extend: 'Ext.Panel',
xtype: 'settingformsuccess',
config: {
title: 'Settings',
iconCls: 'info',
cls: 'settings-success',
scrollable: true,
styleHtmlContent: true,
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Settings',
items: [
{
xtype: 'spacer'
},
{
text: 'Back',
ui: 'back'
}
]
},
{
html: [
'<p>You have successfully authorised.</p>'
].join("")
},
// Go to Dashboard Button
{
xtype:'button',
text: 'Visit your Home Page',
ui: 'normal'
}
]
}
});
Try that:
Pack the Html Content and the Button in a Container:
http://docs.sencha.com/ext-js/4-0/#/api/Ext.container.Container
Place the Container where you want, see the setPosition(..) Method:
http://docs.sencha.com/ext-js/4-0/source/Component3.html#Ext-Component-method-setPosition
I used this link to get started with Sencha: http://www.sencha.com/learn/getting-started-with-sencha-touch-2/
My Main.js is as follows:
Ext.define("epiduo_ped.view.Main",
{
extend: 'Ext.Carousel',
requires:
[
'Ext.TitleBar',
'Ext.Video'
],
config:
{
tabBarPosition: 'bottom',
items:
[
{
xtype: 'homepanel'
},
{
xtype: 'page1panel'
}
]
}
});
I modified my pages to extend Ext.Carousel instead of Ext.Panel. This worked as far as allowing swiping, however, now I don't have a nav bar on the bottom with buttons to toggle between the pages, which makes sense because I'm not extending Ext.tab.panel anymore. Is there a built in way in Sencha to have both or is this custom where I have to add my own html to add a nav bar on the bottom? Either way I'm not sure how to do this.
In other words: I need a carousel with 3 pages so the user can swipe between them AND at the same time add the ability for the user to use buttons on the tabBar to toggle between the pages in the carousel.
Just keep your Ext.tab.Panel and add the carousel within :
Ext.define("epiduo_ped.view.Main",
{
extend: 'Ext.tab.Panel',
requires:
[
'Ext.TitleBar',
'Ext.Video'
],
config:
{
tabBarPosition: 'bottom',
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},{
title: 'Contact',
iconCls: 'user',
xtype:'carousel',
items: [{
html : 'Item 1',
},{
html : 'Item 2',
},{
html : 'Item 3'
}]
}]
}
});
Hope this helps.
Ok I wanted to post the answer for anyone else who was struggling with this task. Basically its a carousel with toolbar docked at the bottom:
http://www.sencha.com/forum/showthread.php?228733-Control-Carousel-with-Tabbar&s=3e485e109a9b06e351a1429469603273
You would just need to style your toolbar and icons with Sencha "theming"
http://docs.sencha.com/touch/2-0/#!/guide/theming
When I create a toolbar like below the title is misplaced to the right of the last button, any ideas how to fix it?
{
xtype: 'toolbar',
docked: 'top',
title: 'Chat',
items: [{
xtype: 'button',
text: 'Places',
ui: 'back',
id: 'backToPlaces'
},
{
xtype: 'spacer'
},
{
xtype: 'button',
text: 'People',
ui: 'forward',
id: 'toProfiles'
}
I was also fighting with the toolbar. Then I discovered the navigationbar.
The title is in the center. With a button aligned left and right. (see align property)
{
docked: 'top',
xtype: 'navigationbar',
title: 'Chat',
items: [
{
xtype: 'button',
ui: 'back',
action: 'back',
text:'BACK',
itemId: 'backButton'
},
{
xtype: 'button',
ui: 'decline',
action: 'cancel',
text:'Cancel',
itemId: 'cancelButton',
align : 'right'
}
]
}
just after answered this, i found the "centered" attribute and looked at creation of title element of sencha, so just forget this above and use in your config:
var myToolbar = new Ext.Toolbar({
docked : 'top',
title: {
title: 'my Title',
centered: true
},
items : []
});
In Sencha 2 there is no "special" title element, it is created as simple element in the "items". So i future, you can just add it at right place direcly by placing the config to your docked bar:
var myToolbar = new Ext.Toolbar({
docked : 'top',
items : [{
xtype: 'spacer',
},{
xtype: 'title',
title : 'Hello World'
},{
xtype: 'spacer',
}]
});
Only with spacer it is in the middle.
It is clearly stated in the docs that NavigationBar is a private class for internal use by the framework http://docs.sencha.com/touch/2-0/#!/api/Ext.navigation.Bar and the centered attribute metioned by anj does not work as expected (at least in the latest release).
According to this post http://www.sencha.com/forum/showthread.php?161082-PR3-Toolbar-title-position-broken-when-spacers-control-button-positioning&p=691928 it is simply a bug that the title is not centered and we should wait for next release. In the meantime you might use navigationbar if you need to.
If you want to leverage something similar to how titles in Toolbar behaves of Ext.navigation.Bar. see the Ext.TitleBar http://docs.sencha.com/touch/2-0/#!/api/Ext.TitleBar
This class handles things like long titles for you by automatically adding ellipses and the title is always centered horizontally.
There is no longer a NavigationBar component which is public. It is simply used internally by NavigationView. You should never use this.
Instead, you should use Ext.TitleBar. This allows you to center the title config and also use the align property on items (normally buttons) to align them to the left or right.
It also has built in support when the title is too long, or any items are too wide. It will automatically limit the length of all items to a certain width, and add ellipse to the title if needed.
Here is a simple example:
var titleBar = Ext.create('Ext.TitleBar', {
docked: 'top',
title: 'Navigation',
items: [
{
iconCls: 'add',
iconMask: true,
align: 'left'
},
{
iconCls: 'home',
iconMask: true,
align: 'right'
}
]
});
Ext.Viewport.add(titleBar);
pardon my naivety here. I'm trying to make buttons on a ToolBar link to a new card as opposed to TabPanels. The new card will have different panel elements than the home I've watched all the video tuts and read several articles on here, yet somehow never quite manage to get it sorted.
new Ext.Application({
name: 'Demo App',
launch: function() {
this.viewport = new Ext.TabPanel({
fullscreen: true,
id: 'mainPanel',
html: 'Welcome',
cls: 'homescreen',
dockedItems: [{
xtype: 'toolbar',
ui: 'light',
title: 'Home',
items: [
{text: 'Option1', ui: 'action', flex: 1},
{xtype: 'spacer', },
{text: 'Option2', ui: 'action',flex: 1 }
]
}]
});
}
});
That's not really the point of a tab panel. It's supposed to load cards into the main panel and let you move between them. You could load a new fullscreen panel (which could have it's own tab panel or other elements) by intercepting the card switch and rendering your new separate panel like so:
new Ext.Application({
name: 'Demo App',
launch: function() {
this.viewport = new Ext.TabPanel({
fullscreen: true,
id: 'mainPanel',
cls: 'homescreen',
items: [{
title : 'Home',
html : 'Welcome'
},{
title : 'Full screen'
}],
listeners : {
beforecardswitch : function (ct, newcard, oldcard) {
if (newcard.title == 'Full screen') {
var panel = new Ext.Panel({
fullscreen : true,
dockedItems : [{
xtype : 'toolbar',
title : 'Full screen',
dock : 'top',
}],
html : 'Full!'
});
return false;
} else {
return true;
}
}
}
});
}
});
You would then have to close that panel somehow (a close button probably) so the user could return to the original tab panel. Though you are better off leaving the tab panel as is and add new cards to panels within the tab panel.
Hope this answers your question.