Ext.ux.CheckCombo

**Edhilion** · 15 May 2012 3:59 AM

Hi Dario.
I'm have a little problem when I try the set some values before displaying the checkCombo.
I don't do anything really tricky, see below :

Code:

var combo = Ext.create('Ext.ux.form.field.CheckCombo',
{
  renderTo: 'checkcombowithall',
  valueField: 'id',
  displayField: 'type',
  store: store,
  addAllSelector: true
});
combo.setValue(['1','2']);

When the checkCombo, everything seems to be fine. The two selected entries are displayed in the combo, seperated by ','. But when I click to open it, no checkbox is checked.
When I put a breakpoint on your "selectionChange" listener, I see a list (without the "All" entry) with my two values checked.

I don't really have time for now to investigate, so I report it now.
If I find something, I'll tell you.

**Edhilion** · 15 May 2012 6:01 AM

After a little investigation, I have a question :
Why did you remove the "!me.ignoreSelection" condition in the "onListSelectionChange" override ?

From ComboBox.js (l.1092) :

Code:

onListSelectionChange: function(list, selectedRecords) {
  var me = this,
        isMulti = me.multiSelect,
        hasRecords = selectedRecords.length > 0;
    // Only react to selection if it is not called from setValue, and if our list is
    // expanded (ignores changes to the selection model triggered elsewhere)
    if (!me.ignoreSelection && me.isExpanded) {
        if (!isMulti) {
            Ext.defer(me.collapse, 1, me);
        }
...

From CheckCombo.js (l.144) :

Code:

onListSelectionChange: function(list, selectedRecords) {
  var me = this,
        isMulti = me.multiSelect,
        hasRecords = selectedRecords.length > 0;
    // Only react to selection if it is not called from setValue, and if our list is
    // expanded (ignores changes to the selection model triggered elsewhere)
    if (me.isExpanded) {
        if (!isMulti) {
            Ext.defer(me.collapse, 1, me);
        }
...

It seems to work fine if I put it back...

**da_bar** · 25 May 2012 12:14 AM

Originally Posted by Edhilion

Hi Dario.
I'm have a little problem when I try the set some values before displaying the checkCombo.
I don't do anything really tricky, see below :

Code:

var combo = Ext.create('Ext.ux.form.field.CheckCombo',
{
  renderTo: 'checkcombowithall',
  valueField: 'id',
  displayField: 'type',
  store: store,
  addAllSelector: true
});
combo.setValue(['1','2']);

When the checkCombo, everything seems to be fine. The two selected entries are displayed in the combo, seperated by ','. But when I click to open it, no checkbox is checked.
When I put a breakpoint on your "selectionChange" listener, I see a list (without the "All" entry) with my two values checked.

I don't really have time for now to investigate, so I report it now.
If I find something, I'll tell you.

Maybe the id field in your store is not a string but integer so you have to set it like this [1, 2, 3]?

**da_bar** · 25 May 2012 12:15 AM

Originally Posted by Edhilion

After a little investigation, I have a question :
Why did you remove the "!me.ignoreSelection" condition in the "onListSelectionChange" override ?

From ComboBox.js (l.1092) :

Code:

onListSelectionChange: function(list, selectedRecords) {
  var me = this,
        isMulti = me.multiSelect,
        hasRecords = selectedRecords.length > 0;
    // Only react to selection if it is not called from setValue, and if our list is
    // expanded (ignores changes to the selection model triggered elsewhere)
    if (!me.ignoreSelection && me.isExpanded) {
        if (!isMulti) {
            Ext.defer(me.collapse, 1, me);
        }
...

From CheckCombo.js (l.144) :

Code:

onListSelectionChange: function(list, selectedRecords) {
  var me = this,
        isMulti = me.multiSelect,
        hasRecords = selectedRecords.length > 0;
    // Only react to selection if it is not called from setValue, and if our list is
    // expanded (ignores changes to the selection model triggered elsewhere)
    if (me.isExpanded) {
        if (!isMulti) {
            Ext.defer(me.collapse, 1, me);
        }
...

It seems to work fine if I put it back...

Well I really don't know why I removed it

maybe I thought it's not important

**bbimber** · 28 Jun 2012 2:45 PM

This is a great extension. In case anyone's interested, here's a version (ext 4.1) that solves the problem of the last list item getting clipped.

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

**chandan.behura** · 30 Aug 2012 7:46 AM

Hi,

I tried the example but get stacked in the
Ext.ux.CheckCombo

Error is comming that 'ux.CheckCombo.js' is not found.I added the UX folder to the path.
again i saw that inside the ux there is no such file.And also didnot get anything
in sencha API related to Ux.Check combo.Please help me out.

**chandan.behura** · 30 Aug 2012 7:49 AM

Unable to find the ux.CheckCombo in ux folder.How i will get that.In sencha i also didnot fid for Ext.ux.CheckCombo.
[CODE] Ext.Loader.setConfig({ enabled: true });
//Ext.Loader.setPath('Ext.ux', '/ux');

var store = Ext.create('Ext.data.Store',
{
fields: ['id', 'type'],
data:
[
{id: '1', type: 'option one'},
{id: '2', type: 'option two'},
{id: '3', type: 'option three'},
{id: '4', type: 'option four'},
{id: '5', type: 'option five'},
{id: '6', type: 'option six'},
{id: '7', type: 'option seven'}
]
});

Ext.onReady(function()
{
Ext.create('Ext.ux.CheckCombo',
{
renderTo: Ext.getBody(),
valueField: 'id',
displayField: 'type',
store: store,
addAllSelector: true
});

});[CODE]
error:GET http://localhost:8080/Project_ExtD4/...=1346341733982 404 (Not Found)
TypeError: 'null' is not a constructor (evaluating 'new c(a[0])')

Inside the Ux folder no CheckCombo.js.

**pkolanu** · 9 Oct 2012 12:57 PM

How do we select the checkbox by default, suppose my default values are Active, Inactive in the drop down, I need both of them selected by default (initial load)

**xeni** · 17 Oct 2012 5:52 AM

My combo is also editable but when I want to change the informations from it the value is set to null. How can I edit in combo?

**da_bar** · 2 Jan 2013 11:27 PM

Originally Posted by zeno

when the record is too long, the scrollbar's footer is hide, see the picture,

Fixed, sorry it took too long

Ext.ux.CheckCombo

Thread Tools

Search Thread

Display

Manual setValue()

Manual setValue()

editable

editable