extjs-->form

表单元素什么的就等下再说,看这个.

在submit的配置项中的failure配置项的对应函数的action参数:

failureType:The type of failure detected will be one of these:CLIENT_INVALID,SERVER_INVALID, CONNECT_FAILURE, or LOAD_FAILURE.

说明了到底是什么原因导致进入failure对应的函数了.

CLIENT_INVALID

Failure type returned when client side validation of the Form fails thus aborting a submit action. Clientside validation is performed unlessExt.form.action.Submit.clientValidation is explicitly set tofalse.

CONNECT_FAILURE

Failure type returned when a communication error happens when attempting to send a request to the remoteserver. Theresponse may be examined to provide further information.

LOAD_FAILURE : 

Failure type returned when the response's success property is set to false, or no field values are returnedin the response's data property.

SERVER_INVALID : 

Failure type returned when server side processing fails and the result's success property is set tofalse.

In the case of a form submission, field-specific error messages may be returned in theresult'serrors property.

我们返回的json中需要有success这个属性当success不为真(为false或不存在此属性)直接进入failure对应的函数,success为true时,才进入success中

 var leftPanel = Ext.create('Ext.form.Panel', {                region: 'west',                width: 300,                resizable: {                    minWidth: 200,                    maxWidth: 400                },                defaultType: 'textfield',                defaults: {                    width: 200                },                labelAlign: 'right',                items: [                    {                        fieldLabel: '用户名'                    },                    {                        fieldLabel: '密码',                        inputType: 'password'                    },                    {                        xtype: 'checkbox',                        boxLabel: '低级程序员',                        name: 'ptype'                    },                    {                        xtype: 'checkbox',                        boxLabel: '中级程序员',                        name: 'ptype'                    },                    {                        xtype: 'checkbox',                        boxLabel: '高级程序员',                        name: 'ptype'                    },                    {                        xtype: 'combo',                        fieldLabel: '下拉框框',                        store: Ext.create('Ext.data.Store', {                            fields: ['value', 'name'],                            data: [                                {"value": "AL", "name": "Alabama"},                                {"value": "AK", "name": "Alaska"},                                {"value": "AZ", "name": "Arizona"}                            ]                        }),                        queryModel: 'local',                        valueField: 'value',                        displayField: 'name'                    },                    {                        xtype: 'datefield',                        fieldLabel: '日期',                        maxValue: new Date()                    },                    {                        xtype: 'displayfield',                        fieldLabel: '显示信息',                        value: '只是显示数据而已'                    },                    {                        xtype: 'filefield',                        name: 'photo',                        fieldLabel: '头像',                        msgTarget: 'side',                        buttonText: '选择'                    },                    {                        xtype: 'numberfield',                        name: 'bottles',                        fieldLabel: '数字',                        value: 25,                        maxValue: 100,                        minValue: 1                    },                    {                        xtype: 'fieldcontainer',                        fieldLabel: '尺寸',                        defaultType: 'radiofield',                        defaults: {                            flex: 1                        },                        layout: 'hbox',                        items: [                            {                                boxLabel: '中',                                name: 'size',                                inputValue: 'm',                                id: 'radio1'                            },                            {                                boxLabel: 'L',                                name: '大',                                inputValue: 'l',                                id: 'radio2'                            },                            {                                boxLabel: '加大',                                name: 'size',                                inputValue: 'xl',                                id: 'radio3'                            }                        ]                    }                ],                buttons: [                    {                        text: '提交',                        handler: function () {                            leftPanel.getForm().submit({                                url: 'a.json',                                failure: function (form, action) {                                    Ext.Msg.alert('出错了', '错误信息:'+action.failureType);                                },                                success: function (form, action) {                                    if (action.result.result)                                        Ext.Msg.alert('结果正常', '提示信息:' + action.result.msg);                                    else                                        Ext.Msg.alert('结果失败', '提示信息:' + action.result.msg);                                }                            });                        }                    }                ]            })            ;

这就是一个表单了.看最后一点点代码就可以了.

当a.json不包含success这个属性的时候

{    //"success":true,    "result": true,    "msg": "出错了,无法连接到数据库"}

,报错如图

当包含success时

{    "success":true,    "result": true,    "msg": "出错了,无法连接到数据库"}

结果如图

当success为假时

{    "success":false,    "result": true,    "msg": "出错了,无法连接到数据库"}

看图,和success不存在时是一样的.