在ExtJS创建组件时如何设置display:none属性？

嘿，这个问题我太熟悉了！在ExtJS里，你完全不需要直接写display:none这种原生CSS样式，框架已经提供了更贴合组件生命周期的标准配置——hidden: true，这才是官方推荐的最佳实践，比直接操作样式要靠谱得多。

推荐做法：使用hidden配置项 #

直接在组件的配置对象里添加hidden: true，就像你设置width和bodyPadding一样简单。修改你给的示例代码如下：

Ext.create('Ext.button.Button', {
    text: 'Add details',
    width: 400,
    bodyPadding: 10,
    layout: {
        type: 'hbox',
        align: 'middle'
    },
    hidden: true // 启用后组件会默认隐藏
});

用这种方式的好处在于，ExtJS会自动管理组件的状态：

• 后续你可以通过调用组件的show()方法来显示它，hide()方法来隐藏它，框架会自动处理样式和内部状态同步；
• 组件的isHidden()方法能正确返回当前的显示状态，不会出现逻辑冲突。

不推荐的方式：直接设置style #

如果你非要直接用display:none，也可以通过style配置项来实现，但这种方式不建议使用，因为它会绕过ExtJS的组件状态管理：

Ext.create('Ext.button.Button', {
    text: 'Add details',
    width: 400,
    bodyPadding: 10,
    layout: {
        type: 'hbox',
        align: 'middle'
    },
    style: 'display: none;' // 直接设置原生样式，不推荐
});

这种情况下，组件内部的状态不会同步更新，比如调用isHidden()可能返回错误的结果，后续使用show()/hide()方法也可能无法正常切换状态。

所以，优先选择hidden: true的方式，这才是符合ExtJS设计理念的正确做法~

内容的提问来源于stack exchange，提问作者YOGEESH