Form Validation isn't working in ExtJS

Question

I tried to add validation to my form using formBind: true

The validation isn't occuring though (the save button is not greyed out). The validation that the text field is not blank is occuring, but binding it to the Save button seems to do nothing.

If you double click a record it will show the form in question. This can be seen here:

http://jsfiddle.net/byronaltice/7yz9oxf6/32/

Code below in case anyone can't access jsfiddle:

Ext.application({
    name: 'MyApp',
    launch: function () {

        //Popup form for items in grid panel
        Ext.define("SessionForm", {
            extend: 'Ext.window.Window',
            alias: 'widget.sessionForm',
            padding: 5,
            width: 600,
            title: 'Edit Sessions',
            model: 'true',
            items: [{
                xtype: 'form',
                bodyPadding: 10,
                title: '',
                items: [{
                    xtype: 'textfield',
                    name: 'title',
                    fieldLabel: 'Title',
                    labelWidth: 90,
                    defaults: {
                        labelWidth: 90,
                        margin: '0 0 10 0',
                        anchor: '90%'
                    },
                    allowBlank: false
                }, {
                    xtype: 'checkboxfield',
                    name: 'approved',
                    fieldLabel: 'Approved'
                }]

            }, {
                xtype: 'container',
                padding: '10 10 10 10',
                layout: {
                    type: 'hbox',
                    align: 'middle',
                    pack: 'center'
                },
                items: [{
                    xtype: 'button',
                    text: 'Save',
                    formBind: 'true',
                    margin: '5 5 5 5',
                    handler: function (button) {
                        var form = button.up().up().down('form');
                        form.updateRecord();
                        button.up('window').destroy();
                    }
                }, {
                    xtype: 'button',
                    text: 'Cancel',
                    margin: '5 5 5 5',
                    handler: function (button) {
                        button.up('window').destroy();
                    }
                }]
            }]
        });

        //The grid panel area
        Ext.define("SessionGridPanel", {
            extend: 'Ext.grid.Panel',
            alias: 'widget.sessionGridPanel',

            listeners: {
                itemdblclick: function (gridpanel, record, item, e) {
                    var formWindow = Ext.create('SessionForm');
                    formWindow.show();
                    var form = formWindow.down('form');
                    form.loadRecord(record);
                }
            },

            store: {
                fields: [
                    'id', {
                    name: 'title',
                    sortType: 'asUCText'
                },
                    'approved', {
                    dateFormat: 'c',
                    name: 'sessionTimeDateTime',
                    sortType: 'asDate',
                    type: 'date'
                }, {
                    convert: function (v, rec) {
                        var convertIt = Ext.util.Format.dateRenderer('m/d/Y g:i a'),
                            pretty = convertIt(rec.get("sessionTimeDateTime"));
                        return pretty;
                    },
                    name: 'sessionTimePretty',
                    type: 'string'
                }],
                autoLoad: true,
                autoSync: true,
                data: [{
                    id: 101,
                    sessionTimeDateTime: '2014-08-27T21:00:00.000+0000',
                    title: 'JS for D',
                    approved: true
                }, {
                    id: 102,
                    sessionTimeDateTime: '2014-10-27T22:30:00.000+0000',
                    title: 'CS for S',
                    approved: false
                }, {
                    id: 105,
                    sessionTimeDateTime: '2014-09-27T20:30:00.000+0000',
                    title: 'XxtJS for E',
                    approved: false
                }, {
                    id: 104,
                    sessionTimeDateTime: '2014-09-26T22:00:00.000+0000',
                    title: 'ZXxtJS for E',
                    approved: true
                }, {
                    id: 103,
                    sessionTimeDateTime: '2014-09-26T22:00:00.000+0000',
                    title: 'ExtJS for E',
                    approved: true
                }],
                sorters: [{
                    property: 'title'
                }],
                groupField: 'sessionTimeDateTime'
            },
            columns: [{
                xtype: 'gridcolumn',
                dataIndex: 'id',
                text: 'Id'
            }, {
                xtype: 'gridcolumn',
                dataIndex: 'title',
                text: 'Title',
                flex: 1,
                minWidth: 100,
                width: 75
            }, {
                xtype: 'gridcolumn',
                dataIndex: 'approved',
                text: 'Approved'
            }, {
                dataIndex: 'sessionTimePretty',
                text: 'Session Start Time',
                width: 180
            }],
            features: [{
                ftype: 'grouping',
                groupHeaderTpl: [
                    '{[values.rows[0].get(\'sessionTimePretty\')]} (Session Count: {rows.length})']
            }]
        });

        Ext.create('Ext.container.Viewport', {
            layout: {
                type: 'border'
                //align: 'stretch'
            },
            items: [{
                region: 'west',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                flex: 1,
                split: true,
                items: [{
                    xtype: 'sessionGridPanel',
                    flex: 1
                }, {
                    xtype: 'splitter',
                    width: 1
                }, {
                    html: '<b>Speakers Panel</b>',
                    flex: 1,
                    xtype: 'panel'
                }]
            }, {
                region: 'center',
                html: '<b>Details Panel</b>',
                flex: 1,
                xtype: 'panel',
                title: 'Details Panel',
                collapsible: true,
                collapsed: true,
                collapseDirection: 'right'
            }]
        });
    }
});

Answer 1

From Sencha API Documentation:

Any component within the FormPanel can be configured with formBind: true.

The problem is you are using the attribute formBind outside the form component

You can correct your code in this way:

Ext.define("SessionForm", {
    extend: 'Ext.window.Window',
    alias: 'widget.sessionForm',
    // ...
    items: [{
        xtype: 'form',
        items: [{
            // your form items
        }],
        buttons: [{
            xtype: 'button',
            text: 'Save',
            formBind: true,
            handler: function (button) {
                // also you should rewrite the following line
                // to make it independant from the components structure
                var form = button.up().up().down('form');
                form.updateRecord();
                button.up('window').destroy();
            }
        }, {
            xtype: 'button',
            text: 'Cancel',
            handler: function (button) {
                button.up('window').destroy();
            }
        }]
    }]
});

Your fiddle changed: http://jsfiddle.net/7yz9oxf6/34/