ExtJS — digital-flame

Что такое ExtJS?

Что такое ExtJS? Это довольно мощная библиотека компонентов под JavaScript, на момент написания статьи распространяется компанией Sencha! Последняя версия, опять же на момент написания статьи это 6 версия. Все дальнейшие эксперименты я буду проводить именно с 6 версией.

Где скачать ExtJS?

Официальная бесплатная GPL лицензия может быть скачана здесь. Более подробно о лицензиях есть информация на хабре. Конечно информация с хабра слегка устарела, но все же! Было бы полезно понимать какие лицензии вообще существуют. Ценник у ExtJS кусается, но для любителей свободного ПО есть вариант с GPL о котором я уже говорил.

Какие файлы подключать для начала работы и где их взять?

После скачивания, немного разобравшись со структурой архива, я взял следующие файлы. Собственно для работы ExtJS нужно сделать 2 вещи.

Подключить файл ext-all.js это собственно библиотека
А также файл со стилями CSS, папку со стилями CSS я выбрал theme-neptune и скопировал её целиком в папку проекта.

Вот каким кодом я подключил файлы ext-all.js и theme-neptune-all.css у себя

<link rel="stylesheet" type="text/css" href="http://digital-flame.ru/myscripts/ExtJS/Styles/theme-neptune/resources/theme-neptune-all.css">
<script type="text/javascript" src="http://digital-flame.ru/myscripts/ExtJS/ext-all.js"></script>

1 2	<link rel="stylesheet" type="text/css" href="http://digital-flame.ru/myscripts/ExtJS/Styles/theme-neptune/resources/theme-neptune-all.css"> <script type="text/javascript" src="http://digital-flame.ru/myscripts/ExtJS/ext-all.js"></script>

Как написать первое приложение?

(Hello World! Hello from ExtJS 6.0 GPL)

Создадим файл Main.html

Кроме файлов ext-all.js и theme-neptune-all.css подключим также наш скрипт App.js, в котором и будет происходить основная магия…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--Подключение библиотеки ExtJS, CSS и нашего скрипта JS-->

<link rel="stylesheet" type="text/css" href="http://digital-flame.ru/myscripts/ExtJS/Styles/theme-neptune/resources/theme-neptune-all.css">
<script type="text/javascript" src="http://digital-flame.ru/myscripts/ExtJS/ext-all.js"></script>
<script type="text/javascript" src="App.js"></script>

		<title>Main</title>

	</head>

	<body>
     
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</head>

<body>

</body>

</html>

Также, создадим файл App.js

/**
 * @author Stas
 */


Ext.application({
	name:'MyFirstExtJSApp',
	launch:function(){
		Ext.create('Ext.container.Viewport',{
			layout:'fit',
			items:[
			{
				title:'Мое первое приложение на Ext JS 6',
				html:'<h1 style="color:blue">Congratulations! ExtJS App is working!!!</h1>'
			}
			]
		}
		
			
		);
		
	}
});

/**

* @author Stas

Ext.application({

name:'MyFirstExtJSApp',

launch:function(){

Ext.create('Ext.container.Viewport',{

layout:'fit',

items:[

{

title:'Мое первое приложение на Ext JS 6',

html:'<h1 style="color:blue">Congratulations! ExtJS App is working!!!</h1>'

}

]

}

);

}

});

Метка: ExtJS

ExtJS. Первое приложение (Hello from ExtJS)

Что такое ExtJS?

Где скачать ExtJS?

Какие файлы подключать для начала работы и где их взять?

Как написать первое приложение?

(Hello World! Hello from ExtJS 6.0 GPL)