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'}
Related
I want to create a feedback form using extjs. How to align the button at side of screen. Kinda like the one in the photo. It is snippet of dashboard
This is a floating button. Adjust the position and shape.
var body = Ext.getBody();
var button1 = Ext.widget('button', {
text: 'Edit',
handler: function (button) {
console.log("button push");
},
floating: true,
renderTo: body,
style: 'position: absolute; bottom: 20px; right: 20px;'
});
I would recommend you to use a border layout. define region:"east" like this.
set east region opacity and modify CSS if needed.
I need to customize an Ext.panel.Tool to display the icon 'fa fa-file-excel-o' from font awesome in the header of a grid. Following what I found online I have declared the tool:
header: {
itemPosition: 1, // after title before collapse tool
items: [{
xtype: 'tool',
type: 'export',
cls:'component-tool-export',
handler: 'doExportData'
}]
},
And the css:
.component-tool-export .x-tool-export{
background-image:none !important;
content: "\f1c3" !important;
}
The tool is there and I can click on it, but the icon is not displayed. Can anyone give me some hint to fix this?
You are not adding content to the :before pseudo element, which is required to have the content displayed. You could use the following CSS:
.component-tool-export .x-tool-export{
background-image:none !important;
font: 16px/1 FontAwesome;
}
.component-tool-export .x-tool-export:before{
content: "\f1c3" !important;
}
But if you already use Sencha CMD, I would recommend to conform with Sencha's own SASS files and make use of the full feature set of Sencha Fashion:
$tool-export-glyph: dynamic($fa-var-file-excel-o $tool-glyph-font-size $font-icon-font-family);
.#{$prefix}tool-export {
#include font-icon($tool-export-glyph);
background: none;
}
I want to do inline editing in ui-tinymce. Its the text area and I want to hide its border. It should edit only when user clicks on text area. I am inline as true, but still it shows border.
$scope.tinymceOptions = {
inline: true,
menubar: false,
toolbar: "bold italic underline styleselect",
statusbar: false,
skin: 'lightgray',
theme : 'modern'
};
Try this in your tinymceOptions :
inline_boundaries: false
If still doesn't work you can always override the border from your css by :
.mce-container {
border: 0px !important;
}
When using inline mode, i had a persistent border that was visible when the editable area is active, i solved it by adding the following to my inline styles:
:focus-visible {
outline:0;
}
you can probably make it not add outline in a more "proper" way, but i find it hard to edit in the theme css files due to their messy nature.
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}
I have a jqplot for a line graph but my legend is becoming too huge. I want to implement a scrollable functionality for the legend. I tried to do the following :
table.jqplot-table-legend {
display: block;
height: 350px;
overflow-y: scroll;
}
in the css file and in my ctp file, i tried
legend: {
show: true,
location: 'ne',
rendererOptions: {numberColumns: 2}
}
as was mentioned in previous posts but none seem to work for me.
Please help.
If I apply your css before or after the chart has rendered, it works fine with one change. I had to increase it's z-index so the scroll bar is on top and clickable. Here's an example of applying it after the chart has rendered:
plot1 = jQuery.jqplot ('chart1', data, opts);
var legendTable = $($('.jqplot-table-legend')[0]);
legendTable.css('display','block');
legendTable.css('z-index',100);
legendTable.css('height','100px');
legendTable.css('overflow-y','scroll');
See fiddle here.