Extjs表单提交

时间:2014-10-27 15:14:51

标签: javascript php extjs

我搜索了数小时和数小时的解决方案,但无法找到解决方案。我想向php api函数提交一些东西。它看起来像这样:

 /*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;
                                    }
                            }
                    }
    }]

})  

});

但是,当我提交时,我没有得到回应,有人可以帮助我吗?我不知道接下来的步骤是什么......

2 个答案:

答案 0 :(得分:1)

我使用Ext JS / 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-method-submit

答案 1 :(得分:0)

嗯,您没有为表单设置任何网址,并且提交按钮没有提交方法,所以我不确定这是如何工作的。

您需要将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