1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    316
    Answers
    2
    Vote Rating
    2
    mjhaston is on a distinguished road

      0  

    Default Answered: File Upload successful .... screen still masked!

    Answered: File Upload successful .... screen still masked!


    From what I can see my files are being uploaded successfully. They are on the server.

    I'm returning a JSON response in "text/html" format like always.

    My problem is my screen remains masked or grayed out!




    FormPanel:
    Code:
    	var uploadPanel = Ext.create('Ext.form.Panel', {
    		fileUpload : true,

    Input field:
    Code:
    			items : [{
    				xtype : 'fileuploadfield',
    				id : 'filesnt',
    Submit upload file:
    Code:
    			if (uploadPanel.getForm().isValid()) {
    				uploadPanel.getForm().submit({
    					url : '/cgi-bin/fuploadext.pgm',
    					waitMsg : 'Uploading your file...',
    
    					success : function(uploadPanel, o) {
    						// do whatever you need to with the generated HTML
    						console.log(o.response.responseText);
    					},
    					failure : function() {
    						console.log('failure');
    					}
    				});
    			}

    JSON reply from program code:
    Code:
    string = 'Content-type: text/html' +x'25' +x'25' 
           + '{ '                                    
           + ' "success" : true, '                   
           + ' "data" : [{'                          
           + '        "responseText" : "good", '     
           + '        "someData" : "x" '             
           + '  }] '                                 
           + '} '                                    
    ;

    JSON reply in Firebug:
    Code:
    {
        "success": true,
        "data": [
            {
                "responseText": "good",
                "someData": "x"
            }
        ]
    }

  2. Hi majhaston,

    Try to give "waitMsgTarget: true" to the formPanel, like-
    Code:
    Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        waitMsgTarget:true,
        width: 350,
        url: 'save-form.php',
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false
        },{
            fieldLabel: 'Last Name',
            xtype:'fileuploadfield',
            name: 'last',
            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();
                if (form.isValid()) {
                    form.submit({
                        url : '/cgi-bin/fuploadext.pgm',
                        waitMsg : 'Uploading your file...',
                        success: function(form, action) {
                           Ext.Msg.alert('Success', action.result.msg);
                        },
                        failure: function(form, action) {
                            Ext.Msg.alert('Failed', action.result.msg);
                        }
                    });
                }
            }
        }],
        renderTo: Ext.getBody()
    });

  3. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi majhaston,

    Try to give "waitMsgTarget: true" to the formPanel, like-
    Code:
    Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        waitMsgTarget:true,
        width: 350,
        url: 'save-form.php',
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false
        },{
            fieldLabel: 'Last Name',
            xtype:'fileuploadfield',
            name: 'last',
            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();
                if (form.isValid()) {
                    form.submit({
                        url : '/cgi-bin/fuploadext.pgm',
                        waitMsg : 'Uploading your file...',
                        success: function(form, action) {
                           Ext.Msg.alert('Success', action.result.msg);
                        },
                        failure: function(form, action) {
                            Ext.Msg.alert('Failed', action.result.msg);
                        }
                    });
                }
            }
        }],
        renderTo: Ext.getBody()
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Thread Participants: 1