Ext.ux.CheckCombo

[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 :

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]

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) :

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) :

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]

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 :

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]

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) :

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) :

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]

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.

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]

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]

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]

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]

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]

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

Fixed, sorry it took too long