I have a extjs tab panel created as following:
menuTabs = Ext.create('Ext.tab.Panel', {
border: 0,
region: 'center',
cls: 'mainTabPanel',
items: [
{
title: 'Tab 1',
html: 'Tab 1 Details'
},
{
title: 'Tab 2',
html: 'Tab 2 Details'
}
]
});
Now I want to style the panel for changing:
background of tab bar
button background
body background.
Can someone help me with this?
The first and the last are easy:
/* 1. background of tab bar */
.mainTabPanel .x-tab-bar-default-top {
background: green;
}
/* 3. body background.*/
.mainTabPanel .x-panel-body-default {
background: pink;
}
The button part is harder because you have borders, shadows, different states (active, hover,...) => I've only tested it in Chrome this won't work in < IE9 and haven't tested it in other browsers. You need to check every browser and make sure it works and maybe add browser dependent css for buttons.
/* 2. button background */
.mainTabPanel .x-tab-default {
background: yellow;
border: none;
box-shadow: none;
}
.mainTabPanel .x-tab-default.x-tab-default-active {
background: purple;
border: none;
box-shadow: none;
}
http://jsfiddle.net/Vandeplas/hsELW/1/
Related
Creating an EXT js file:
Add border to header and body of tabpanel.
I have tried adding below stuff in .scss file, but did not work.
*.scss
.maintabpanel1 {
.x-tab-bar-plain { border:1px solid red !important;
}
.x-tab-bar-top+.x-panel-body, .x-panel.x-tabpanel-child {
border: 1px solid green !important;`enter code here`
}
You need to provide cls and bodyCls to your tabpanel.
An cls optional extra CSS class that will be added to this component's Element. The value can be a string, a list of strings separated by spaces, or an array of strings. This can be useful for adding customized styles to the component or any of its children using standard CSS rules.
A bodyCls class, space-delimited string of classes, or array of classes to be applied to the panel's body element.
In this gitlab-repo, I have created a demo using ExtJS6.2. I hope this will help/guide you to achieve your requirements.
screenshot from my local.
CODE SNIPPET
Ext.define('GeoLocation.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
cls: 'x-geo-tab',
bodyCls: 'x-geo-tab-body',
controller: 'main',
titleRotation: 0,
tabRotation: 0,
activeTab: 0,
items: [{
title: 'Tab 1',
html: 'it is tab 1'
}, {
title: 'Tab 2',
html: 'it is tab 2'
}, {
title: 'Tab 3',
html: 'it is tab 3'
}]
});
CSS part
.x-geo-tab {
.x-tab-bar-default {
background-color: #ece2e2;
border: 2px solid red !important;
padding: 5px;
.x-tab-bar-strip-default {
background-color: red;
height: 2px !important;
}
}
.x-geo-tab-body {
border: 2px solid green !important;
padding: 10px;
}
}
I have toastr success and error messages shown in my application. I changes the colors of the background and the font color. I want to change the icon colors shown in the messages. I have searched everywhere for this but I can't find a way to change the fill color of the icon or at least changing the icon. Below is a screenshot of success message
Below is for the error message,
I want to change the icons shown in these messages of change the filling color of the icons. The code in js file,
.success(function(data) {
toastr.success('Successfully Build ', 'Congratulations!', {
closeButton: true
});
}).error(function(err) {
toastr.error('Cant Build', 'Error', {
closeButton: true
});
In css,
#toast-container > .toast-success {
background-image: none;
background-color: #e9e9e9;
color: black;
}
#toast-container > .toast-error {
background-image: none;
background-color: #e9e9e9;
color: red;
}
Toaster uses background PNG images (24x24 pixels) for the icon so your best option is simply to replace them with a colored version you prepared beforehand.
Let's say you prepare a 'black checkmark' PNG of the same size, then the CSS will be:
#toast-container>.toast-success {
background-image: url(<insert here the url pointing to your new PNG>)!important;
}
Now as to creating the icon in the color you want, check flaticon.com (or other similar sites). You should be able to find royalty-free icons and download them of the size and color you want.
Try to use this sample code to have crimson heart
style.css
#toast-container > .toast-success:before {
content: "\f004";
color: crimson;
}
I know this is an old question, but I found a better solution (without re-writing the existing toastr templates icons).
If you don't want to change the current icon of 'toastr-success' but want to create new "templates" with different icons - you can use this pass a specific icon class in the JS:
toastr.info("Click To Open", "more text",{iconClass:"toast-custom"});
And then just set the CSS of "toast-custom":
/* this will set the toastr icon */
#toast-container > .toast-custom {
content: "\f00C";
}
/* this will set the toastr style */
.toast-custom {
background-color: purple;
}
I hope this will help!
CSS
#toast-container > .toast {
background-image: none !important;
}
#toast-container > .toast:before {
position: relative;
font-size: 24px;
line-height: 18px;
float: left;
margin-left: -1em;
color: #FFF;
padding-right: 0.5em;
margin-right: 0.5em;
}
#toast-container .toast{
background-color: #1b75bc !important;
}
#toast-container> .fa-check , .toast {
background-color: #328b17 !important;
}
#toast-container> .fa-trash , .toast {
background-color: #590619 !important;
}
.toast-message{
font-family: Calibri;
}
JS
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "3000",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "300",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut",
iconClasses: {
error: 'fas fa-trash',
info: 'fa fa-info',
success: 'fas fa-check',
warning: 'something',
},
};
enter image description here
i am working in extjs4. i have view with ganttChart. I want to change color of splitter line which is between treecolumn and gantt. i am creating gantt as=
var gantt = Ext.create("Gnt.panel.Gantt", {
itemId :'project-list-gantt-chart',
cls : 'projectlistganttchart',
enableTaskDragDrop: false,
columnLines :true,
lockedGridConfig :{
split: false
},
viewPreset : 'customPreset',
columns : [{
xtype : 'treecolumn',
sortable: true,
dataIndex: 'Name',
}],
And i am including this gantt in my following form panel=
Ext.define('GanttChart' ,{
extend: 'Ext.form.Panel',
border: false,
})
By using panel's add method i am including it as-
afterrender : function(){
var me = this;
me.add(gantt);
}
So for changing color, i change css as-
.x-panel-default{
border-color: red;
padding: 0;
}
But its changing color of all panels within my project. So how to override this css so that it will change color of only gantt.
Use the ui cfg param for that:
// add this config line to your panel that host the gantt
ui: 'gantt'
and add this css
.x-panel-gantt{
border-color: red;
padding: 0;
}
Note that the ui is meant for exactly such things.
You might want to refer to this fiddle. Note that it may miss some css classes but I guess it should show you the trick. And please note that you will need to set the border in a correct way because based on the theme the border might be 0px. That is also done in the example. In addition here is the demo code:
Javascript
Ext.create('Ext.panel.Panel', {
title: 'test',
height: 200,
width: 200,
ui: 'custom',
renderTo: Ext.getBody()
})
CSS (just copied from developer tools)
.x-panel-body-custom {
color: black;
font-size: 13px;
font-size: normal;
}
.x-panel-custom{
border: 1px solid red;
padding: 0;
}
.x-panel-body-custom {
background: white;
border-color: #157fcc;
color: black;
font-size: 13px;
font-size: normal;
border-width: 1px;
border-style: solid;
}
.x-panel-header-custom {
background-image: none;
background-color: #157fcc;
}
.x-panel-header-custom-horizontal-noborder {
padding: 10px 10px 10px 10px;
}
.x-panel-header-custom-horizontal {
padding: 9px 9px 10px 9px;
}
You can use id of the component(panel) itself or any top level id of the component in which the panel is rendered like
#toplevelid .x-panel-default{
border-color: red;
padding: 0;
}
You should be able to get your gantt item and change the css class of it using something like:
var ganttItem = Ext.getCmp('your item id');
ganttItem.addCls('your css class for specifc color');
I haven't tested this but you can get the idea.
If you want to reset the css class for the item use .setCls() to set it up from scratch.
How can I customize a Sencha Touch picker completely?
Here is what the default picker looks like.
I've managed to customize the frame, center, and buttons but I can't find anything to allow me to customize that blue gradient toolbar. I can't even find a place to make it transparent.
My Picker with the code below
Code:
Ext.define('FOLUI.view.pageValuePicker', {
extend: 'Ext.picker.Picker',
alias: 'widget.pageValuePicker',
config: {
cls: 'PickerFrame',
height: 200,
itemId: 'pageValuePicker',
doneButton: {
cls: 'PaginationButton',
width: '80px',
pressedCls: 'PaginationButtonPressed'
},
cancelButton: {
cls: 'PaginationButton',
width: '80px',
pressedCls: 'PaginationButtonPressed'
},
slots: [
{
xtype: 'pickerslot',
cls: [
'PickerMiddle'
],
itemId: 'pageValuePickerSlot',
align: 'center',
data: [
{
text: '1',
value: 1
},
{
text: '2',
value: 2
},
{
text: '3',
value: 3
},
{
text: '4',
value: 4
},
{
text: '5',
value: 5
},
{
text: '6',
value: 6
},
{
text: '7',
value: 7
},
{
text: '8',
value: 8
},
{
text: '9',
value: 9
}
],
name: 'pageValuePickerSlot'
}
]
}
});
CSS:
.PaginationButton {
background: #002c42 !important;
color:#ffffff;
font-size: 16px;
font-weight: bold;
border-radius: 4px;
border: 1px solid #000d13;
-webkit-box-shadow: inset 0px 1px 0px #678796;
}
.PaginationButtonPressed {
background: #00344e !important;
color:#ffffff;
font-size: 16px;
font-weight: bold;
border-radius: 4px;
border: 1px solid #000d13;
-webkit-box-shadow: inset 0px 1px 0px #678796;
}
.PickerFrame {
background: #dae4ec !important;
border: 1px solid #6890b0;
-webkit-box-shadow: inset 0px 1px 0px #ffffff;
}
.PickerMiddle {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #022c42 !important;
font-weight: bold;
line-height: 45px;
background-color: #ffffff !important;
border-radius: 6px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border: 1px solid #6890b0;
-webkit-box-shadow: inset 0px 0px 13px 3px #cbcbcb;
}
You can style ST against the default element classes it uses. Easiest is to "Inspect Element" in your browser and check what class the relevant item has (ST class names start with x-, like x-toolbar). If you want to prevent styling any items which aren't part of your modified widget, you can give your widget a unique id/class and prefix your CSS rules with that.
If you feel awkward overriding its existing styling from your own CSS file, or if you want to dig deeper into styling/theming ST: ST uses SASS/Compass to build CSS files. It's a bit of a pain to set up, but the upside is that you can use SASS/Compass functions to create your own gradients, color-schemes, and such. Plus the result is that you end up with only one CSS file containing everything.
The picker has pseudo class with gradient. But chrome's dom inspector has some strange behaviour and may not displays pseudo classes. So you can't find it. Go to the CSS file and edit styles there.
You can really extend the options you wish to configure by using this trick:
items: [
{
xtype: 'selectfield',
label: 'Choose one',
usePicker: 1, // convert selectfield into a picker
defaultPhonePickerConfig: { // customise text values displayed
doneButton: 'Select',
cancelButton: 'Cancel'
},
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
}
]
Now as to the styling which you wish to avoid, simply do not include it. You are seeing the ST default styling being called in. You've managed to override part of the styling, and by showing you this example above where a select can be a picker, you can see just how varied a location where styling may be called in.
Primary culprit (ST2.2):
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
Comment out the "all" line, then call in only the individual components you wish to be default styled.
// #import 'sencha-touch/default/all';
// replacing direct reference to exact path of component mixin
// all in relation to the "sencha-touch" folder which is pathed in config.rb
#import 'sencha-touch/default/src/_MessageBox.scss';
#import 'sencha-touch/default/src/_Toolbar.scss';
Once you get used to the structure of the mixin files and how it is all referenced and called, you can simplify your life by only calling in the absolute minimum structure from ST, namely the "base". Take a copy of the mixin components for what you wish to use into /resources/sass/mixins, modify the styling to suit your needs. The result is a far smaller stylesheet generated, cutting out all the hair-tearing overriding of defaults.
I am new to sencha touch.
How do we change the background color of a button to white? I have a button with two images in each corner. I want the button to be plain white.
I tried using css like this:
.quest {
background: url(../images/quest.jpg) no-repeat left,
url(../images/rightarrow.jpg) no-repeat right;
background-color: white;
border: none;
border-color:white;
padding-left: 50px;
text-align: left;
}
My button is here:
{
xtype: 'button',
text: '<div class="quest">Info</div>',
labelWidth: '100%',
name: '',
handler: function() {
}
}
My button has grey borders (Grey default button color in sencha) with white color in mid. How do i make it completely white? Please help.
I have even tried:
style: "background-color: white"
Using 'cls' attribute solved my problem.
{
xtype: 'button',
cls: 'btn',
text: '<div class="person">People</div>',
labelWidth: '100%',
},
In my app.css define
.btn
{
background-color: white !important;
background-image: none;
}
We have to redefine both background-color and background-image properties so that the default sencha-touch.css properties are overridden. Thank you Thiem Nguyen for your help.
This should render your desired button :)
config: {
ui: 'plain',
text: 'Your Text',
style: 'background-color:white;'
}
Just like Thiem Nguyen said, this will work
{
xtype:'button',
text:'text',
ui:'plain',
style:'background-color:white'
}