1. #1
    Sencha Premium Member Edd's Avatar
    Join Date
    Jan 2012
    Posts
    31
    Vote Rating
    0
    Edd is on a distinguished road

      0  

    Question Enable Disable button on validation

    Enable Disable button on validation


    This is gonna sound silly, but I'm new in Extjs 4, I have this window:1.jpg

    I need the OK button be enable when the texfield is valid, and disabled when not. I don't know whether to validate the form or the text field.

    Code:
    Ext.define('App.view.appName', {
        extend: 'Ext.window.Window',
        alias : 'widget',
        title : 'New Record',
        layout: 'auto',
        autoShow: true,
        modal: true,
    
    
    
    
        initComponent: function() {
            this.items = [
            {
                xtype: 'form',
                items: [
                {
                    xtype: 'textfield',
                    name : 'text',
                    fieldLabel: 'Name',
                    allowBlank: false
                }
                ]
             }
            ];
            this.buttons = [
            {
                text: 'OK',
                action: 'new',
                //disable:true
            },
            {
                text: 'Cancel',
                scope: this,
                handler: this.close
            }
            ];
            this.callParent(arguments);
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,811
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you set formBind to true on the button it should enable/disable itself based on the form's valid state.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member Edd's Avatar
    Join Date
    Jan 2012
    Posts
    31
    Vote Rating
    0
    Edd is on a distinguished road

      0  

    Default


    I set formBind to true, but nothing, also there's nothing about formBind in the sencha docs :S

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,811
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    From Ext.form.Basic:

    Code:
        /**
         * @private
         * Finds and returns the set of all items bound to fields inside this form
         * @return {Ext.util.MixedCollection} The set of all bound form field items
         */
        getBoundItems: function() {
            var boundItems = this._boundItems;
            
            if (!boundItems || boundItems.getCount() === 0) {
                boundItems = this._boundItems = new Ext.util.MixedCollection();
                boundItems.addAll(this.owner.query('[formBind]'));
            }
            
            return boundItems;
        },
    This is executed from the same class:

    Code:
        /**
         * @private
         * Handle changes in the form's validity. If there are any sub components with
         * formBind=true then they are enabled/disabled based on the new validity.
         * @param {Boolean} valid
         */
        onValidityChange: function(valid) {
            var boundItems = this.getBoundItems();
    
            if (boundItems) {
                var items = boundItems.items,
                    i,
                    iLen  = items.length,
                    cmp;
    
                for (i = 0; i < iLen; i++) {
                    cmp = items[i];
    
                    if (cmp.disabled === valid) {
                        cmp.setDisabled(!valid);
                    }
                }
            }
        },
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread