Создание представлений
За визуальную часть или интерфейс пользователя будут отвечать представления. Представления у нас будут находиться в папке BookApp/app/view. Общая структура визуальной части нашего приложения будет следующей: у нас будет основная часть со списком книг и специальное окно, где можно изменять или создавать книгу.
Добавим в каталог BookApp/app/view файл BookList.js, который у нас будет отвечать за вывод таблицы книг, со следующим содержимым:
Ext.define('BookApp.view.BookList' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.booklist',
title: 'Библиотека',
store: 'BookStore',
initComponent: function() {
this.columns = [
{header: 'Название', dataIndex: 'name', flex: 1},
{header: 'Автор', dataIndex: 'author', flex: 1},
{header: 'Год', dataIndex: 'year', flex: 1}
];
this.callParent(arguments);
}
});
В данном случае мы создаем класс-компонент BookList, который будет унаследован от Ext.grid.Panel, то есть будет представлять собой таблицу.
В качестве псевдонима определяем ему имя booklist (alias: 'widget.booklist',).
Определяем для параметра initComponent функцию, которая просто добавляет столбцы в грид. И привязываем его к созданному на прошлом
этапе хранилищу: store: 'BookStore'.
Теперь определим класс окна, в котором будет происходить добавление/изменение/удаление книг. Этот класс у нас будет называться Book. Он также будет находиться в папке BookApp/app/view и будет иметь следующее содержание:
Ext.define('BookApp.view.Book', {
extend: 'Ext.window.Window',
alias: 'widget.bookwindow',
title: 'Книга',
layout: 'fit',
autoShow: true,
initComponent: function() {
this.items = [{
xtype: 'form',
items: [{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Название'
},{
xtype: 'textfield',
name : 'author',
fieldLabel: 'Автор'
},{
xtype: 'numberfield',
name : 'year',
fieldLabel: 'Год',
minValue: 1,
}]
}];
this.dockedItems=[{
xtype:'toolbar',
docked: 'top',
items: [{
text:'Создать',
iconCls:'new-icon',
action: 'new'
},{
text:'Сохранить',
iconCls:'save-icon',
action: 'save'
},{
text:'Удалить',
iconCls:'delete-icon',
action: 'delete'
}]
}];
this.buttons = [{
text: 'Очистить',
scope: this,
action: 'clear'
}];
this.callParent(arguments);
}
});
Во-первых, поскольку это окно, то оно наследуется от класса Ext.window.Window, а в качестве псевдонима, по которому
к данному классу будем обращаться в приложении, мы указываем bookwindow.
Во-вторых, для параметра initComponent определяем функцию, которая инициализирует компоненты окна: основную форму с тремя полями
для ввода, тулбар с тремя кнопками и одну кнопку внизу. В итоге визуально это будет выглядеть примерно так:
Еще один момент, который бы я хотел отметить - применение стилей. В данном случае для создания иконок рядом с кнопками в тулбаре я применяю
стили, например, iconCls:'new-icon'. Здесь используется класс new-icon. Для определения данного класса добавим в ранее созданную
папку BookApp/styles три изображения, которые будут использоваться в качестве иконок на кнопках, и файл стилей (назовем его, например, style.css) примерно такого содержания:
.new-icon {background:transparent url(new.png) center 0 no-repeat;}
.save-icon {background:transparent url(save.png) center 0 no-repeat;}
.delete-icon {background:transparent url(delete.png) center 0 no-repeat;}
Ну и затем нам надо подключить эти стили к приложению в файле index.html:
<html> <head> <title>BookApp</title> <meta charset='utf-8'> <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" > <link rel="stylesheet" type="text/css" href="styles/style.css" > <script type="text/javascript" src="../extjs/ext-all-debug.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body></body> </html>
Теперь перейдем к ключевому звену приложения - к контроллеру.