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
Related
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'
}]
});
I'm developing an application in ExtJS 4.2.0 and using Chrome as my development browser. I've noticed that when I hide dropdown menus black squares appear in their place. I'm assuming this isn't supposed to happen! Has anyone else experienced this?
I'm using ExtJs 4.2.0 and Chrome 27.0.1453.94 m.
Thanks!
UPDATE
After some investigation I've found that it happens when using ExtJS in conjunction with the Javascript Infovis Toolkit (http://philogb.github.io/jit/). I've managed to recreate the problem reliably here:
<html>
<head>
<title>Black Box Experiment</title>
<script type="text/javascript" src="http://philogb.github.io/jit/static/v20/Jit/jit-yc.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-debug.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
//some data to put in the chart
var data = {
"name": "Test1",
"data": {
"id": "1"
}
};
//Create a new ST instance
var st = new $jit.ST({
injectInto: 'infovis',
duration: 0,
levelDistance: 50,
orientation: "top",
Navigation: {
enable:false,
panning:true
},
Node: {
height: 30,
width: 150,
autoHeight: false,
autoWidth: false,
type: 'rectangle',
overridable: true
},
NodeStyles: {
enable: true,
stylesHover: {
'color': '#dd3333'
},
duration: 700
},
Edge: {
type: 'bezier',
overridable: true
}
});
//load json data
st.loadJSON(data);
st.compute();
//emulate a click on the root node.
st.onClick(st.root);
//create our extjs panel for the buttons
Ext.create(Ext.panel.Panel,{
title: "Test panel",
width: 300,
height: 100,
items: [
{
xtype: 'button',
text: 'Open/Close Menu',
menu: [
{text: 'button 1'},
{text: 'button 2'},
{text: 'button 3'},
{text: 'button 4'},
{text: 'button 5'},
{text: 'button 6'}
]
},
{
xtype: 'button',
text: 'Click to open an alert - a black square will appear',
handler: function(){
Ext.Msg.alert("Test","A black box should now be appearing where the menu button is.");
}
}
],
renderTo: Ext.getBody()
});
});
</script>
<div id="infovis" style="width: 300px; height: 300px; margin: auto; overflow: scroll; border: 1px solid black;"></div>
</body>
</html>
In the example above, take the following steps to recreate the problem:
1. Click on the "Open/Close Menu" button twice (once to open, once to close)
2. Click on the "Alert" button. A black box should appear in the position of the menu that we've just closed.
Does anyone else see this?
We had this exact same problem. It seems to be a (Windows only) Chrome bug relating to the the visibility: hidden css rule Ext uses by default to hide the dropdown.
A workaround is to change the css hide technique in the menu config:
{
...
menu: {
items: [
...
],
hideMode: 'display'
}
}
Im going thru the exact same thing with Ext js 4.0.1
Other browsers than Chrome behave as expected.
Thanks for the workaround.
To apply this fix to all menus, rather than having to set it individually, you can just override the Ext.menu.Menu class:
Ext.override(Ext.menu.Menu,{
hideMode: 'display'
});
This completely solved the problem for me, as there were actually a lot of menus affected by this.
i have 2 panels inside a border-layout. The second one is collapsible with configs 'collapsed' and 'titleCollapse' set. When i click on the title it just shows the panel "temporary" which means that it doesn't stick but collapses automatically after i click anywhere else inside my window. It kind of floats in...
Working example: http://jsfiddle.net/suamikim/LNfm8/
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'panel1',
region: 'center',
flex: 1
},{
xtype: 'panel',
title: 'panel2',
region: 'south',
flex: 1,
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true
}]
}).show();
});
I guess this is a feature of the border-layout because if i put the 2 panels into a box-layout the collapsed panel permanently expands after a click on the title-bar.
I'm aware that the panel would stay expanded if i click on the "double-arrow" or if i click the title a second time after it has been "floated in" but i just don't want this floating-behaviour at all because i experienced it as pretty buggy so far.
I would really appreciate if anyone could tell me how to turn that feature of the border-layout off.
Thanks
Add after titleCollapse property
floatable: false
Look at the fiddle
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.