How to change title backgroundColor by using lookupReference in extjs

问题

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";

回答1:

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

Eg:

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

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.

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

    }
});

来源：https://stackoverflow.com/questions/49903644/how-to-change-title-backgroundcolor-by-using-lookupreference-in-extjs

标签

javascript

css

extjs