I'm using Sencha Touch 2. I would like to use an Icon included in the Framework.
At the moment I'm using this code, but I have some glitch with the image being displayed, the transparency seems lost.
I would like to know if his is a proper way how to implement it thanks
items: [{
xtype: 'button',
icon: 'resources/themes/images/default/pictos/settings9.png',
ui: 'normal',
itemId: 'settingsButton',
align: 'right'
}]
I suggest you refer to the answer to this question to learn how to use icons in tabbars :
Icon for sencha touch tabpanel tabs
Hope this helps
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 working on an MVC app in Sencha Touch 2 and am having trouble getting a list to display in a nested panel.
The structure of the app has a main view which is a tab panel. One of the items in the tab panel is a defined panel, xtype: 'homepanel'.
An item in this panel is the list xtype: 'newslist' that is linked to the appropriate store and model files.
The list does not display unless I change its parent homepanel to a type, Ext.navigation.View.
What am I missing in the definition of homepanel' as a panel that prevents the display of the list?
Ext.define('ACSO.view.Home', {
extend: 'Ext.Panel', //<--works if Ext.navigation.View
xtype: 'homepanel',
requires: [
'Ext.TitleBar',
'ACSO.view.NewsList'
],
config: {
title: 'Home',
iconCls: 'home',
cls: 'home',
scrollable: true,
styleHtmlContent: true,
items: [{
xtype: 'newslist'
}]
}
});
Your Panel has no layout.
I suggest you try to add the following in your panel config:
layout:'fit'
Hope this helps
Try adding layout: 'card' to your panel's config
Layout: fit didn't work out for me.
However, adding layout: 'card to the parent Ext.Panel worked!
The UI component which is within the Ext.Panel is no longer hidden via the display: none !important;.
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.
After having a look around for how to make a vertical tabbar dock to the right of a panel for ages, it doesn't seem like something it supports. So I am looking for the best way to manually achieve what I want.
I want to use as much core sencha stuff as possible. I've looked at a few things but am currently tinkering with a vbox panel with buttons as the items, with the idea that I add some extra styling to them to make it look more like a tab from a tab panel.
Forgive me for the vague partial code below, but I have been adding and removing various options and have got a little lost. Hopefully it will give you an idea of how I am trying to achieve a right docked vertical tab panel though.
I'd appreciate pointers on how to steer the UI back towards the look of the TabPanel or an alternative.
Thanks in advance
{
xtype: 'panel',
dock: 'right',
width: 120,
height: '100%',
layout: {
type: 'vbox',
align: 'start'
},
ui: 'light',
defaults: {
xtype: 'button',
margin: '10 10 0 0',
iconMask: true,
ui: 'plain',
color: '#fff'
},
items: [
{
text: 'test',
iconCls: 'time',
},
{
text: 'test2',
iconCls: 'time',
}
],
}
Check the source of Ext.TabBar. It extends Ext.Panel and there isn't much magic/code going on.
You might need to tweak the CSS-side as well.
You seem to be on the right track already, though.
Please see the demo: http://jsfiddle.net/JeaffreyGilbert/NGrry/1/
How to make content of tab panel fill the center area? The heading should be on the top, below toolbar.
Expected layout: http://dev.sencha.com/deploy/touch/examples/kitchensink/. I think the Source isn't complete, only the tabPanel itself.
Please help.
Usually to do that sort of layout I've had to nest panels and use empty panels with the flex attribute set to 1.
I adjusted your code to show what I mean http://jsfiddle.net/r9c2M/
For example to center the text 'Home' underneath the toolbar title I changed the first tabpanel item to
{
title: 'Home',
layout: 'vbox',
items: [
{layout: 'hbox',
items: [
{flex: 1},
{html: '<h2>Home</h2>'},
{flex: 1}
]},
{flex: 1}
],
iconCls: 'home',
cls: 'card card1'}
Also the tabpanel should just be an item of the main viewport panel, not a dockedItem. That was messing up the layout too.