ExtJS 6 Ajax File Upload

Posted By Vitaliy | June 23, 2017 | ExtJS 6.0.0
0 22
Uploading file with AJAX is possible since XMLHttpRequest Level 2 and FormData API.

Js Code

var file = s.fileInputEl.dom.files[0],
	data = new FormData();

data.append('file', file);

Ext.Ajax.request({
   url: '/upload/files',
   rawData: data,
   headers: {'Content-Type':null}, //to use content type of FormData
   success: function(response){
   }
});

            

ExtJS 6 HTML 5 Multi File Upload

Posted By Vitaliy | June 20, 2017 | ExtJS 6.0.0
0 62
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 6 "Hello World" Application - Modern Toolkit

Posted By Vitaliy | May 05, 2017 | ExtJS 6.0.0
0 317
This is minimal html page code to run ExtJS version 6 in Modern Toolkit.
Note: that it's recommended to add html DOCTYPE for this version of library.
Also there is a way to avoid including of whole ExtJS library (ext-modern-all.js, 1053Kb). You can find demo in my another post and more details here.
Also be aware that in 6.0.0 there is no triton theme in modern toolkit.

<!DOCTYPE html>
<html>
    <head>
        <link  href="/ext/6.0.0/build/modern/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
        <script src="/ext/6.0.0/build/ext-modern-all.js"></script>
        <script src="/ext/6.0.0/build/modern/theme-neptune/theme-neptune.js"></script>
    </head>
    <body>
        <script>
			Ext.application({
				launch : function() {
					Ext.Msg.alert('Welcome', 'Hello, World!');
				}
			});
        </script>
    </body>
</html>

Js Code

Ext.application({
    launch : function() {
        Ext.Msg.alert('Welcome', 'Hello, World!');
    }
});
            

ExtJS 6 "Hello World" Application

Posted By Vitaliy | May 05, 2017 | ExtJS 6.0.0
0 405
This is minimal html page code to run ExtJS version 6.
Note: that it's recommended to add html DOCTYPE for this version of library.
Also there is a way to avoid including of whole ExtJS library (ext-all.js, 2021Kb). You can find demo in my another post and more details here.

<!DOCTYPE html>
<html>
	<head>
		<link  href="/ext/6.0.0/build/classic/theme-triton/resources/theme-triton-all.css" rel="stylesheet" />
		<script src="/ext/6.0.0/build/ext-all.js"></script>
		<script src="/ext/6.0.0/build/classic/theme-triton/theme-triton.js"></script>
	</head>
	<body>
		<script>
			Ext.onReady(function() {
				Ext.Msg.alert('Welcome', 'Hello, World!');
			});
		</script>
	</body>
</html>

Js Code

Ext.onReady(function() {
    Ext.Msg.alert('Welcome', 'Hello, World!');
});
            

ExtJS 6: Building a Login System

Posted By Vitaliy | April 21, 2017 | ExtJS 6.0.0
0 510
This post is a demo for this tutorial

Js Code

Ext.define("App.view.login.Login", {
    extend: 'Ext.window.Window',
    xtype: 'login',
 
    requires: [
        'App.view.login.LoginController',
        'Ext.form.Panel'
    ],
 
    controller: 'login',
    bodyPadding: 10,
    title: 'Login Window',
    closable: false,
    autoShow: true,
 
    items: {
        xtype: 'form',
        reference: 'form',
        items: [{
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Username',
            allowBlank: false
        }, {
            xtype: 'textfield',
            name: 'password',
            inputType: 'password',
            fieldLabel: 'Password',
            allowBlank: false
        }, {
            xtype: 'displayfield',
            hideEmptyLabel: false,
            value: 'Enter any non-blank password'
        }],
        buttons: [{
            text: 'Login',
            formBind: true,
            listeners: {
                click: 'onLoginClick'
            }
        }]
    }
});