Top Support Tips
Removing Grid Cell Focus
by Greg Barry
As of Ext JS 5.0.1, we’ve added some significant improvements regarding Accessibility and ARIA support. While we do encourage users to use these new additions, we understand that the default style may not be ideal in all circumstances. In fact, there may be situations in which the focused cell border is not desired at all.
If you would like to make adjustments to the focus style, it’s best to change these properties by modifying your SASS variables and recompiling your styles.
You can find the cell focus SASS variables on the Grid View. They currently include:
- $grid-row-cell-focus-background-color
- $grid-row-cell-focus-border-color
- $grid-row-cell-focus-border-inset
- $grid-row-cell-focus-border-style
- $grid-row-cell-focus-border-width
- $grid-row-cell-focus-color
While we recommend compiling style changes via the above SASS variables, you can also use the following CSS selector to modify or hide grid cell borders:
.x-grid-item-focused .x-grid-cell-inner:before { border: 0; }
You can see an example of the CSS being overridden in this Fiddle.
For more information about Accessibility changes, please check out the new Accessibility Guide.
Creating Instances on the Prototype is Bad
by Mitchell Simoens
When defining a new class using Ext.define, you should never use Ext.create to create an instance on the prototype like this:
Ext.define(‘MyApp.view.Main’, {
extend : ‘Ext.container.Container’,
xtype : ‘myapp-main’,
requires : [
‘MyApp.plugins.Foo’
],
items : [
Ext.create(‘Ext.Component’, {
html : ‘Hello’
})
],
plugins : [
Ext.create(‘MyApp.plugins.Foo’)
]
});
Instead, you should use configuration objects with a class alias:
Ext.define(‘MyApp.view.Main’, {
extend : ‘Ext.container.Container’,
xtype : ‘myapp-main’,
requires : [
‘MyApp.plugins.Foo
],
items : [
{
xtype : ‘component’,
html : ‘Hello’
}
],
plugins : [
{
ptype : ‘myapp-foo’
}
]
});
The reason to use config objects is that when the class, MyApp.view.Main in this case, is instantiated, it will create new instances based on the config objects for you. If instances were present on the prototype, like in the first code snippet, the first instance of MyApp.view.Main would likely work just fine but any subsequent instances created would not work as expected and possibly throw errors.
In this Fiddle, you can see an example of why creating instances on the prototype is bad.

Startups don’t have the luxury of time, they’ve got to move, and move fast. Building…

We’re seeing it more every year; teams aren’t settling for plug-and-play tools anymore. In healthcare,…

Building modern web applications should be exciting. But too often, developers find themselves buried in…