extjs4 replace button with an image issue - javascript

So I am trying replacing an extjs button with an image and have it display some tooltip.
The thing is I just want to display the image and I dont want the background of the extjs button.
Here is my code below.
To get an idea of what I am talking about , here is the js fiddle:
http://jsfiddle.net/nCkZN/7/
CSS:
.question {
background-image: url(../www/css/slate/btn/question.png) !important;
background-repeat: no-repeat;
}
Javascript:
{
xtype: 'button',
iconCls: 'question',
tooltip: "<b>read-only</b>:Read-only users will have read only access to all pages<br> ",
padding: '2 6 2 7',
width: 20,
height: 24
}
EDIT:I replaced the button with text and that shows only the image. But it does not dispaly the tooltip.
{
xtype: 'text',
cls: 'question',
tooltip: "<b>read-only</b>:Read-only users will have read only access to all pagess ",
height: 20,
padding: '12 6 2 7'
}

You can modify the look of the button through CSS http://jsfiddle.net/nCkZN/10/
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
cls: 'my-btn', // Add this so you can style the button
iconCls:'questionIcon',
tooltip:"<b>read-only</b>:Read-only users will have read only access to all pages<br> ",
padding: '2 6 2 7'
}]
});​
CSS
.questionIcon {
background-image:url(http://www.myimage.com/pic.png) !important;
background-repeat: no-repeat;
}
.my-btn {
border-radius: 0;
background-image: none;
border: 0;
}
you can alternatively use a regular Ext.Img and add a tooltip to it. Seems cleaner than using a button when you don't want a button. http://jsfiddle.net/nCkZN/15/
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'image',
src:'http://www.southampton.ac.uk/isolutions/computing/elearn/blackboard/small_pen.gif',
padding: '2 6 2 7',
listeners: {
render: function(cmp) {
Ext.create('Ext.tip.ToolTip', {
target: cmp.el,
html: "<b>read-only</b>:Read-only users will have read only access to all pages<br> "
});
}
}
}]
});​
What you really seem to be after is a way to add a tooltip to any component. Here's a plugin to do it.
Ext.define('Ext.ux.Tooltip', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.ux-tooltip',
/**
* #cfg html The text to put into the tooltip
*/
init: function(cmp) {
var me = this;
cmp.on('render', function() {
Ext.create('Ext.tip.ToolTip', {
target: cmp.el,
html: me.html
});
});
}
});
Now it's easy to add a tooltip to any component http://jsfiddle.net/nCkZN/17/
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'image',
src:'http://www.southampton.ac.uk/isolutions/computing/elearn/blackboard/small_pen.gif',
padding: '2 6 2 7',
plugins: {
ptype: 'ux-tooltip',
html: '<b>read-only</b>:Read-only users will have read only access to all pages<br> '
}
}]
});
​

background-image: url(../www/css/slate/btn/question.png) !important;
First problem there is you need single quotes around your url.
In your jsfiddle, changed to this:
.question{
background-image:url('http://www.southampton.ac.uk/isolutions/computing/elearn/blackboard/small_pen.gif');
background-repeat: no-repeat;
}​
Second, you probably don't want to specify an iconCls if you don't actually have any text, you're better off just passing a cls. I think the iconCls is if you pass an icon in as a config.

Related

Panel Body Transparency Bug on extjs 6.5.2

I found a bug on extjs 6.5.2 [modern] panel when setting its body background to transparent.
Here is the code that reproduces the issue.
Ext.create({
xtype: 'panel',
bodyStyle: 'background: red;',
bodyPadding: true, // don't want content to crunch against the borders
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
},
title: 'Filters',
items: [{
xtype: 'panel',
flex: 1,
bodyStyle: 'background: green;'
}, {
xtype: 'panel',
flex: 1,
bodyStyle: 'background: transparent;'
}]
});
Add this code to a sencha fiddle (inside the launch() function) and first run it using Ext JS 6.5.0.775 - Material where everything works as expected and then run it using Ext JS 6.5.2.463 - Material to see the bug (the panel with the transparent body background is painted white).
Anyway. Is there a way to patch this bug with a single css or i have to set bodyStyle: 'background: some-color;' to every panel i use for my application.
Note that i use uis generated from a sencha themer on most of my panels.
As per your requirement, you can use ui:'your_ui_name' config for ExtJS component. You can create your custom UI as per your requirement like below code example
#mixin extjs-panel-ui($ui:null, $bg-color:null) {
.#{$prefix}panel-#{$ui} {
background-color: $bg-color;
.x-panel-body-el {
background-color: transparent;
}
}
}
//For UI red panel
#include extjs-panel-ui-classic('red-panel', $red-panel-bg);
This above code should be written your scss file.
Here is my custom-ui-based-app working Git-lab library. You can
do download/clone and run in your system for testing. I hope this will help you or guide you to achieve your requirement.
Code Snippet
//Css part for creating custom UI
$red-panel-bg:red;
$transparent-panel-bg:transparent;
$green-panel-bg:green;
#mixin extjs-panel-ui($ui:null, $bg-color:null) {
.#{$prefix}panel-#{$ui} {
background-color: $bg-color;
.x-panel-body-el {
background-color: transparent;
}
}
}
//For UI red panel
#include extjs-panel-ui('red-panel', $red-panel-bg);
//For UI green panel
#include extjs-panel-ui('green-panel', $green-panel-bg);
//For UI transparent panel
#include extjs-panel-ui('transparent-panel', $transparent-panel-bg);
//Creating ExtJS panel using Custom UI
Ext.create({
xtype: 'panel',
title: 'Users',
fullscreen: true,
iconCls: 'x-fa fa-user',
ui: 'red-panel',
layout: 'vbox',
html: 'Main Panel with RED UI',
defaults: {
xtype: 'panel',
flex: 1,
margin: 5,
padding: 20
},
items: [{
ui: 'green-panel',
html: 'Panel with green UI'
}, {
ui: 'transparent-panel',
html: 'Panel with transparent UI'
}]
});

Fixing the size of a panel extjs 4.2

I'm trying to create a form that is surrounded with a small box and centered in the middle of my page. I tried to change the width and height of the panel border failed. And tried to center the form by changing the region property to center but the form remained at top left corner of the page. Any help in fixing this please?
Ext.onReady(function(){
LeaseNumber = Ext.create('Ext.form.TextField', {
id : 'LeaseNumber',
padding: '5 5 5 5',
fieldLabel: '<span style="font-size: 13px">Lease Number</span>',
width :'27%'
});
Company_Name = Ext.create('Ext.form.TextField', {
id : 'CompanyName',
padding: '5 5 5 5',
fieldLabel: '<span style="font-size: 13px">Company Name</span>',
width :'27%'
});
period = Ext.create('Ext.data.Store', {
fields: ['abbr','value','name'],
data : [
{"abbr":"daterange", "value":"daterange", "name":"Date Range"},
{"abbr":"sixmonths", "value":"sixmonths", "name":"6 Months"},
{"abbr":"threemonths", "value":"threemonths", "name":"3 Months"},
{"abbr":"onemonth", "value":"onemonth", "name":"1 Month"},
{"abbr":"fifteendays", "value":"fifteendays", "name":"15 Days"},
{"abbr":"sevendays", "value":"sevendays", "name":"7 Days"},
{"abbr":"oneday", "value":"oneday", "name":"1 Day"}
]
});
period_duration = Ext.create('Ext.form.ComboBox', {
store: period,
queryMode: 'local',
displayField: 'name',
padding: '5 5 5 5',
valueField: 'abbr',
fieldLabel: '<span style="font-size: 13px">Date Range</span>',
id:'type',
editable:false,
width: '25%',
listeners: {
},
//remove the cursor from the drop-down selection
onFocus: function() {
var me = this;
if (!me.isExpanded) {
me.expand()
}
me.getPicker().focus();
},
});
Date_Range = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: '25%',
bodyPadding: 10,
bodyStyle: 'background-color:#dfe8f5;',
border:false,
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: '<span style="font-size: 13px">From</span>',
name: 'from_date',
maxValue: new Date() // limited to the current date or prior
}, {
xtype: 'datefield',
anchor: '100%',
fieldLabel: '<span style="font-size: 13px">To</span>',
name: 'to_date',
value: new Date()
}]
});
Submit = Ext.create('Ext.Button', {
text : '<span style="font-size: 11px">View Records</span>' ,
margin:'20 30 30 70',
padding:'3 3 3 3',
id : 'view_records',
//handler : onButtonClick
});
Clear = Ext.create('Ext.Button', {
text : '<span style="font-size: 11px">Clear</span>' ,
padding:'3 3 3 3',
margin:'20 30 30 0',
id : 'clear',
//handler : onButtonClick
});
lease_info_panel = Ext.create('Ext.panel.Panel', {
region :'center',
id:'lease_info_panel',
bodyStyle: 'background-color:#dfe8f5;',
padding:'10 0 10 0',
items : [LeaseNumber,Company_Name,period_duration,Date_Range,Submit,Clear]
});
form_panel = Ext.create('Ext.panel.Panel', {
region :'center',
layout : 'border',
width: '50%',
items : [lease_info_panel]
});
viewport = Ext.create('Ext.container.Viewport', {
layout : 'border' ,
renderTo :'body',
items : [form_panel]
});
});
region:'center' doesn't do anything unless the parent container/panel has layout:'border', and what it does can be found in the border layout docs: region:'center' does only work relatively to the other items in the layout.
The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.
region:'south' is below, region:'north' is above, region:'west' is left, region:'east' is right, and region:'center' is between them, but not necessarily centered. (e.g. if some of the other regions have especially big items or no items at all).
What you are possibly searching for is a Window:
Ext.create('Ext.window.Window',{
width:200,
height:200,
title:'ABC',
draggable:false,
closable:false
}).show();
Compare fiddle.

