Results 1 to 2 of 2

Thread: Html Upload Control in Extjs tab panel

  1. #1
    Sencha User
    Join Date
    Feb 2013
    Location
    Pune, India
    Posts
    2

    Default Html Upload Control in Extjs tab panel

    HI,

    I have tried using the ExtJs xtype:'fileuploadfield' inside a form panel which is placed in a tab panel.
    but getting errors in it

    Please go through the attachments

    Beacause of this I am using an html upload control but which type of listener should be used to get the file selected and read its data.

    {
    xtype:
    'container',
    bodyStyle:
    'padding:2px;',
    html:
    '<div><label for="file-upload-1"> Upload file: </label><input id="file-upload-1" type="file" name="uploaded" /></div>',
    listeners:
    {
    onchange:
    function () {
    Ext.get(
    'file-upload-1').on('change', function (evt) {
    });
    }
    }
    }


    I have tried using afterRender, select and other events, but nothing gets fired after a file is selected.
    Please help.

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    An error with the filefield when it's in a form in a tabpanel? Are you seeing an error with the below code?

    Code:
    var form = Ext.create('Ext.form.Panel', {
        title: 'Upload a Photo',
        bodyPadding: 10,
        frame: true,
        items: [{
            xtype: 'filefield',
            name: 'photo',
            fieldLabel: 'Photo',
            labelWidth: 50,
            msgTarget: 'side',
            allowBlank: false,
            anchor: '100%',
            buttonText: 'Select Photo...'
        }],
    
    
        buttons: [{
            text: 'Upload',
            handler: function() {
                var form = this.up('form').getForm();
                if(form.isValid()){
                    form.submit({
                        url: 'photo-upload.php',
                        waitMsg: 'Uploading your photo...',
                        success: function(fp, o) {
                            Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
                        }
                    });
                }
            }
        }]
    });
    
    
    Ext.widget('tabpanel', {
        renderTo: Ext.getBody(),
        width: 400,
        items: [form]
    });

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •