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.
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:
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;
}
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
I am new to extjs . I am trying to add tooltip preferably css based to the column headers .
How can I go about adding custom tooltip to the extjs column header using css? the extjs default way doesnt seem to work.
I tried using the custom css tooltip for the header and it didnt work .. Is it at all possible in extjs to custom tooltip on the header?
Thanks
var listView = Ext.create('Ext.grid.Panel', {
store: mystore,
multiSelect: true,
splitHandleWidth: 10,
columnLines: true,
viewConfig: {
emptyText: 'No images to display'
},
renderTo: containerEl,
columns: [{
text: ''+e.i18n.getString('notif.class')+'<span class="classic">'+e.i18n.getString('notif.class')+'</span>',
flex: 10,
dataIndex: 'CName',
tooltip: 'C Name Some name test',
renderer: function (value, metaData, record) {
return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value);
}
}, {
text: getString('notif.instance'),
flex: 30,
dataIndex: 'IDisplayName',
renderer: function (value, metaData, record) {
return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value);
}
}]
});
CSS
.ttip {
border-bottom: 0px dotted #000000; color: #000000; outline: none;
/* cursor: help; */
text-decoration: none;
position: relative;
}
.ttip span {
margin-left: -999em;
position: absolute;text-decoration: none;
}
.ttip:hover,.ttip:active, .ttip:link,.ttip:visited{text-decoration: none; color:#000;}
.ttip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 9999999;
margin-left: 0; width: 250px;
}
.ttip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.ttip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
So, I noticed you provided code for your store, but you are asking a question about the grid, which is a different component. Make sure you understand the relationship between the grid and the store. You should also use a Model definition instead of configuring fields on the store - which is the old way of doing things.
Having said that, I did come up with an interesting solution to your question: how to add a tooltip to the column header.
The column definition takes in a 'text' property that gets converted to the column header. The docs state that HTML tags are allowed, which means you can set a tooltip this way:
text: '<span data-qtip="hello">First Name</span>'
where data-qtip provides the text for the tooltip.
Note that tooltips must be enabled via:
Ext.QuickTips.init(); in your app.
To try other things use the docs Live Preview feature to quickly test out different configs and see them in action. http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column
UPDATE: a tooltip property is now(since 4.1x) available on column config. Use that.
In the definition of your columns you only need set the tooltip parameter, like this:
var cm = new Ext.grid.ColumnModel([
{
xtype: 'column',
header: '<img src="../images/lupa.png">',
align: 'center',
dataIndex: 'consultar',
width: 50,
sortable: true,
menuDisabled: true,
tooltip: 'Permisos para consultar, si lo desactiva el usuario no verá el modulo'
}
]);
I hope this help you