We Keep Coding

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'
}]
});

Button background color in ExtJS 6 does not change

I know that there is many post on this subject, but even after looking at all and trying to use all the "cls" configs, the background color of my button does not change.
Here's my code:
var miscTools = Ext.create('Ext.panel.Panel', {
title: 'Tools',
id: 'toolsPanel',
bodyPadding: 5,
height: 200,
border: false,
collapsible: false,
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [{
xtype: 'button',
id: 'colorToolButton',
text: 'Auto color tool',
cls: 'multiColor-btn',
handler: colorWindow
}]
})
CSS:
.multiColor-btn {
background-color: yellow;
}
What am I doing wrong ?
ANSWERS
So the problem was from the gray theme of ExtJS. I needed to remove the background-image of the button in order to add a background color. Thanks to #Alexander for his answer.
Correct code:
.multiColor-btn {
background-image: none !important;
background-color: yellow !important;
}
Another option would have been to use a "afterRender" event to change the background color. However, it does just change the text background color. Thanks to #nenadg for this answer.
Ext.getCmp('colorToolButton').btnInnerEl.addCls('multiColor-btn')

Try this :
.multiColor-btn {
background-color: yellow !important;
}

Instead of cls, try using userCls property for additional styles.
http://staging.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.Component-cfg-userCls

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;
}

extjs4 replace button with an image issue

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.

Bind BasicForm to Ext.Toolbar

Hi I've got an Ext.Toolbar with form elements in it including a FileUploadField. I'd like to be able to submit this "form" using an Ext.form.BasicForm. How should I do this? Ideally it should behave as a FormPanel with a ToolbarLayout (though this doesn't render correctly).

I've just tried the other way and it seems to work ok (using a form inside a toolbar), at least for the rendering part...
You can try it out with this toolbar code...
var toolBarConversationList = new Ext.Toolbar({
items:[
{
xtype: 'button',
text: 'Some Button'
},
{xtype: 'tbfill'},
{
xtype: 'form',
id: 'toolbarForm',
border: false,
bodyStyle: {
background: 'transparent',
marginTop: 3
},
items: [
{
xtype: 'textfield',
name: 'form.text',
fieldLabel: 'Some Text'
}
]
}
});
If you want you can style up the label with labelStyle on each field. If you want to include more fields you could use a column layout and form layout for each of the fields.
To submit the form you could use Ext.getCmp('toolbarForm').getForm().submit();
I hope this is what you're looking for...