combo Height /width

Hi,

How i will adjust the height and width for a checkCombo.


my code is

Code:

---

Ext.define('LABKEY.layout.component.BoundList', {
        extend: 'Ext.layout.component.BoundList',
        alias: 'layout.boundlist-checkbox',
        beginLayout: function(ownerContext){
            this.callParent(arguments);
            ownerContext.listContext = ownerContext.getEl('outerEl');
        },
        measureContentHeight: function(ownerContext) {
            return this.owner.outerEl.getHeight();
        }
    });


    Ext.define('Ext.ux.CheckCombo',
    {
        extend: 'Ext.form.field.ComboBox',
        alias: 'widget.checkcombo',
        multiSelect: true,
        addAllSelector: false,
        allText: 'All',
        delim: ';',


        initComponent: function()
        {
            this.listConfig = this.listConfig || {};
            var me = this;
            Ext.apply(this.listConfig, {
                tpl:[
                    '<ul><tpl for=".">',
                        '<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item"><span class="' + Ext.baseCSSPrefix + 'combo-checker">&nbsp;</span> {' + this.displayField + '}</li>',
                    '</tpl></ul>'
                ],
                childEls: [
                    'listEl',
                    'outerEl',
                    'checkAllEl'
                ],
                renderTpl: [
                    '<div id="{id}-outerEl" style="overflow:auto" width=auto;>',
                    (this.addAllSelector ? '<div id="{id}-checkAllEl" class="' + Ext.baseCSSPrefix + 'boundlist-item" role="option"><span class="' + Ext.baseCSSPrefix + 'combo-checker">&nbsp;</span> '+this.allText+'</div>' : ''),
                    '<div id="{id}-listEl" class="{baseCls}-list-ct"></div>',
                    '{%',
                        'var me=values.$comp, pagingToolbar=me.pagingToolbar;',
                        'if (pagingToolbar) {',
                            'pagingToolbar.ownerLayout = me.componentLayout;',
                            'Ext.DomHelper.generateMarkup(pagingToolbar.getRenderTree(), out);',
                        '}',
                    '%}',
                    '</div>',
                    {
                        disableFormats: true
                    }
                ],
                componentLayout: 'boundlist-checkbox',
                onDestroy: function() {
                    Ext.destroyMembers(this, 'pagingToolbar', 'outerEl', 'listEl');
                    this.callParent();
                }
            });


            this.callParent(arguments);
        },


        createPicker: function()
        {
            var picker = this.callParent(arguments);
            picker.on('render', function(picker){
                if (picker.checkAllEl)
                {
                    picker.checkAllEl.addClsOnOver(Ext.baseCSSPrefix + 'boundlist-item-over');


                    picker.checkAllEl.on('click', function(e)
                    {
                        if(picker.checkAllEl.hasCls(Ext.baseCSSPrefix + 'boundlist-selected'))
                        {
                            picker.checkAllEl.removeCls(Ext.baseCSSPrefix + 'boundlist-selected');
                            this.setValue('');
                            this.fireEvent('select', this, []);
                        }
                        else
                        {
                            var records = [];
                            this.store.each(function(record)
                            {
                                records.push(record);
                            });
                            picker.checkAllEl.addCls(Ext.baseCSSPrefix + 'boundlist-selected');
                            this.select(records);
                            this.fireEvent('select', this, records);
                        }
                    }, this);
                }
            }, this, {single: true});
            return picker;
        },


        getValue: function()
        {
            return this.value.join(this.delim);
        },


        getValueAsArray: function(){
            return this.value;
        },


        getSubmitValue: function()
        {
            return this.getValue();
        },


        onListSelectionChange: function(list, selectedRecords)
        {
            this.callParent(arguments);


            var checker = this.getPicker().checkAllEl;
            if(checker)
            {
                if(selectedRecords.length == this.store.getTotalCount())
                    checker.addCls(Ext.baseCSSPrefix + 'boundlist-selected');
                else
                    checker.removeCls(Ext.baseCSSPrefix + 'boundlist-selected');
            }
        },
});

---

I am doing the dependent population of the checkCombo



But for some condition it seems like the combo taking the height width of previous combo .


like.
Attachment 40613


Please help me how to adjust the height width according to data contains .

The picker takes on the same width as the combo box by default. You can add the following config parameters to your combo to allow the picker to be wider than the combo box.

Code:

---

listConfig: {
    width: 300
},
matchFieldWidth: false

---

Actually i want the picker to be adjust as the content.

the height is coming more than the height required for the content.