如何在extjs中使用lookupReference更改标题backgroundColor

Question

我使用lookuprefernce获取值。我想改变背景颜色。

var LRMainPanelRef = this.lookupReference('MainPanelRef'); 

var titletext = LRMainPanelRef.items.items[1].title;

我想设置颜色，并希望使用这样的东西不知道该怎么做..我正在尝试这个

LRFMainPanelRef.items.items[i].title.backgroundColor= "#FFEFBB";

Answer 1

您可以使用getHeader()更改标题的背景颜色。

例如：

var mypanel = this.lookupReference('mypanel');//mypanel is reference of Component
mypanel.getHeader().setStyle('background-color', '#FFEFBB');

在这个FIDDLE中，我创建了一个演示。它显示，如何改变标题栏uisng lookupReference的颜色。我希望这有助于/指导您实现您的要求。

代码链

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('MyViewController', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.myview',

            // This method is called as a "handler" for the change color button in our view
            onChnageColorClick: function () {
                var mypanel = this.lookupReference('mypanel'),
                    header = mypanel.getHeader();

                header.setStyle('background-color', '#FFEFBB');
                header.el.down('div.demo-title').setStyle('background-color', '#ccc');
            }
        });

        Ext.define('MyView', {
            extend: 'Ext.Panel',

            title: 'Demo',

            controller: 'myview',

            items: [{
                xtype: 'button',
                margin: 5,
                text: 'Change BG Color of below panel title',
                handler: 'onChnageColorClick', // calls MyViewController's onChnageColorClick method
            }, {
                xtype: 'panel',
                title: 'Click to above to change My color <div class="demo-title">Hello I am DIV</div>',
                reference: 'mypanel'
            }]
        });

        new MyView({
            renderTo: Ext.getBody(),
            width: 400,
            height: 200
        });

    }
});