如何在extjs中使用lookupReference更改标题backgroundColor [英] How to change title backgroundColor by using lookupReference in extjs

问题描述

我使用lookuprefernce获取值.我想更改背景颜色.

I m using lookuprefernce to get values. I want to change background color.

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

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

我想退色并要使用类似的颜色 不知道该怎么做..我正在尝试

I want to set back color and want to use something like this dont know how to do it ..I am trying this

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

推荐答案

您可以使用

You can change background color of title using getHeader().

例如:

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

在此 FIDDLE 中，已经创建了一个演示.它显示如何更改标题栏uisng lookupReference的颜色.我希望这会帮助/指导您达到要求.

In this FIDDLE, I have created a demo. It's showing, how to change color of title bar uisng lookupReference. I hope this will help/guide you achieve your requirement.

代码片段

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

    }
});

这篇关于如何在extjs中使用lookupReference更改标题backgroundColor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！