Enable Disable button on validation

[Edd]

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.

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

[mitchellsimoens]

If you set formBind to true on the button it should enable/disable itself based on the form's valid state.

[Edd]

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

[mitchellsimoens]

From Ext.form.Basic:

    /**
     * @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:

    /**
     * @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);
                }
            }
        }
    },