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'
}]
});
Related
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;
}
I have an ExtJS app where I'm using some toolbars with a background behind them so I'm making the toolbars and the buttons transparent. Some of my users are still stuck on IE9 (I know) and the buttons aren't displaying correctly.
See fiddle here for an example: fiddle
In Chrome, or IE 10+, the toolbar button is transparent. It looks like this:
In, IE9 however, it looks like this:
Fiddle code:
Ext.onReady(function () {
var win = Ext.create('Ext.window.Window', {
layout: 'fit',
height: 300,
width: 300,
autoShow: true,
tbar: {
style:'background-color:orange;',
items: [{
text: 'hi',
style: 'background:transparent;'
}]
},
html:'some html'
});
});
Ext js framework is creating table dom for button for IE9. We can prevent it by giving frame:false & giving the border & padding styles in style config.
frame:false,
style:'background-color:transparent;border:1px solid #d8d8d8!important;border-radius: 3px;padding: 3px!important;'
Full Code:
Ext.onReady(function () {
var win = Ext.create('Ext.window.Window', {
layout: 'fit',
height: 300,
width: 300,
autoShow: true,
tbar: {
style:'background-color:orange;',
items: [{
text: 'hi',
frame:false,
style:'background-color:transparent;border:1px solid #d8d8d8!important;border-radius: 3px;padding: 3px!important;'
}]
},
html:'some html'
});
});
Here is the working example
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.
I am new at Extjs and Sencha. i started to design my UI and i could successfully add an iconCls with buttons. now i need to add icon to a checkitem menue http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.menu.CheckItem
but i couldn't ! even though i use iconCls property.
anyone have done this before ?
If you just want the icon right next to the text, you can just insert an image after the menu item is rendered
Ext.create('Ext.menu.Menu', {
width: 100,
height: 200,
floating: false,
renderTo: Ext.getBody(),
items: [{
xtype: 'menucheckitem',
text: 'select all',
listeners: {
render: function(comp) {
Ext.DomHelper.insertAfter(comp.getEl().down(".x-menu-item-icon"), {
tag: 'img',
src: "http://flyosity.com/images/_blogentries/networkicon/stepfinal2.png",
width: 16,
height: 16
});
}
}
}]
});
Ideally, you'd create a plugin or a subclass so you can reuse this functionality. The above code does not realign the separator, it's single separator for the entire menu, but it should give you a head start
I'm having trouble getting a panel to fill the space within its container panel. The container is a panel with a vbox layout having two child panels. I looked at Extjs how to set 100% height for vbox panel
and have something similar but it doesn't seem to work.
Screenshots:-
http://i.imgur.com/nAbCr.png
The screenshot is from when i use a 'fit' layout or dont even have the combobox or optionsview in a containing panel. So, what i want is for the 'options' panel to extend all the way down till the 'results' panel.
with the present vbox layout this is what i get - http://i.imgur.com/cB0k1.png
Ext.define('PA.view.CreateReportView', {
extend: 'Ext.panel.Panel',
alias: 'widget.createreportview',
id: 'createreport-panel',
requires: [
'PA.view.OptionsView', // options panel
'PA.common.Connection'],
title: 'Create Report',
items: [{
xtype: 'panel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
border: false,
height: '50px',
items: [{
xtype: 'combobox',
....
}]
}, {
xtype: 'panel',
border: false,
flex: 1,
items: [{
xtype: 'optionsview', // options panel
style: {
paddingTop: '10px'
}
}]
}]
}]
});
The value of height: should be a number, not a string. So use height: 50 instead.
I think you have it close to what you need. Couple of observations:
1. Heights need to be set as integers (no px suffix)
2. Each container that will have children should have a layout defined for them, even though there is default - it might not be what you want.
Here is your layout working reasonably well http://jsfiddle.net/dbrin/NJjhB/
One other suggestion I would add is to use a tool like Illuminations for Developers - a firebug plugin that knows about ExtJS framework.