Создание представлений

Последнее обновление: 1.11.2015

За визуальную часть или интерфейс пользователя будут отвечать представления. Представления у нас будут находиться в папке 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>

Теперь перейдем к ключевому звену приложения - к контроллеру.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850