Results 1 to 5 of 5

Thread: Show combobox value as Text Label if combo is disable

  1. #1
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    130
    Answers
    7

    Default Answered: Show combobox value as Text Label if combo is disable

    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

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



    Hide combo nd show label.png
    ---A ship in the harbor is safe, but that is not what the ships are made for...

  2. Fixed issue with creating new xtype for combobox (HybridCombo).

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

    Code:
    .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:
    Code:
    {
                    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

    Use Disbale HYBRID combo button

  3. #2
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    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

  4. #3
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    130
    Answers
    7

    Default

    Fixed issue with creating new xtype for combobox (HybridCombo).

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

    Code:
    .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:
    Code:
    {
                    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

    Use Disbale HYBRID combo button
    ---A ship in the harbor is safe, but that is not what the ships are made for...

  5. #4
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    130
    Answers
    7

    Default

    Quote Originally Posted by joel.watson View Post
    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
    ---A ship in the harbor is safe, but that is not what the ships are made for...

  6. #5
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Quote Originally Posted by SurenderBhyan1 View Post

    Thank you watson for valuable suggestion
    Sure thing, glad it was helpful!

    Thanks
    Joel

Similar Threads

  1. Replies: 3
    Last Post: 16 Nov 2011, 8:05 AM
  2. Show and edit related text but store value text (with a Combo in a Grid)
    By Pachat in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 23 Jan 2010, 11:55 AM
  3. Possible to wrap button text and 'unwrap' combo label
    By JuSa in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 17 Nov 2009, 7:44 AM
  4. How to disable label option for TextField, ComboBox, etc.
    By onGoing in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 19 May 2009, 5:57 AM
  5. disable text entry in combo box
    By bhaskar1605 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 24 Oct 2008, 5:34 AM

Tags for this Thread

Posting Permissions

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