Page 60 of 65 FirstFirst ... 10505859606162 ... LastLast
Results 591 to 600 of 641

Thread: [Stable 1.0] LovCombo - Simple List of Values Combo

  1. #591
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    188

    Default

    Hey Saki,
    thanks for this great extension, as always!
    I'm trying to use it with the new getListParent() function for ComboBox in 3.3.0, since my LovCombo is inside a floatable Region of a BorderLayout. Since the Region would slide in if one moves the mouse over or clicks on the ComobBox without using getListParent, I have to do it like this. A regular ComobBox works as expected, but the LovCombo always slides the floatable Region in after a value is clicked. Any ideas?

  2. #592
    Sencha User
    Join Date
    Sep 2010
    Posts
    4

    Default

    Hello..

    I'm attempting to automatically select the first item in the LovCombo box, and I'm not getting the desired result. I'm calling the setValue() method on the afterrender event. The value seems to end up blank '', even when hard-coded, and nothing is displayed in the box.

    Code (quite simple), hard-coded:

    comboAfterRenderHandler: function (combo) {
    combo.setValue('131');
    }

    And zippo, apparently. I've also tried using the ComboBox select() method, and the autoSelect config option doesn't seem to help, either. :\ Help?

    Thanks!

  3. #593
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Is the store loaded at the time you call setValue?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  4. #594
    Sencha User
    Join Date
    Sep 2010
    Posts
    4

    Default

    That was the problem, Saki. I thought I'd tried calling it on the store load event before but I guess not. Thanks!

  5. #595
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    188

    Default

    It seems this line:
    record.set(this.checkField, !record.get(this.checkField));
    in the onSelect method is causing the LovCombo and the floatable region to collapse, any way to get around this?

  6. #596
    Sencha Premium Member a.bongardt's Avatar
    Join Date
    Mar 2010
    Location
    Offenbach, Germany
    Posts
    37

    Default LovCombo with item disabling

    Hello,

    I wrote a little extension for the LovCombo, so I can disable some of the items depending on the current selection.

    LovComboReloaded.png

    Here is the code. Comments appreciated.

    Code:
    Ext.ux.form.LovComboReloaded = Ext.extend(Ext.ux.form.LovCombo, {
        // name of field in store to determine of the item has to be disabled
        disabledField: 'disabled',
    
        // CSS class name to be used for a disabled item
        disabledClass: 'ux-lovcombo2-item-disabled',
    
        // the function that is called when the Combo wants to find out which items should be disabled
        // (the first parameter to be passed is the combo box)
        disableFn: Ext.emptyFn,
    
        initComponent: function () {
            if (!this.tpl) {
                this.tpl =
                    '<tpl for=".">'
                    + '<div class="x-combo-list-item{[values.' + this.disabledField + '?" ' + this.disabledClass + '":""]}">'
                    + '<img src="' + Ext.BLANK_IMAGE_URL + '" '
                    + 'class="ux-lovcombo-icon ux-lovcombo-icon-'
                    + '{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">'
                    + '<div class="ux-lovcombo-item-text">{' + (this.displayField || 'text') + '}</div>'
                    + '</div>'
                    + '</tpl>'
                ;
            }
    
            Ext.ux.form.LovComboReloaded.superclass.initComponent.apply(this, arguments);
    
            this.on('beforeselect', function (combo, record, index) {
                // prevent selection if disabled
                if (record.get(combo.disabledField)) {
                    return false;
                }
            }, this);
    
            this.on('select', function (combo, record, index) {
                // update disabled-state on select
                combo.updateDisabled(combo);
            }, this);
        },
    
        // updates every record's disabled field according to the configured disabledFn
        updateDisabled: function (combo) {
            var disable =  Ext.isFunction(combo.disableFn) ? combo.disableFn(combo) : [];
            if (!Ext.isArray(disable)) {
                disable = [];
            }
    
            this.store.each(function (r) {
                r.set(combo.disabledField, disable.indexOf(r.get(combo.valueField)) >= 0);
            });
        },
    
        // prevent hover for disabled items
        onViewOver: function (e, t) {
            var item = this.view.findItemFromChild(t);
    
            if (item.className.split(' ').indexOf(this.disabledClass) >= 0) {
                // item disabled: no hover
                return;
            }
    
            Ext.form.ComboBox.prototype.onViewOver.apply(this, arguments);
        },
    
        // eventually disable some items prior to expanding
        expand: function () {
            this.updateDisabled(this);
            Ext.ux.form.LovComboReloaded.superclass.expand.call(this);
        },
    
        // override LovCombo's setValue to accept an array as value, too
        setValue: function (v) {
            if (Ext.isArray(v)) {
                v = v.join(this.separator);
            }
    
            Ext.ux.form.LovComboReloaded.superclass.setValue.call(this, v);
        }
    });
    
    Ext.reg('lovcombo2', Ext.ux.form.LovComboReloaded);
    And here is the CSS needed for disabled items:

    Code:
    .ux-lovcombo2-item-disabled
    {
        color:gray !important;
        cursor:default;
    }
    
    .ux-lovcombo2-item-disabled img.ux-lovcombo-icon
    {
        opacity:.5;
        -moz-opacity:.5;
        filter:alpha(opacity=50);
    }
    And last but not least an example how to use it (a config object). This example disables the entry with value 'SuperAdmin' if 'Admin' is selected and vice-versa (pretty lame example, but you should see how to use it though).

    Code:
    {
    	xtype: 'lovcombo2',
    	name: 'Roles',
    	fieldLabel: 'Roles',
    	store: roleStore,
    	mode: 'local',
    	triggerAction: 'all',
    	valueField: 'roleId',
    	displayField: 'roleDescription',
    	disableFn: function (combo) {
    		var values = combo.getCheckedValue().split(',').remove('');
    		
    		var disable = [];
    		
    		if (values.indexOf('SuperAdmin') >= 0) {
    			disable.push('Admin');
    		}
    
    		if (values.indexOf('Admin') >= 0) {
    			disable.push('SuperAdmin');
    		}
    
    		// return the values that have to be disabled
    		return disable;
    	}
    }
    Have fun with it -- Andy

  7. #597
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    422

    Default

    The most popular extension extended (and not for the first time). Isn't it time the LovCombo get's included into EXT JS?
    Christiaan Westerbeek @ Devotis
    Contact me for help with Ext JS, Node JS, FireBase, AngularJS and Javascript in general. Email me or find me at AirPair to connect.

  8. #598
    Ext JS Premium Member Gjslick's Avatar
    Join Date
    Feb 2009
    Location
    NJ, USA
    Posts
    129

    Default LovCombo as Editor w/ Ext 3.2.1+

    For anyone using the LovCombo within an Ext.Editor (such as in an EditorGridPanel), you may notice that the combo does not retain its value when multiple selections are made. This is due to Ext.Editor calling the ComboBox's assertValue() method when its onCompleteEdit() executes, and because the ComboBox's assertValue() method is not suitable for the multiple selections of the LovCombo.

    To fix this issue, make sure that the assertValue method is set to an empty function in the LovCombo's prototype. Ex:
    Code:
    Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, {
    
        assertValue: Ext.emptyFn,
    
        ...
    
    } );

  9. #599

    Default

    (Excuse me for my English)
    I despair!
    Could you give me an example of dynamic store lovcombo ?
    I tried your example ... it works great ... then I changed the store by using a dynamic... and ... the defaults values are no longer displayed!
    Please help me.

  10. #600
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    LovCombo has not been designed for remote stores. Maybe it works, maybe not I haven't tested it. Post a working showcase, I can take a look.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


Page 60 of 65 FirstFirst ... 10505859606162 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •