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.
Screen shot 2012-12-05 at 5.03.05 PM.png


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