ExtJS - Create custom structure for ComboBox

Question

I'm attemtping to create a custom ComboBox control. The control will have a button on either side of the ComboBox itself, something like this:

[<-]   [ --------------- V ]    [->]

These buttons will be "next" and "previous" which will allow the user to quickly toggle between options in the dropdown (moving down and up respectively).

I've tried overriding the defaultAutoCreate config of the ComboBox, but I'm getting some odd behavior. Here's what I've tried so far: (this is all inside of a custom class extending ComboBox)

initComponent: function () {

    // default ComboBox structure
    var comboStructure = { 
        tag: 'span',
        children: [
            { tag: 'a', cls: 'nav prev', html: 'Previous' },
            { tag: 'input', type: 'text', size: '24', autocomplete: 'off' },
            { tag: 'a', cls: 'nav next', html: 'Next' }
        ]
    };

    console.log(comboStructure);

    var config = {
        triggerAction: 'all',
        lazyRender: true,
        mode: 'local',
        store: new Ext.data.ArrayStore({
            fields: [
                'myId',
                'displayText'
            ],
            data: [[1, 'Banner #1'], [2, 'Banner #2']]
        }),
        valueField: 'myId',
        displayField: 'displayText',
        defaultAutoCreate: comboStructure
    };

    Ext.apply(this, config);

    IbwUi.controls.PreviewBannerSelectDropdown.superclass.initComponent(this);

}

The 2nd "child" of the comboStructure is actually the default value that gets initialized for ComboBox, I looked at the source code. The code works without error, but there's some odd behavior with the rendering of the combo itself, see here:

Weird DOM display

Any ideas on how to add my custom elements around the ComboBox when it renders?

Mchl · Accepted Answer · 2011-07-14 13:01:31Z

1

Don't do it like this. Instead put all three components into a container class that implements the logic you need.

answered Jul 14, 2011 at 13:01

Mchl

62.4k9 gold badges121 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dmackerman Over a year ago

I could do that, and it's probably easier, but I'm still wondering why this solution doesn't work. I noticed that the "arrow" for the ComboBox doesn't appear to be a part of the default structure...that's why its getting added afterwards.

Collectives™ on Stack Overflow

ExtJS - Create custom structure for ComboBox

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related