ExtJS 6 HTML 5 Multi File Upload

Posted By Vitaliy | June 20, 2017 | ExtJS 6.0.0
0 282
The multiple attribute is new in HTML5.
Note: the multiple attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari.

Js Code

items: {
    xtype: 'form',
    border: false,
    bodyStyle: {
        padding: '10px'
    },
    items: {
        xtype: 'multifilefield',
        labelWidth:100,
        fieldLabel: 'Choose file(s)',
        anchor: '100%',
        allowBlank: false
    }
}
            

ExtJS 5 Textfield Chrome Bug Fix

Posted By Vitaliy | July 03, 2015 | ExtJS 5.0.0
1 3903
This bug can be fixed by single css line: .x-form-text { display: inline; }

Js Code

Ext.onReady(function () {
    Ext.widget({
        title: 'Form',
        xtype: 'form',
        width: 400,
        frame: true,
        bodyPadding: 10,
        items: [{
            fieldLabel: 'Bug field',
            xtype: 'textfield'
        }, {
            fieldLabel: 'Fixed field',
            xtype: 'textfield',
            fieldCls: 'fixed'
        }],
        renderTo: Ext.getBody()
    });
});
            

ExtJS 4.2.2 HTML 5 Multi File Upload

Posted By Vitaliy | February 20, 2014 | ExtJS 4.2.2
1 16269
The multiple attribute is new in HTML5.
Note: the multiple attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari.

Js Code

items: {
    xtype: 'form',
    border: false,
    bodyStyle: {
        padding: '10px'
    },
    items: {
        xtype: 'multifilefield',
        labelWidth: 80,
        fieldLabel: 'Choose file(s)',
        anchor: '100%',
        allowBlank: false,
        margin: 0
    }
}
            

ExtJS 4: TreePanel From Uploaded Xml File

Posted By Vitaliy | February 24, 2013 | ExtJS 4.1.1
0 3777
​Xml file sample here.

Js Code

var form = win.down('form').getForm();
if (form.isValid()) {
    form.submit({
        url: '/upload/xml',
        waitMsg: 'Uploading your xml file...',
        success: function(f, a) {
            var result = a.result,
                data = result.data,
                store = tree.getStore();

            win.close();

            store.setRootNode(data);
            tree.expandAll();
        },
        failure: function(f, a) {
            Ext.Msg.alert('Failure', a.result.msg);
        }
    });
}