【翻译】Ext JS最新技巧——2014-9-10

原文：Top Support Tips

Greg Barry：删除网格单元格的焦点

在Ext JS 5.0.1，添加了一些与可访问性和支持ARIA有关的显著改进。虽然鼓励使用这些新增功能，但默认样式可能无法在所有情况下都能达到最理想的状况。事实上，在单元格边框实现焦点就不适合所有的情况。

如果想对焦点样式进行调整，最好的方式是通过修改SASS变量和重新编译样式来实现。

在网格视图中可以找到单元格焦点的SASS变量，目标包括：

$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

尽管建议是修改以上SASS变量并编译样式，但还可以使用以下CSS选择器来修改或隐藏网格单元格的边框：

.x-grid-item-focused .x-grid-cell-inner:before {
    border: 0;
}

可以在Fiddle查看重写CSS后的示例。

有关更多的与可访问性改变有关的信息，请访问新的可访问性指南。

Mitchell Simoens：在原型内创建实例是坏主意

在使用Ext.define来定义新类的时候，永远不要好像以下代码哪样，使用Ext.create在原型内创建一个实例：

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

作为替代，可以在配置对象中使用类的别名：

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

使用配置对象的原因是，在类初始化的时候，当前是MyApp.view.Main，它会根据配置对象创建新的实例。如果实例在原型中被创建，如第一个代码段哪样，MyApp.view.Main的第一个实例可能胡按预期方式很好的工作，但在随后创建的任何实例就可能不会像预期的哪样工作并会抛出错误。

在Fiddle，可以查看到为什么在原型中创建实例是坏注意的示例。