CODEWITHSUNDEEP
extjscombobox
Rúben Dias
Rúben Dias

Reputation: 45

Can't change combobox background color at Ext 3.2.1

Hey I'm trying to create a color picker, and I would like to change the combo box background when the user selects the color that he wants.

I'm calling this function: setStyle(), to set the combobox style, but I receive this error: 

Uncaught TypeError: Ext.getCmp(...).setStyle is not a function
    at Object.fn (...js?v=1510223645:210)
    at EXTUTIL.Event.fire (ext-all.js?v=1510223645:1735)
    at J.fireEvent (ext-all.js?v=1510223645:1484)
    at J.onSelect (ext-all.js?v=1510223645:39222)
    at J.onViewClick (ext-all.js?v=1510223645:39309)
    at EXTUTIL.Event.fire (ext-all.js?v=1510223645:1735)
    at J.fireEvent (ext-all.js?v=1510223645:1484)
    at J.onClick (ext-all.js?v=1510223645:27169)
    at HTMLDivElement.h (ext-all.js?v=1510223645:2158)

My code:

xtype: 'combo',
    width: 340,
    id: 'test',
    store: new Ext.data.SimpleStore({
        fields: ['text', 'color'],
        data: [
            ['Red', '#db4e4e'],
            ['Green', '#89b76e'],
            ['Blue', '#3c8787'],
        ]
    }),
    valueField: 'color',
    mode: 'local',
    editable: false,
    tpl: '<tpl for="."><div class="x-combo-list-item" style="height: 20px; background-color:{color};"></div></tpl>',
    listeners: {
        select: {
            fn: function(combo, value) {
                Ext.getCmp('test').setStyle('background', value);
            }
        },
        scope: this
    }

I already tried:

this.setFieldStyle('background:#FF0000');

But it doesn't work.

How can I solve this problem?

Thank you.

Upvotes: 0

Views: 932

Answers (1)

Narendra Jadhav
Narendra Jadhav

Reputation: 10262

How can I solve this problem?

You can solve like this

1) Ext.get() returns a component by id. For additional details see Ext.util.MixedCollection.get.

Ext.get('ext-gen12').setStyle({
    background:'red'
})

2) Ext.fly() gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - the dom node can be overwritten by other code.

Ext.fly('ext-gen12').setStyle({
   background:'yellow'
})

Note ext-gen12 is id of your combobox or any other component id. You can pass here dom element also.

I hope this will help you to solve your problem.

Upvotes: 1

Related Questions