I am trying to change the background color of a toolbar. Right now, I am having ext-classic theme. I want toolbar background color to be dark blue, but this color change should NOT be applicable for all the toolbar's being created. Can someone guide me on how I can do this particular thing?
Thanks in advance..
You also can try using "style" config option.
Ext.define 'App.your_package.CustomToolbar',
extend: 'Ext.toolbar.Toolbar'
xtype: 'my-custom-toolbar'
style: 'background-color: #112D41;'
Cheers!
use cls config
Ext.create('Ext.toolbar.Toolbar', {
...,
cls: 'myBgCls',
...
and then css to change background:
.myBgCls{
background: blue;
}
Related
How can I set the width of a ComboBox input field? I tried to set the width and it does not work. I could not find any CSS variable for width though there is one for height ($form-field-height).
I have also tried to set width in fieldStyle.
fieldStyle: {
width: '100px'
}
I am able to change the height though. The following works.
fieldStyle: {
height: '60px'
}
code4jhon answered it, I just want to add some notes: Is your combobox is inside a parent container with a auto-fixed layout type: like hbox, vbox,...? You can't change width and height because it's controlled by its parent layout.
Width does work, you can play with this code to watch it:
https://fiddle.sencha.com/#fiddle/1g3
Best regards.
Can you try this using !important in css,
fieldStyle: {
width: 100px!important;
}
Is there any config option to put the lavel on top with center align for a textfield.
{
xtype:'numberfield',
labelAlign:'top',
labelSeparator:'',
fieldLabel: 'Title',
flex:1
}
Its working fine with label on top but aligned to left. I want to be centeraligned with top.
Thanks for your help in advance!!!
Just add a class to the label using labelClsExtra:
An optional string of one or more additional CSS classes to add to the
label element. Defaults to empty.
For example:
labelClsExtra: 'your-class'
And in your style sheet:
.your-class {
text-align: center
}
Working example: http://jsfiddle.net/qazN3/
I am trying to change theme of sencha application, i want to know how to change background color of all panels and containers of sencha touch app like touchstyle application
I changed the title bar, tab panel color, but i don't know how to change the color of panel and container.
Set the style config.
style: {
background: 'red'
}
EDIT:
You could set the cls config for your panel. E.g: cls: red-bg and in your stylesheet:
.red-bg .x-panel-body{
background-color : red !important;
}
Two ways:
First(Directly change in panel):
new Ext.Panel({
width:200,
height:200,
bodyStyle:{"background-color":"red"},
renderTo: document.body
});
Second(Add CSS class and use it in Panel's 'bodyCssClass' property):
.x-panel-body{
background-color: blue}
In ExtJS 4, I am attempting to create a vertically-oriented ButtonGroup with one button to start:
new Ext.ButtonGroup({
columns: 1,
region: "west",
collapsible: false,
defaults: {
scale: "large",
iconAlign: "top"
},
items: [{
text: "Your Books",
iconCls: "icon-books"
} ]
})
The CSS rule just specifies the background image:
.icon-books {
background-image: url(/images/book_open.png) !important;
}
However, the image is flush left, as is illustrated below:
I'm quite the n00b with ExtJS, so I'm sure there's something obvious that I am missing. I would have expected iconAlign: "top" to align the image centered horizontally in addition to flush-top, but that's not what seems to happen. I am seeing the same effects on Firefox 6.0.2 and Chrome 13.0.
What config option or CSS rule am I missing?
Thanks!
UPDATE: here is a sample project demonstrating the issue.
I think there is a problem with the image itself, or some other css class is causing this problem. Ext Js automatically centers the icon when iconAlign : 'top' is set. Here's the what's written in the css:
.x-btn-text-icon .x-btn-icon-small-top .x-btn-text{
background-position: center 0;
background-repeat: no-repeat;
padding-top:18px;
}
When I tried this myself, I had no problems at all.
As you can see, the icon is aligned perfectly. Please check if some other css is interfering with the icon class defined by Ext
For ExtJS 4.0, the following works for me: I have to override the default width of 16px as set by the x-... classes.
In my button I add my own custom class (note the 'star' class simply loads the background image).
iconCls: 'star backcenter'
And then set it to be centered, with the width:auto to override the 16px. Magically it works for me.
.backcenter {
background-position:center !important;
width: auto !important;
}
iconAllign: top from extjs just sets the icon to be above the text, not centered. To make the item centered, you have to deal with the css...
.icon-books {
background-image: url(/images/book_open.png) !important;
background-position:center;
}
I think this should do it ...
I improve this issue by adding a css property (style:{paddingLeft:'10px'}) to button.
text:'<b>Cancel</b>',
name:'btCancel',
iconCls:'btCancel',
width:89,
height:37,
style:{paddingLeft:'10px'}
i was trying to drag and drop an image inside a panel of extjs. but it didnt work.
Just want to drag and drop elements like in the draggable demos of jquery. Is there an easy solution cause i didn't found.
thanks in advance,
cheers,
Thomas
I am sorry ChrisR, forgot the code. Well i tried it in that way:
panel(with html code of an image) inside a panel. dreagable = true. But i cant drag an drop it like to position XY.
Ext.createWidget('panel', {
renderTo: 'panel1',
width: 500,
height: 500,
items: [
{
xtype: 'panel',
title: 'My Panel',
width: 150,
height: 150,
draggable: true,
html: '<img id="resizeImg" src="avus_gtr.jpg" style="width: 100%; height: 100%;"></img>'
}]
You realize you are adding an image into a panel which is draggable and insert that panel again into your main panel? It isn't the image you are making draggable, it's the panel that the image sits in which is draggable but still the code you posted looks totally wrong.
I suggest you read up on ExtJS DD first to grasp the concepts of Drag and Drop in ExtJS and how that is implemented in default Components like Panels. The way of using DD on an Ext Panel is totally different than making an image draggable. A Panel is an Ext Component with alot of built in features like DD but an image is just a DOM element on which you should implement your DD behaviour yourself.
Check the following links, they have some good info on DD in ExtJS
http://rowen.javaeye.com/blog/479133
http://examples.extjs.eu/?ex=freedrag
http://www.extensions.extjs.com/learn/Tutorial:Advanced_Custom_Drag_and_Drop_Part_1
And ofcourse the docs for Ext.dd: http://dev.sencha.com/deploy/dev/docs/?class=Ext.dd.DragDrop