Maybe this is just a case of me over thinking this but I have a panel and I have some text I want to put in the title but I want the text centered. I also want the default background (blue) and text color (white) changed to my custom style. I have successfully been able to change the background and text color but I cannot figure out how to center it in the panel. Here is my code below:
{ header: {xtype: 'header', margin:'5', baseCls: 'pnlName-header', title: { baseCls:'pnlName-header-header', text: '<u>Name:</u><br>Josh' }}, xtype: 'panel', flex: 15, layout: { type: 'vbox', align: 'center'}}
.pnlName-header {
color: #FF0000;
font-family: tahoma,arial,verdana,sans-serif;
font-size: 12px;
font-weight: bold;
background-color: #FFFFFF;
text-align:center;
}
I am pretty sure it has to be something simple. Any help would be greatly appreciated.
V/R,
Josh
Well after overlooking the obvious as I figured I was doing I found a config called: titleAlign. So I simply set titleAlign: 'center' and that did the trick. Thanks everyone.
How about the same approach you used in header?
http://jsfiddle.net/zk31wo5j/1/
//your panel code
cls:'center',
html: 'some text pretty centered'
where
.center{
text-align:center;
}
Related
Despite the same configuration works as expected on Firefox, the icon is not displayed on Chrome.
Here is my actioncolumn configuration:
xtype : 'actioncolumn',
width : 95,
align : 'center',
sortable : false,
menuDisabled: true,
items : [{
iconCls : 'icon-delete',
tooltip : 'Delete',
handler: function(grid, rowIndex, colIndex, node, e, record, rowNode) {
// delete action
}
}]
Here is the .css rules for the actioncolumn and the related iconCls:
.x-action-col-icon {
color: #919191;
font-size: 18px;
height: 18px;
width: 18px;
cursor: pointer;
vertical-align: middle;
display: inline-block;
line-height: 1;
}
.icon-delete:before {
font: 18px/1 FontAwesome;
color: #dd6550;
content: "\f056";
}
The screenshot for Chrome:
And for Firefox:
Please check this fiddle, I have checked it and found working fine in both Chrome and Firefox browser.
Note: As of now I have included font-awesome and css (provided by you) in index.html
Screenshots attached:
For instance, there is a label (without textfield!):
Ext.create('Ext.form.Label', {
id: "lb1",
height: 20,
html: "Title"
cls: 'cls1'
})
How can I change the background color dynamically without a CSS?
There are couple of ways to achieve that, but all of them use manipulate CSS.
1. Change css class on label
CSS classes
.cls1 {
background-color: #fff;
}
.cls2 {
background-color: #ccc;
}
ExtJS
label.removeCls('cls1');
label.addCls('cls2');
2. Change style on DOM Element
label.getEl().setStyle('background', '#CCC');
Good Luck!
I have a tab panel with two tabs.
I wish that both tabs would contain images alongside their text, yet the image on each tab would be shown only when the tab is clicked, otherwise it won't be shown (or replaced).
Can it be done?
You could probably do it by some css trick.For example,try this.
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
id: 'tabPanel',
activeCls: 'activeTabCls',
renderTo: document.body,
items: [{
title: 'Foo',
}, {
title: 'Bar'
}]
});
Your CSS could be something like:
.activeTabCls .x-tab-default-top-active{
background-image: url(http://sencha.com/favicon.icon)!important;
background-position-y: 4px;
background-repeat: no-repeat;
padding: 0px 0px 0px 15px;
}
Note : Not Tested.Some modifications could be needed.
am facing a problem in changing the default check box image.
I have added two images checked.png and unchecked.png. and added two css classes for checked and unchecked. Only unchecked image is displaying but when i check it checked image is not displayed.
I have modified the default buttons by doing the same things below and it works well for buttons. But for checkbox this is not working.(pressedCls is not there in checkboxfield). Here is the small snippet for your reference.
{
xtype: 'checkboxfield',
ui:'plain',
checked: 'true',
action: 'didnotassisted_Action',
id: 'id_assignment_didNotAssisted',
cls: 'closeout-checkbox-unchecked',
// pressedCls: 'closeout-checkbox-checked'
},
css:
.closeout-checkbox-unchecked{
background-color:transparent;
background-image:url('../images/unchecked.png');
height: 44px;
width: 44px;
}
.closeout-checkbox-checked{
background-color:transparent;
background-image:url('../images/checked.png');
height: 44px;
width: 44px;
}
If there is any different approach to complete that please help me out.Thanks in advance.
#Andrea, Here is the screen shot of what am getting after applying your code.
Sencha is not using a class to differentiate the checkbox status, it leverages instead the :checked pseudo-class selector of the checkbox.
You can change the checkbox icons adding a pseudo-element :after to its .x-field-mask sibling.
Give ui: 'custom' to your checkboxfield and add these CSS:
.x-field-custom .x-input-checkbox:checked + .x-field-mask:after {
content: "";
height: 45px;
width: 45px;
position: absolute;
top: 0;
right: 1em;
background-image:url(http://png-4.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png);
background-size: contain;
display: block;
}
.x-field-custom .x-input-checkbox + .x-field-mask:after {
content: "";
height: 45px;
width: 45px;
position: absolute;
top: 0;
right: 1em;
background-image:url(http://png-2.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_unchecked.png);
background-size: contain;
display: block;
}
Tested on Sencha 2.2.1
Team.
Does anyone know how to add image inside extjs textfield
Basically I have text field where I am showing empty text by default and besides that I want to put one image ( Image should be inside text field.) is there any way to do it.
Ext 4.1
Your field:
{
xtype: 'textfield',
fieldLabel: 'Field with image',
emptyText: 'placeholder text', // important, or image will not show
name: 'name',
emptyCls: 'empty-text-field'
}
Your css:
.empty-text-field {
background-image:url(/images/cross.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
If you want show images in all empty text fields, you only have to add this css:
.x-form-empty-field {
background-image:url(/images/cross.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
(x-form-empty-field is the default emtptyCls for a form field)
don't forget the emptyText
screenshot