Remove outline from extjs button

I know that in order to remove the dotted outline from a link I need to do the following:
a, a:active, a:focus {
outline: 0 !important;
}
However, when using extjs buttons, this does not work.
I have tried setting borders to none and also using outline: none !important. However, none of these things work. Also, I've tried giving it outline none to .x-btn, .x-btn-focus, .x-focus, etc. with no results.
Can anyone help me? I am testing using Ext JS 5.1.1.451 Classic.
EDIT: I am terribly sorry. I don't know how to share the Sencha Fiddle. Here is the test code. This uses Extjs 5.1
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width: 500,
items: [{
// xtype: 'button', // default for Toolbars
text: 'Button'
}, {
xtype: 'splitbutton',
text: 'Split Button'
},
// begin using the right-justified button container
'->', // same as { xtype: 'tbfill' }
{
xtype: 'textfield',
name: 'field1',
emptyText: 'enter search term'
},
// add a vertical separator bar between toolbar items
'-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
{
xtype: 'tbspacer'
}, // same as ' ' to create Ext.toolbar.Spacer
'text 2', {
xtype: 'tbspacer',
width: 50
}, // add a 50px space
'text 3']
});
}
});
You can try to click the button and see the link outline.
This is what I am referring to:
Also, if it helps, I am using Chrome on Debian.
Override the following CSS:
.x-btn-focus.x-btn-default-toolbar-small .x-btn-wrap {
outline: 1px dotted #333333;
}

ExtJS4 - Change font size of TabPanel title text

I need to change the text of the title of the tab in a TabPanel, but I don't want that this will affect every other TabPanel in the application, just this TabPanel.
I tried adding a CSS class by the cls property, by the itemCls property, and by this:
defaults: {
cls: 'aClass'
}
The CSS:
.aClass {
font-size: smaller;
}
But they all look the same:
Nothing seemed to work. How am I able to achieve that?
You should indeed use the cls property on your tabpanel and then have a custom CSS selector that would only point to that tabpanel:
See here: http://jsfiddle.net/49Dc8/
JS
Ext.require('Ext.tab.*');
Ext.onReady(function(){
// basic tabs 1, built from existing content
var tabs = Ext.createWidget('tabpanel', {
renderTo: 'tabs1',
cls: 'mytab',
width: 450,
plain: true,
activeTab: 0,
defaults :{
bodyPadding: 10
},
items: [{
contentEl:'script',
title: 'Short Text'
},{
contentEl:'markup',
title: 'Long Text'
}]
});
});
CSS
.mytab .x-tab-inner{
font-size: 13px;
}

Add margins between items in the Ext.Panel

I have a Panel with two buttons that is used inside another panel. Right now it renders the buttons correctly but I'd like to add a margin between them. How to configure layout properly to get this ?
return Ext.create('Ext.panel.Panel', {
width: 220,
height: 35,
border: false,
collapsible: false,
renderTo: renderTo,
items : [
{
xtype: 'button',
scale: 'medium',
text: this.exportButtonText,
handler: function() {
var form = this.form.getForm();
if (form.isValid()) {
var values = form.getValues();
form.reset();
this.plugin.printSettings = values;
this.progressBar.show();
this.plugin.doPrint();
}
},
scope: this
},
{
xtype: 'button',
scale: 'medium',
text: this.cancelButtonText,
handler: function() {
me.close();
},
scope: this
}
]
});
Or add this to left button definition:
{
margin: '0 5px 0 0'
}
Add this in between them:
{
xtype: 'tbspacer',
flex: 1
}

Categories