Создание моделей и хранилища

Первым делом создадим модели и хранилище, которое будет содержать объекты данной модели.

Файл модели будет называться Book.js и мы его поместим в каталог BookApp/app/model/:

Ext.define('BookApp.model.Book', {
    extend: 'Ext.data.Model',
    fields: ['id','name', 'author', 'year']
});

Тут все просто. Поскольку в прошлом параграфе в файле app.js мы определили имя приложения BookApp:

name: 'BookApp',
appFolder: 'app',

то название BookApp фактически будет сопоставляться с каталогом app. Например, у нас модель находится в папке app/model, то ее название будет начинаться с BookApp.model, то есть в данном случае: BookApp.model.Book.

Модель Book определяет четыре поля: 'id','name', 'author', 'year'.

В каталог BookApp/app/store поместим файл хранилища, который будет называться BookStore.js:

Ext.define('BookApp.store.BookStore', {
    extend: 'Ext.data.Store',
    model: 'BookApp.model.Book',
    autoLoad: true,
	storeId: 'BookStore',
    proxy: {
        type: 'ajax',
        url: 'app/data/books.json',
        reader: {
            type: 'json',
            root: 'books',
            successProperty: 'success'
        }
    }
});

Опять же обратите внимание, поскольку файл хранилища расположен в папке app/store, то класс хранилища будет называться BookApp.store.BookStore.

Хранилище автоматически реализует загрузку данных из файла books.json.

Итак, добавим в каталог BookApp/app/data/ файл books.json со следующим содержанием:

{
    "success": true,
    "books": [
        {"id": 1, "name": 'Война и мир', "author": 'Л. Толстой', "year": 1863},
        {"id": 2, "name": 'Отцы и дети', "author": 'И. Тургенев', "year": 1862},
		{"id": 3, "name": 'Евгений Онегин', "author": 'А. Пушкин', "year": 1825}
    ]
}

На этом по сути работа с уровнем модели и данных закончена. Теперь перейдем к представлению.