We Keep Coding

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

Setting transparent background on a button isn't working in IE9

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

How to add Columns in Ext.js within ext.panel.Panel

Im designing a screen in which the header has a button with certain functionality. To acheive this I used
Ext.panel.Panel
Now I want to add columns within this screen below the header.
This is my code:
var screen = Ext.create('Ext.panel.Panel', {
title: 'Search',
tools: [{
xtype: 'button',
text: 'Click',
//code here for button functionality
}],
layout: 'column',
items: [{
text: "column1",
width: .5
}, {
text: "column2",
width: .5
}]
})
The error Im getting is that I can get the button to work on the header, but cannot see the columns. Is there a solution to fix this?
I have also included the image. The black rectangle shows how my columns are appearing.

In both Ext 4.1.1 and Ext 4.2.0 the following changes are required in your code:
Rename property text to title in the columns config
In the same config, rename property width to columnWidth
Add renderTo: Ext.getBody() attribute
jsfiddle seems to impose some limitations on how extjs panel is rendered. While I am not sure what's the issue with jsfiddle, here is a Plunker link that displays panel as expected.
IMO, ExtJs GridPanel is a better way to add tool bar to your panel and display tabular data. Read more about it in Sencha docs

I finally worked out the solution for my question. I needed a button functionality in the header and also columns which could have functionality like arranging the items in ascending/descending order etc (basically the grid.column)
var screen = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Search',
tools: [{
xtype: 'button',
text: 'Click',
//code here for button functionality
}],
items:
[{xtype: 'gridpanel',
columns: [
{
header : "Column 1",
width: .5
},
{
header : "column2",
width: .5
}],
}],
});

ExtJS Tab Panel Loader can't load the html page's javascript

index.html
<script type="text/javascript" src="resources/js/ext-all.js?"></script>
<script type="text/javascript" src="resources/js/tabs-adv.js?"></script>
tabs-adv.js
create a tab panel then load the vehicle.html with loader
....
var tabs = Ext.widget('tabpanel', {
renderTo: 'tabs',
id : 'tabspanel',
cls : 'MainPanel',
resizeTabs: true,
enableTabScroll: true,
width: window.innerwidth,
height: window.innerHeight - 30, //30 because menu height is 30px
tabBar: {
layout: { pack: 'center' }
},
defaults: {
autoScroll: false, //close the tab scrolling
bodyPadding: 0 //must 0,not margin at all
},
items: [
{
closable: false,
//html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="vehicle/vehicle.html" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
loader: {
autoLoad:true,
url :'vehicle/vehicle.html'
},
iconCls: 'bus32',
title: 'Vehicle Manage'
}]
})
vehicle.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Ext includes -->
<script type="text/javascript" src="vehicle.js?<?php echo time(); ?>"></script>
<title>Untitled Document</title>
</head>
<body>
aa
<div id="toolbar"></div>
</body>
Unfortunately Loader didn't load the vehicle.js
loader only load the html content, but not included vehicle.html javascript.
any way to solve this problem?
p/s: i m facing this problem EXT JS failed to load multi pages at the same time , both tabs are load at the same time with the ext-all.js will cause the application error, i have to try to use loader to prevent this happen,
I have tried, if the tabs are loaded with different ext-all.js will not be occured error, example first tab load ext-all.js, second tabs will load ext-all1.js 3th tab will load ext-all2.js.
UPDATE
vehicle.js and driver.js also having the grid panel
vehicle.js
Ext.define('MyApp.view.MyVehicleGridPanel', {
id:'mygridpanel',
extend: 'Ext.grid.Panel',
renderTo: Ext.getBody(),
width: window.innerWidth,
header: false,
height: window.innerHeight,
store: UserStore,
multiSelect: false,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
columns: [
{
xtype: 'gridcolumn',
dataIndex: '_id',
text: 'Vehicle ID'
},
{
xtype: 'gridcolumn',
width: 126,
dataIndex: 'Plat_No',
text: 'Plat Number'
},
{
xtype: 'gridcolumn',
width: 200,
dataIndex: 'Name',
text: 'Added By'
}
],listeners: {
itemclick: function(dv, record, item, index, e) {
if (record.get('_id') > 0){
Ext.getCmp('BtnEdit').enable();
Ext.getCmp('BtnDelete').enable();
}else{
Ext.getCmp('BtnEdit').disable();
Ext.getCmp('BtnDelete').disable();
};
}},
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
cls: '',
width: 65,
id : 'BtnAdd',
icon: '',
iconCls: 'add',
text: 'Add'
},
{
xtype: 'button',
cls: '',
id : 'BtnEdit',
width: 65,
icon: '',
iconCls: 'edit',
disabled: true,
text: 'Edit'
},
{
xtype: 'button',
cls: '',
id : 'BtnDelete',
width: 65,
icon: '',
iconCls: 'delete',
disabled: true,
text: 'Delete'
},
{
xtype: 'button',
cls: '',
id : 'BtnRefresh',
width: 65,
icon: '',
iconCls: 'refresh',
text: 'Refresh'
}
]
}
]
});
me.callParent(arguments);
}
});
var gridwin = Ext.create('MyApp.view.MyVehicleGridPanel');

The loader is not supposed to load your javascript. With extjs, you should have only one javascript file. Use events to execute javascript code while rendering your panels, especially use the render event.
Put your vehicle.js in your main .js file and remove the last line. This one goes into the event listener.
Change your tab item using an event handler
items: [{
closable: false,
loader: {
autoLoad:true,
url :'vehicle/vehicle.html'
},
iconCls: 'bus32',
title: 'Vehicle Manage',
listeners: {
render: function(){gridwin = Ext.create('MyApp.view.MyVehicleGridPanel')}
}
}]
General remark 1: Do your homework and read the documentation. Stick to the recommended way. Why are you trying to work in such a convoluted way ? It shows that you didn't take the time to read and apply the basics.
General remark 2: You should concatenate all your .js sources in the production environment. The best thing is to use sencha cmd. You have to create an empty app, an then copy all your project into that empty app.

It's definitely possible to mix up ExtJS with static pages - rather suitable for print previews or alike.
A secondary DOM needs to be created within an iFrame, which will cause the JS on page to execute - because it circumvents the ExtJS Loader completely - and therefore scripts will be properly parsed.
Here's an example, proven to be working (reduced to the least required):
items : [{
xtype: 'component',
autoEl: {tag: 'iframe', src: ''}
}],
listeners: {
boxready: function(){
this.items.items[0].el.dom.src='vehicle.html';
}
}
The listener for boxready causes some delay in execution (which was required for what I did).
When reading other answers, I'd comment: How about thinking out of the box, once?
... which even literally applies in this particular case :)
One simply has to know the rules in order to break them - the other way around won't work.

check item icon in sencha

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