1. #11
    Ext JS Premium Member
    Join Date
    Apr 2011
    Posts
    5
    Vote Rating
    0
    Edhilion is on a distinguished road

      0  

    Default Manual setValue()

    Manual setValue()


    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.

  2. #12
    Ext JS Premium Member
    Join Date
    Apr 2011
    Posts
    5
    Vote Rating
    0
    Edhilion is on a distinguished road

      0  

    Default


    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...

  3. #13
    Sencha User
    Join Date
    Jul 2009
    Posts
    30
    Vote Rating
    7
    da_bar is on a distinguished road

      0  

    Default


    Quote Originally Posted by Edhilion View Post
    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]?

  4. #14
    Sencha User
    Join Date
    Jul 2009
    Posts
    30
    Vote Rating
    7
    da_bar is on a distinguished road

      0  

    Default


    Quote Originally Posted by Edhilion View Post
    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

  5. #15
    Ext JS Premium Member
    Join Date
    Jan 2010
    Posts
    24
    Vote Rating
    0
    bbimber is on a distinguished road

      0  

    Default


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

  6. #16
    Sencha User
    Join Date
    Jul 2012
    Posts
    235
    Vote Rating
    0
    chandan.behura is on a distinguished road

      0  

    Default


    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.

  7. #17
    Sencha User
    Join Date
    Jul 2012
    Posts
    235
    Vote Rating
    0
    chandan.behura is on a distinguished road

      0  

    Default


    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.

  8. #18
    Ext JS Premium Member
    Join Date
    Mar 2009
    Posts
    1
    Vote Rating
    0
    pkolanu is on a distinguished road

      0  

    Default


    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)

  9. #19
    Sencha User
    Join Date
    Oct 2008
    Posts
    4
    Vote Rating
    0
    xeni is on a distinguished road

      0  

    Default editable

    editable


    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?

  10. #20
    Sencha User
    Join Date
    Jul 2009
    Posts
    30
    Vote Rating
    7
    da_bar is on a distinguished road

      0  

    Default


    Quote Originally Posted by zeno View Post
    when the record is too long, the scrollbar's footer is hide, see the picture,
    Fixed, sorry it took too long