How to left align the My Toolbar text through option (not CSS override)?
var myToolbar = new Ext.Toolbar({
dock : 'top',
title: 'My Toolbar',
???
});
Thanks.
You can change the layout of the toolbar
layout: {
pack: 'justify',
align: 'left' // align center is the default
}
This will change the layout of the buttons also (if any). You can control this behavior adding spaces between the title and the buttons. See this article for more details http://www.sencha.com/forum/showthread.php?102989-docked-toolbar-and-button-positioning.-align-attribute-is-ignored.
Related
I'm using Sencha Touch 2, I have a PICTO declared in a button, at the moment the picto appears in black color. I would like to change it to color white.
How can I do it?
{
xtype: 'button',
text: 'Settings',
itemId: 'settingsButton',
align: 'right',
iconMask: true,
iconCls: 'settings9'
}
If you take a look at the HTML for a button that contains a picto, it looks like this :
If you click on the span with the x-icon-mask CSS class you can see that the color of the icon is set like so :
So, all you have to do is to add a CSS class to you button (ex: cls: 'myBtn') and then create add the following to your CSS file :
.myBtn .x-icon-mask {
background-color: #123456
background-image:none;
}
Hope this helped
I am new to sencha touch. I have a button with a compose icon. The icon appears in the right bottom corner of my button as per the given size of the button. Can anyone help me in aligning it? iconAlign attribute is not working for me.
{
xtype: 'button',
ui: 'action',
iconMask: true,
iconCls: 'compose',
iconAlign:'center',
width:35,
height: 25,
action:'landedInfo'
}
You have to set the padding property to 0 because the width and height you provide are too small and therefore are messing with the 'center' value you provide for 'iconAlign':
{
xtype: 'button',
ui: 'action',
iconMask: true,
iconCls: 'compose',
iconAlign:'center',
width:35,
height: 25,
padding:0,
action:'landedInfo'
}
One way to see it is to increase to width and height to, say 100x50, then you will get a centered icon without touching the padding property...
I admit this might be tricky to spot at first.
Hope this helps
Setting the margin in css helped me put the icon in the center:
.x-tab .x-button-icon.compose,.x-button .x-button-icon.x-icon-mask.compose
{
margin-left:-5px;
margin-top:-5px;
margin-right:-7px;
margin-bottom:-5px;
}
I tries this and works for me:
{
xtype: 'button',
ui: 'normal',
text:'LOGOUT',
iconMask: true,
iconCls: 'user',
iconAlign:'center',
padding:0,
cls: 'x-iconalign-top',
}
if you use icon-font, you can do it with css.
.x-button-icon {
/*Icon centering*/
position:absolute;
width:1em;//set width of icon relative(icon is font)
top:50%;
margin-top:-0.5em;//half of icon height shift back
left:50%;
margin-left:-0.5em;//half of icon width shift back
}
You can also absolutey position a component in Sencha Touch using the top, right, bottom and left configurations of any component. This works like the position: absolute CSS code.
Im writing a Sencha touch app that I want to show a popup box that has three buttons. I put a function in a controller that is supposed to display the popup, which it kind of does. My problem is that there is no background or border for the popup, so you can see right through it. Here is an example for my controller
Ext.regController('LoginController', {
'login' : function(options) {
loginPopup = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width : 250,
height : 250,
layout : {
align : "center",
pack : "center"
},
styleHtmlContent : true,
items : [Button1, Button2, Button3],
dockedItems : [
{
dock : 'top',
xtype : "toolbar",
title : 'Title'
}
]
loginPopup.show('pop');
All the items and dockeditems show up, but there is no background or border.
I would have posted a pic, but im apparently not reputable
Use sencha-touch.js and sencha-touch.css from same version of Sencha Touch. js and css files are different for every version of Sencha Touch. For development, import the whole Sencha release. See this. For prod keep only files that you require.
set background color for the overlay using the style property
style: 'background-color: color_of_your_choice'
I have a fairly simple Sencha Touch MVC app where I have some main tabs (containing lists) driven by a tab bar. When the user taps on a list item I open a new panel using SetActiveItem. This seems ok but it adds an icon (or the empty clickable space) to the tab bar. How can I stop this?
My viewport:
app.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
// put instances of cards into app.views namespace
Ext.apply(app.views, {
myList: new app.views.MyList(),
myDetail: new app.views.MyDetail()
...
});
//put instances of cards into viewport
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
app.views.myList,
...
]
});
app.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
I then have a controller that fires on an item tap in my list:
app.views.viewport.setActiveItem(
app.views.myDetail,
options.animation
);
The panel opens but adds to the tabbar as well.
I'd appreciate any pointers!
What you need to do is change the layout of myList and the other tabPanel items to card layout, and call setActiveItem in the context of myList.
When you call setActiveItem directly on the TabPanel, this is the result that you get ( another item being added to the tabBar).
Besides, you don't need to set the layout to card in the TabPanel as it is already card layout by default.
The inner items (myDetail for example) should have a fit layout.
I am trying to build a website for an iphone using sencha touch. I am newbie in sencha and ext.
I would like to have an layout with a header, footer and inner content. It can be understand as masterpage with header & footer which will be used on each page.
Header and footer should be scrollable (not docked!) and I would like to have an animation between pages.
Generally the website will have a home with header, menu and footer. If user clicks some button from menu (i.e. 'ABOUT') the page should slide to the right to 'ABOUT' page. This page will have a header, some content, back button and footer. Header & footer will look the same as on home page.
I've seen many solutions with docked header and footer but I haven't found any which works in the way I want (the problem is that I want header and footer to be scrollable).
I have tried to use a card layout panel nested in vbox panel, I have tried also card layout panel nested in fit layout panel nested in vbox panel (please find below the sample code).
//home, video and contact panels are quite similar to about panel
about = new Ext.Panel({
layout: {
type: 'vbox',
pack: 'start'
},
items: [
{
html: ['<div class="pageWrapper"><h1><span>About</span></h1></div>']
}
] // end items
});
cardPanel = new Ext.Panel({
layout: 'card',
items: [home, about, video, contact]
});
cardWrapper = new Ext.Panel({
layout: 'fit',
items: [cardPanel]
});
var mainPanel = new Ext.Panel({
layout: 'vbox',
scroll: 'vertical',
fullscreen: true,
items: [header, cardWrapper, btnBack, footer]
});
When I use above code the cardWrapper has height=0 and width=0. I can only see the home page when I set height & width of cardWrapper to some value. I have also tried to set:
autoHeight: true
For home panel, cardPanel and cardWrapper and had no luck :/
Do you have any other ideas how can I achieve this layout of the website?
First, you can have an internally scrollable header and footer when docked. I've done it before where a toolbar that is docked to the main view, but can still be scrolled horizontally. All you have to do is set the scroll property of the toolbar.
Second, setting the 'flex' property of the cardPanel to 1, and giving a fixed height (or a flex as well) to header & footer may resolve the issue you are seeing.
So:
var cardPanel = new Ext.Panel({
flex: 1,
layout: 'card',
items: [home, about, video, contact]
});
var header = new Ext.Panel({
height: 100,
html: "<h1>Header</h1>"
});
var footer = new Ext.Panel({
height: 100,
html: "<h1>Footer</h1>"
});
var mainPanel = new Ext.Panel({
layout: 'vbox',
scroll: 'vertical',
fullscreen: true,
items: [header, cardPanel, btnBack, footer]
});
Finally, what you could try is turn the cardPanel into a Carousel. You can turn off the indicator on the object with the property 'indicator'. To switch between the cards you would use the same setActiveItem call.