ExtJS 6 "Hello World" Application Using Ext Loader - Modern Toolkit

Posted By Vitaliy | May 06, 2017 | ExtJS 6.0.1
0 284
The idea is to include only the core of ExtJS - ext.js file (293 Kb) instead of ext-all.js file (2032 Kb) and to load only necessary (for your app) classes specified by require statements.
You can find more details here.
To understand how to avoid using of Loader see my another post.

Note: the code of this post doesn't work with ExtJS 6.0.0. Looks like this build is invalid.

<!DOCTYPE html>
<html>
    <head>
        <link  href="/ext/6.0.1/build/modern/theme-triton/resources/theme-triton-all.css" rel="stylesheet" />
        <script src="/ext/6.0.1/build/ext-modern.js"></script>
        <script src="/ext/6.0.1/build/modern/theme-triton/theme-triton.js"></script>
        <script>
            Ext.Loader.setConfig({
                enabled : true,
                paths: {
                    'Ext': '/ext/6.0.1/modern/modern/src',
                    'Ext.overrides': '/ext/6.0.1/modern/modern/overrides'
                }
            });
        </script>
    </head>
    <body>
        <script>
            Ext.require('Ext.overrides.Widget');
            Ext.require('Ext.overrides.app.Application');
            Ext.require('Ext.MessageBox');
            Ext.application({
                name: 'WelcomeApp',
                launch : function() {
                    Ext.Msg.alert('Welcome', 'Hello, World!');
                }
            });
        </script>
    </body>
</html>

Js Code

Ext.require('Ext.overrides.Widget');
Ext.require('Ext.overrides.app.Application');
Ext.require('Ext.MessageBox');
Ext.application({
    name: 'WelcomeApp',
    launch : function() {
        Ext.Msg.alert('Welcome', 'Hello, World!');
    }
});
            

ExtJS 6 "Hello World" Application Using Ext Loader

Posted By Vitaliy | May 05, 2017 | ExtJS 6.0.1
0 336
The idea is to include only the core of ExtJS - ext.js file (293 Kb) instead of ext-all.js file (2032 Kb) and to load only necessary (for your app) classes specified by require statements.
You can find more details here.
To understand how to avoid using of Loader see my another post.

Note: the code of this post doesn't work with ExtJS 6.0.0. Looks like this build is invalid.

<!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.js"></script>
		<script src="/ext/6.0.1/build/classic/theme-triton/theme-triton.js"></script>
		<script>
			Ext.Loader.setConfig({
				enabled : true,
				paths: {
					Ext: '/ext/6.0.1/classic/classic/src'
				}
			});
		</script>
	</head>
	<body>
		<script>
			Ext.require('Ext.window.MessageBox');
			Ext.onReady(function() {
				Ext.Msg.alert('Welcome', 'Hello, World!');
			});
		</script>
	</body>
</html>

Js Code

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

ExtJS 5 "Hello World" Application Using Ext Loader

Posted By Vitaliy | May 02, 2017 | ExtJS 5.0.1
0 281
The idea is to include only the core of ExtJS - ext.js file (658 Kb) instead of ext-all.js file (1896 Kb) and to load only necessary (for your app) classes specified by require statements.
You can find more details here.
To understand how to avoid using of Loader see my another post.

Note: the code of this post doesn't work with ExtJS 5.0.0. Looks like this build is invalid.

<!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>
			Ext.Loader.setConfig({
				enabled : true,
				paths: {
					Ext: '/ext/5.0.1/src'
				}
			});
		</script>
	</head>
	<body>
		<script>
			Ext.require('Ext.window.MessageBox');
			Ext.onReady(function() {
				Ext.Msg.alert('Welcome', 'Hello, World!');
			});
		</script>
	</body>
</html>

Js Code

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

ExtJS 4 "Hello World" Application Using Ext Loader

Posted By Vitaliy | April 30, 2017 | ExtJS 4.0.0
0 259
The idea is to include only the core of ExtJS - ext.js file (148 Kb) instead of ext-all.js file (1028 Kb) and to load only necessary (for your app) classes specified by require statements.
You can find more details here.
To understand how to avoid using of Loader see my another post.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<link  href="/ext/4.0.0/resources/css/ext-all.css" rel="stylesheet" />
		<script src="/ext/4.0.0/ext.js"></script>
		<script>
			Ext.Loader.setConfig({
				enabled : true,
				paths: {
					Ext: '/ext/4.0.0/src'
				}
			});
		</script>
	</head>
	<body>
		<script>
			Ext.require('Ext.window.MessageBox');
			Ext.onReady(function() {
				Ext.Msg.alert('Welcome', 'Hello, World!');
			});
		</script>
	</body>
</html>

Js Code

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