PDA

View Full Version : Show combobox value as Text Label if combo is disable



SurenderBhyan1
26 Oct 2015, 10:56 PM
Version :4.2.1
Chrome 40

Hi,

Requirement:
when disabling a combobox or any extjs input element, then want to show field value as a Text label and combo should hide itself.

For now I have achieved this using a hidden displayfield, upon disabling the combobox I am setting the combo value to this displayfield and hide the combo itself and showing the displayfield.

But this solution is very expensive for me :(

Is there a simple generic way to achieve the requirement as I need to do this in my whole project. Any help will be appreciated =D>

Please try below fiddle for reference
:
https://fiddle.sencha.com/#fiddle/103j

(https://fiddle.sencha.com/#fiddle/103j)103j

53497

joel.watson
27 Oct 2015, 7:48 AM
Hi--

Two thoughts on this.

First, if you really need two fields, you could create a custom component that could accept two configs, one for the combo and one for the display field. This component could also handle the enabling/disabling functionality, since it would know the children that belong to it.

Second, to perhaps simplify the requirement significantly, you could just create a custom disabled class and apply it to the combobox when it gets disabled...make it look like a displayfield without actually having to swap the two field's visibility.

Thanks!
Joel

SurenderBhyan1
18 Nov 2015, 10:21 PM
Fixed issue with creating new xtype for combobox (HybridCombo).



Ext.define('Ext.ux.form.HybridCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.hybridcombo',

disable: function() {
this.callParent(arguments);
this.setHideTrigger(true);
},
enable: function() {
this.callParent(arguments);
this.setHideTrigger(false);
}
});


CSS to hide the background of combobox when disabled.



.x-item-disabled .x-form-field, .x-item-disabled .x-form-display-field, .x-item-disabled .x-form-cb-label, .x-item-disabled .x-form-trigger { opacity: 1 !important;
background: none !important;
border: 0px !important;
}


Usage:


{
xtype: 'hybridcombo',
fieldLabel: 'Country',
id: 'country',
name: 'country',
store: countries,
value: 'DE',
triggerAction: 'all',
forceSelection: false,
editable: true,
typeAhead: true,
selectOnFocus: true
}


Fiddle: https://fiddle.sencha.com/#fiddle/103j

(https://fiddle.sencha.com/#fiddle/103j)Use Disbale HYBRID combo button =D>

SurenderBhyan1
18 Nov 2015, 10:23 PM
Hi--

Two thoughts on this.

First, if you really need two fields, you could create a custom component that could accept two configs, one for the combo and one for the display field. This component could also handle the enabling/disabling functionality, since it would know the children that belong to it.

Second, to perhaps simplify the requirement significantly, you could just create a custom disabled class and apply it to the combobox when it gets disabled...make it look like a displayfield without actually having to swap the two field's visibility.

Thanks!
Joel

Thank you watson for valuable suggestion =P~

joel.watson
19 Nov 2015, 6:19 AM
Thank you watson for valuable suggestion =P~

Sure thing, glad it was helpful!

Thanks
Joel