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

Что такое 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. Первое приложение (Hello from ExtJS)

Что такое ExtJS?

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

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

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

(Hello World! Hello from ExtJS 6.0 GPL)

MY PROJECTS

Recent Posts

Categories