ExtJS 5 MVVM "Hello World" Application

Posted By Vitaliy | May 02, 2017 | ExtJS 5.0.1
0 589
This is minimal html page code to run ExtJS version 5 with MVVM 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/mvvm/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 580
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 5 "Hello World" Application Using Ext Loader

Posted By Vitaliy | May 02, 2017 | ExtJS 5.0.1
0 623
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 5 "Hello World" Application

Posted By Vitaliy | May 02, 2017 | ExtJS 5.0.0
0 636
This is minimal html page code to run ExtJS version 5.
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, 1842Kb). You can find demo in my another post and more details here.

<!DOCTYPE html>
<html>
	<head>
		<link  href="/ext/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css" rel="stylesheet" />
		<script src="/ext/5.0.0/build/ext-all.js"></script>
		<script src="/ext/5.0.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.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 5 Textfield Chrome Bug Fix

Posted By Vitaliy | July 03, 2015 | ExtJS 5.0.0
1 4109
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()
    });
});