ExtJS 6 Button with SVG Icon

Posted By Vitaliy | May 10, 2017 | ExtJS 6.0.1
0 102
This post is a reply to this question.

There are two config options to set button's image:
  • iconCls - one or more space separated CSS classes to be applied to the icon element
  • icon - Url to the icon

Js Code

items: [{
    text: 'Icon from CSS',
    iconCls: 'my-icon'
}, {
    text: 'Icon from Url',
    icon: 'https://image.flaticon.com/icons/svg/417/417782.svg'
}]
            

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

Posted By Vitaliy | May 06, 2017 | ExtJS 6.0.1
0 56
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 - Modern Toolkit Theme Triton

Posted By Vitaliy | May 06, 2017 | ExtJS 6.0.1
0 95
This is minimal html page code to run ExtJS version 6 in Modern Toolkit with Triton theme.
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, 1074Kb). 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.1/build/modern/theme-triton/resources/theme-triton-all.css" rel="stylesheet" />
        <script src="/ext/6.0.1/build/ext-modern-all.js"></script>
        <script src="/ext/6.0.1/build/modern/theme-triton/theme-triton.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 - Modern Toolkit

Posted By Vitaliy | May 05, 2017 | ExtJS 6.0.0
0 116
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 Using Ext Loader

Posted By Vitaliy | May 05, 2017 | ExtJS 6.0.1
0 107
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!');
});