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

时间:2018-04-18 15:31:43

标签: javascript css extjs

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

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

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

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

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

1 个答案:

答案 0 :(得分:1)

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

例如:

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

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

CODE SNIPPET

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

    }
});