如何在ExtJS中使用lookupReference修改标题背景色

嘿，我明白你遇到的问题了——直接修改title属性的backgroundColor肯定没用，因为title只是个存字符串的属性，根本不是能设置样式的DOM元素或者组件对象呀！我来给你两种靠谱的解决方案，都是基于Ext JS框架（毕竟lookupReference是Ext的API）：

方法一：修改整个面板头部的背景色 #

如果你想让整个标题栏都变成目标背景色，用官方提供的API最稳妥，别去碰内部的items.items结构（框架更新可能会搞坏这种写法）：

// 获取面板引用
var LRMainPanelRef = this.lookupReference('MainPanelRef');
// 获取面板的头部组件
var panelHeader = LRMainPanelRef.getHeader();
// 设置头部的背景色
panelHeader.setStyle('background-color', '#FFEFBB');

方法二：只修改标题文本区域的背景色 #

要是你只想给标题文字单独加背景，那就得找到标题对应的DOM元素：

var LRMainPanelRef = this.lookupReference('MainPanelRef');
// 获取头部的DOM元素对象
var headerEl = LRMainPanelRef.getHeader().el;
// 查找标题文本的DOM节点（不同Ext版本类名可能有差异，用开发者工具确认下）
var titleTextEl = headerEl.down('.x-panel-header-text');
// 设置背景色
if (titleTextEl) {
  titleTextEl.setStyle('background-color', '#FFEFBB');
}

小提示 #

• 尽量避免直接访问items.items[i]这种内部属性，Ext官方提供了getHeader()、down()这些方法，兼容性和稳定性都更好。
• 如果找不到正确的DOM类名，打开浏览器开发者工具（F12），选中标题元素，查看它的CSS类，替换上面的.x-panel-header-text就行。

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