CODEWITHSUNDEEP
javascriptextjs
Jaydeep
Jaydeep

Reputation: 1716

How to trigger a file input field click dynamically in ExtJS?

I have a button in dataview on click of which i have to open fileUpload browse. I have tried below code which seems to be working fine with Ext JS modern SDK but with classic el element is null.

Ext.application({
name: 'Fiddle',

launch: function () {
    var panel = Ext.Viewport.add({
        xtype: 'panel',
        title: 'FileInput Field Trigger',
        itemId: 'Mypanel',
        items: [{
            xtype: 'button',
            text: 'Upload file',
            listeners: {
                tap: function (button) {
                    // Find the fileinput field
                    var panel = button.up('#Mypanel');
                    var fileinput = panel.down('#myFileInputField');

                    // Programmatically click the file input field
                    fileinput.el.query('input[type=file]')[0].click();
                }
            }
        }, {
            xtype: 'formpanel',
            hidden: true,
            items: [{
                xtype: 'filefield',
                itemId: 'myFileInputField',
                listeners: {
                    change: function (field, newValue, oldValue, eOpts) {
                        Ext.Msg.alert('Results', newValue);
                    }
                }
            }]
        }]
    });
}
});

Is there any method to trigger this event or any other approach please.

Upvotes: 2

Views: 1834

Answers (1)

Matheus Hatje
Matheus Hatje

Reputation: 987

If you are putting the exact above code in classic sdk, then, there are some things that are slightly different compared to modern sdk:

The form xtype in Classic is just 'form' and not 'formpanel'

In Classic there isn't a tap event for buttons, just a handler that is executed when the button is clicked:

items: [{
        xtype: 'button',
        text: 'My Button',
        handler: function(button) {
            console.log('you clicked the button ', button);
        }
}]

Checkout the working fiddle

Upvotes: 3

Related Questions