javascript - 表单验证在 ExtJS 中不起作用

Question

我尝试使用 formBind: true 添加验证到我的表单

但验证并未发生(保存按钮未灰显)。正在验证文本字段不为空，但将其绑定(bind)到“保存”按钮似乎没有执行任何操作。

如果您双击一条记录，它将显示相关表单。这可以在这里看到:

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

下面的代码以防任何人都无法访问 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

来自 Sencha API 文档:

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

问题是您在表单组件外部使用属性 formBind

您可以通过以下方式更正代码:

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

您的 fiddle 已更改:http://jsfiddle.net/7yz9oxf6/34/