I am trying to overide the default style of a textfield compontent in Sencha Touch 2. I have tried seperate style sheets and I have tried this as well:
xtype: 'textfield',
name: 'name',
label: 'Blah',
disabled: true,
style: 'color:#000 !important',
value: 'blah blah',
How can I change the font color to black for this texfield?
To style your label, add labelCls config.
To style your textfield, use selector:
input.x-form-field[name="name"]{
color: your_desired_color;
}
Related
i have a view where i have list, now i required a header sub-title for view, which should not get scroll.
If i place a panel inside view it's start scrolling...i need a stickey one. Need help.
config: {
AccountName: '',
AccountNumber: '',
style: 'background-image: -webkit-linear-gradient(bottom, rgb(223,223,223) 60%, rgb(199,199,199) 80%);',
layout: 'vbox',
height: '100%',
scrollable: true,
items: [ .....
]
You should be able to just set the doc property of an item.
For example a docked toolbar component.
items:[
{
xtype: 'toolbar',
docked: 'top'
}
]
The docked property will not be part of the parents (your list) scrollable component.
Im trying to create a carousel where, apart of the active item, the user can preview part of the next and previous items. I made a draw to illustrate it:
I tried things like padding or margin, but anything works.
Here's a carousel to play with: http://jsfiddle.net/XpG8v/
Ext.Viewport.add({
xtype: 'carousel',
height: 300,
width: 300,
items: [{
style: 'background-color: #00ffff;'
},{
style: 'background-color: #ff00ff;'
},{
style: 'background-color: #ffff00;'
}]
});
Thanks!
Simply set the 'itemLength' config to a fixed value, for example:
Ext.Viewport.add({
xtype: 'carousel',
itemLength: 200,
// ...
});
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.
new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'dark',
items: [home, about]
});
For the ui, can I specify like, a color instead of dark and light? How can I make it a specific color or background image of our choice?
Thanks.
What you need to do is to define a new ui type using SASS and COMPASS.
So, you have to be familiar with these frameworks.
If you already install these, and you already know how to create you application theme CSS, then you can add the following line to your theme .sass file to define a custom ui
#include sencha-tabbar-ui('myUI', $tabs-myUI, $tabs-bar-gradient, $tabs-myUI-active);
As you can see I'm using some variables to set the wanted style.
In details:
$tabs-myUI: Is the Base color for "myUI" UI tabs.
$tabs-bar-gradient: Is The Background gradient style for tab bars.
$tabs-myUI-active: Is the Active color for "light" UI tabs.
You can define how many different UI you want and use them in your code in the following way:
new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'myUI',
items: [home, about]
});
This is the official Sencha way to do it.
Hope this helps.
Give your tabPanel or its children a cls attribute. This gives the html tag a class, so you can use it for styling in your CSS.
Obviously after this, you would style it using something like:
background-image: url(...);
background-color: pink;
#AndreaCammarata
I'm able change the tabpanel Color using your above sass.
But I'm to change the active colour of the tabs.
Please find below my code
#include sencha-tabbar-ui('tabcolour', #333333,'glossy',#0088CC);
VIEW:
config : {
style: "background-color: white",
ui: 'tabcolour',
tabBar : {
ui: 'tabcolour',
layout : {
pack : 'center'
}
},
layout : {
type : 'card',
animation : {
type : 'fade'
}
},
items : [{
title : 'Descrption',
xtype : 'item_description'
},{
title : 'Photos',
xtype : 'Item_Photos',
}, {
title : 'Comments',
xtype : 'item_add_viewcomment'
}, {
title : 'Videoes',
xtype : 'item_video'
}
]
}