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
Related
Is it possible to define primary and hover images for an <input type="image"> element in CSS in JS? I'm trying to implement a different image on hover, but can't get the syntax correct.
margin: 40,
background: "url(/btn_google_signin_light_normal_web.png)",
"&:hover": {
background: "url(/btn_google_signin_light_focus_web.png)"
}
}
You can try
IN your CSS
.yourClass {
width: 200px;
height: 200px;
background: url("images/iamge1.jpg") no-repeat;
display: inline-block;
}
.yourClass:hover {
background: url("images/image2.jpg") no-repeat;
}
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;
}
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.
I am using extjs grouping feature on a grid, is there a way that I can remove the collapse/expand ([+]/[-]) icon without diabling collapsible functionality.
override css
.customGrid .x-grid-group-hd-collapsible .x-grid-group-title {
background-repeat: no-repeat;
background-position: left center;
background-image: none !important; //Changed
padding: 0 0 0 0px //Changed
}
then add cls: 'customGrid', to your grid
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