ExtJS 4 MVC "Hello World" Application

Posted By Vitaliy | April 30, 2017 | ExtJS 4.0.7
0 693
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 4 "Hello World" Application Using Ext Loader

Posted By Vitaliy | April 30, 2017 | ExtJS 4.0.0
0 651
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!');
});
            

ExtJS 4 "Hello World" Application

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

<!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" type="text/css" />
		<script src="/ext/4.0.0/ext-all.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 4.2.2 HTML 5 Multi File Upload

Posted By Vitaliy | February 20, 2014 | ExtJS 4.2.2
2 17501
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: 80,
        fieldLabel: 'Choose file(s)',
        anchor: '100%',
        allowBlank: false,
        margin: 0
    }
}
            

ExtJs 4.2.2 HasMany Association Bug

Posted By Vitaliy | February 19, 2014 | ExtJS 4.2.2
0 4181
This type of association represents a one-to-many relationship between two models.
For example OOP Class has many Properties.

As you can see class properties were not loaded as here. And this is a bug in 4.2.2. Forum thread is here.

See how it works on ExtJS 4.1.1 here.

Js Code

Ext.define('Class', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' }
    ],
    hasMany: {
        model: 'Property',
        name: 'properties',
        associationKey: 'properties',
        primaryKey: 'id',
        foreignKey: 'classId'
    },
    proxy: {
        type: 'rest',
        url: '/api/classes'
    }
});

Ext.define('Property', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'classId', type: 'int' },
        { name: 'name', type: 'string' }
    ],
    proxy: {
        type: 'rest',
        url: '/api/properties'
    }
});