如何通过lookupReference为HTML文本设置同标题栏的背景色

解决方案 #

嘿，你已经搞定标题栏的背景色设置了，接下来给HTML文本区域应用相同背景色其实很简单，咱们直接针对HTML组件的DOM元素操作就行：

步骤1：获取HTML组件的DOM元素 #

你已经通过MainPanelRef.items.items[1]拿到了包含HTML文本的组件，接下来调用ExtJS的getEl()方法就能获取它对应的DOM元素，然后就可以设置样式了。

完整代码示例 #

// 先获取HTML组件的引用（建议后续换成reference方式，避免硬索引）
var htmlComponent = MainPanelRef.items.items[1];

// 获取DOM元素并设置背景色（和标题栏一致的黑色，注意颜色值要写全6位#000000）
if (htmlComponent.rendered) {
    htmlComponent.getEl().setStyle('background-color', '#000000');
} else {
    // 如果组件还没渲染，监听render事件再设置
    htmlComponent.on('render', function(comp) {
        comp.getEl().setStyle('background-color', '#000000');
    });
}

优化建议：避免硬索引依赖 #

你现在用items.items[1]这种硬编码的索引来获取组件，一旦布局结构变化（比如新增或删除了其他组件），这个索引就会失效。更可靠的方式是给这个HTML组件设置reference属性：

// 在组件配置里添加reference
{
    xtype: 'panel', // 或者你用的其他容器类型
    reference: 'HtmlContentRef',
    title: '你的标题',
    html: '你的HTML文本内容'
}

然后通过lookupReference获取组件，这样不管布局怎么变都能准确拿到：

var htmlComponent = this.lookupReference('HtmlContentRef');
htmlComponent.getEl().setStyle('background-color', '#000000');

小提醒 #

你之前写的颜色值#00000少了一位十六进制字符，标准的黑色应该是#000000或者简写的#000，记得修正哦。

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