Extjs表单提交

Extjs form submit

本文关键字：表单提交 Extjs      更新时间：2023-09-26

我花了好几个小时寻找解决方案，但找不到。我想向phpapi函数提交一些内容。它看起来像这样：

 /*global Ext:false */
Ext.onReady(function () 
{
var i = 0;
var form = Ext.create('Ext.form.Panel', {
         title: 'base_entity_id',
    bodyPadding: 5,
    width: 350,
     defaultType: 'textfield',
    items: [{
        fieldLabel: 'base_entity_id',
        name: 'first',
        allowBlank: false
    }],
     buttons: [{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Submit',
        formBind: true,
        //only enabled once the form is valid
        disabled: true,
        handler: function() {
            var form = this.up('form').getForm();
          }
    }],
    })
var tabs = Ext.create('Ext.tab.Panel', 
{
    renderTo: 'tabs',
    id: 'tabs',
    itemId: 'tabs',
    fullscreen: true,
    renderTo: document.body,
    items: 
    [
        {
            title: 'Home',
            margin: 40,
            items: [form],
        },
        {
        title: 'Results',
        itemId: 'Results',
         listeners: 
            {
                activate: function (tab) 
                    {
                        if(i == 0)
                            {
                                    var panel = Ext.create('Ext.tab.Panel', 
                                    {
                                        id: 'tabs2',
                                        width: window,
                                        height: window,
                                        renderTo: document.body,
                                    items: 
                                        [
                                            {
                                                title: '1',
                                                itemId: '1',
                                                closable: true,
                                                html: '10329u9iwsfoiahfahfosaofhasohflhsalkfhoihoi3riwoifhoiashfkhasofhosahfsahfahsfosafoisaiohfaoishfoihsaoifasoifsaifhsaoifasoihfoiahsfoihasfoihasoifoisfoihsafoihasfoiasoihasfoihaoifhaoihfoiahfoiaoaffoafoiafsaoafohaoh'
                                            },
                                            {
                                                title: '2',
                                                itemId: '2',
                                                closable: true,
                                            }
                                        ]
                                                            })
                                            tab.add(panel);
                                            tab.doLayout();
                                            i = 1;
                                    }
                            }
                    }
    }]
})

})；

但当我提交时，我没有得到回应，有人能帮我吗？我不知道下一步是什么。。。

我用ExtJS/PHP完成了一个简单的应用程序，下面的代码对我有效：

myFormPanel.getForm().submit({
    clientValidation: true,
    url: 'updateConsignment.php',
    params: {
        id: myFormPanel.getForm().getValues().first
    },
    success: function(form, action) {
       Ext.Msg.alert('Success', action.result.msg);
    },
    failure: function(form, action) {
        switch (action.failureType) {
            case Ext.form.Action.CLIENT_INVALID:
                Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                break;
            case Ext.form.Action.CONNECT_FAILURE:
                Ext.Msg.alert('Failure', 'Ajax communication failed');
                break;
            case Ext.form.Action.SERVER_INVALID:
               Ext.Msg.alert('Failure', action.result.msg);
       }
    }
});

来源：http://docs.sencha.com/extjs/3.4.0/#/api/Ext.form.BasicForm-方法-提交

好吧，您没有为表单设置URL，提交按钮也没有提交方法，所以我真的不确定这应该如何工作。

您需要将url配置添加到您的表单中：

Ext.create('Ext.form.Panel', {
    title: 'base_entity_id',
    method: 'POST',
    url: 'myBackEnd.php' // Or whatever destination you are using for your backend.
...
});

此外，我看到您正在使用formbind: true，然后检查表单是否有效，一个操作会使另一个操作变得不必要，所以选择一个，不需要同时使用两个！

添加此按钮处理程序：

form.submit({
    params: {
        id: form.getForm().getValues().first
    },
    success: function(form, action) {
        Ext.Msg.alert('Success', 'Your form was submitted successfully');
    },
    failure: function(form, action) {
        Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response');
    }
});

然后你应该检查$_POST['id']

有关表单方法和配置的更多信息，请查看此文档：http://docs.sencha.com/extjs/5.0/apidocs/#/api/Ext.form.Basic

相关文章：