ExtJS 6 MVC "Hello World" Application

Posted By Vitaliy | June 12, 2017 | ExtJS 6.0.1
0 259
This is minimal html page code to run ExtJS version 6 with MVC Architecture.
Note: it's recommended to add html DOCTYPE for this version of library.

<!DOCTYPE html>
<html>
	<head>
		<link href="/ext/6.0.1/build/classic/theme-triton/resources/theme-triton-all.css" rel="stylesheet" />
		<script src="/ext/6.0.1/build/ext-all.js"></script>
		<script src="/ext/6.0.1/build/classic/theme-triton/theme-triton.js"></script>
		<script src="/js/apps/6.0.1/HelloWorld/app.js"></script>
	</head>
	<body>
	</body>
</html>

ExtJS 5 MVC "Hello World" Application

Posted By Vitaliy | May 02, 2017 | ExtJS 5.0.1
0 394
This is minimal html page code to run ExtJS version 5 with MVC Architecture.
Note: it's recommended to add html DOCTYPE for this version of library.

<!DOCTYPE html>
<html>
	<head>
		<link  href="/ext/5.0.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css" rel="stylesheet" />
		<script src="/ext/5.0.1/build/ext.js"></script>
		<script src="/ext/5.0.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
		<script src="/js/apps/5.0.1/HelloWorld/app.js"></script>
	</head>
	<body>
	</body>
</html>

ExtJS 4 MVC "Hello World" Application

Posted By Vitaliy | April 30, 2017 | ExtJS 4.0.7
0 391
This is minimal html page code to run ExtJS version 4 with MVC Architecture.
Note: it's recommended to add strict DOCTYPE for this version of library.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<link  href="/ext/4.0.7/resources/css/ext-all.css" rel="stylesheet" />
		<script src="/ext/4.0.7/ext.js"></script>
		<script src="/js/apps/4.0.7/HelloWorld/app.js"></script>
	</head>
	<body></body>
</html>

ExtJS 6: Building a Login System

Posted By Vitaliy | April 21, 2017 | ExtJS 6.0.0
0 734
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'
            }
        }]
    }
});
            

ExtJS 5: Building a Login System

Posted By Vitaliy | September 26, 2014 | ExtJS 5.0.0
1 9380
This post is a demo for this tutorial

Js Code

//app/view/login/Login.js
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'
            }
        }]
    }
});