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

Question

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.

The tap event is being fired on classic sdk?

Matheus Hatje
– Matheus Hatje

2019-06-12 11:40:51 +00:00
Commented Jun 12, 2019 at 11:40 — Matheus Hatje
– Matheus Hatje, Commented Jun 12, 2019 at 11:40
no its click event in classic

Jaydeep
– Jaydeep

2019-06-12 11:59:52 +00:00
Commented Jun 12, 2019 at 11:59 — Jaydeep
– Jaydeep, Commented Jun 12, 2019 at 11:59

Matheus Hatje · Accepted Answer · 2019-06-12 11:44:28Z

3

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

answered Jun 12, 2019 at 11:44

Matheus Hatje

9871 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related