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.