Search code examples
extjsextjs4filefield

Extjs4, File uplaod

I'm tring to post file to server using Extjs4.1 filefield.

but an error occur, it say result is undefined. :(

enter image description here

In form,

without filefield, it works fine.'

This is the form. and it load OK. the error occur when try to submit.

var myform = Ext.create('Ext.form.Panel', {
    bodyStyle: 'padding: 15px 50px',
    defaults: {
        xtype: 'textfield',
        anchor: '100%',
        style : 'margin-top:10px'
    },
    items: [
    {
        xtype: 'fieldcontainer',
        layout: 'hbox',
        anchor: '50%',
        items: [
            {
                xtype: 'textfield',
                fieldLabel: '<b>Order Number </b>',
                name: 'orderNo',
                maxLength: 9,
                flex: 1,
                allowBlank: false
            }, {
                xtype: 'button',
                text: 'Get Info',
                name : 'getOrderInfo_btn',
                tooltip: 'Get Order Information',
                style: 'margin-left:5px',
                flex: 0
            }
        ]
    }, {
        fieldLabel: '<b>Refundable Tax Amount </b>',
        name: 'refundAmount',
        readOnly: true,
        labelWidth: 160,
        anchor: '45%',
        allowBlank: false
    }, {
        fieldLabel: '<b>Certificate File</b>',  //without this, it's OK
        xtype : 'filefield',  
        name: 'certificate',
        labelWidth: 160,
        anchor: '90%',
        allowBlank: false
    }
    .
    .
    .

This is my controller (to submit form),

refundTaxAmount: function (obj) {
        var form = obj.up('panel').down('form').getForm();
        console.log('Hi'); // it prints, but after that it stop with an error msg.
        if (form.isValid()) {
            form.submit({
                waitMsg: 'Please wait, now processing...',
                url: '/Order/CreditForTax/',
                method: 'POST',
                success: function (form, action) {
                    Ext.MessageBox.show({
                        title: 'Notice',
                        msg: 'The tax credit has been refunded!',
                        buttons: Ext.MessageBox.OK,
                        icon: Ext.MessageBox.INFO,
                        width: 300
                    });
                    form.reset();
                },
                failure: function (form, action) {
                    Ext.MessageBox.show({
                        title: 'Error',
                        msg: action.result.message,
                        buttons: Ext.MessageBox.OK,
                        icon: Ext.MessageBox.ERROR,
                        width: 300
                    });
                }
            });
        }
    }

Anybody know, what is my problem? please advice me~!

Thanks

[EDIT]

when submit(), after 5-10 sec, the error message occur.

enter image description here

enter image description here

[Edit2]

ASP.NET (c#) Code,

[HttpPost]
public JsonResult CreditForTax(RefundModel info, HttpPostedFileBase certificate)
{
    object result;
    try
    {
    //do something

    result = new {success = true};
    }
    catch (Exception e)
    {
    log.Error(e.Message +"\n"+e.StackTrace);
    result = new { success = false, message = e.Message };
    }

    return Json(result);
}

yes, I think the asp.net code is wrong... anybody know what's the problem with that code?

Solution

  • If the server is using JSON to send the return object, then the Content-Type header must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.

    C# (MVC3) code:

    var jsonResponse = Json( new
                        {
                            success = false,
                            message = "Oops. There was an unexpected error.\n" + ex.ToString()
                        });
jsonResponse.ContentType = "text/html"; // <-- Set content type explicitly.
return jsonResponse;

    Here is the link to documentation.