Собираем
информацию
по крупицам

Перевод документации Ext JS 4.2

Ext JS 4.2. Часть 3.4: Представление таблицы с данными
29-09-2013
14:21:53

 

Представление таблицы с данными

 

Пока что наше приложение состояло из нескольких строк кода и содержало два файла - /app.js и app/controller/Users.js. Теперь же нам необходимо добавить отрисовку таблицы с данными (в английской терминологии - grid). В таблице будут отображаться все пользователи системы. И сейчас настало время чтобы улучшить страктуру приложения, и начать использовать представления (виды).

Представление - это ни что иное как компонент, чаще всего определяемый как дочерний класс от ExtJS-компонента. Мы начнем создание таблицы данных пользователей с создания нового файла /app/view/user/List.js. Это файл представления, и его нужно заполнить следующим кодом:

 

Ext.define('AM.view.user.List' ,{
  extend: 'Ext.grid.Panel',
  alias: 'widget.userlist',

  title: 'All Users',

  initComponent: function() {
    this.store = {
      fields: ['name', 'email'],
      data : [
        {name: 'Ed', email: 'ed@sencha.com'},
        {name: 'Tommy', email: 'tommy@sencha.com'}
      ]
    };

    this.columns = [
      {header: 'Name', dataIndex: 'name', flex: 1},
      {header: 'Email', dataIndex: 'email', flex: 1}
    ];

    this.callParent(arguments);
  }
});

 

Наш класс представления - ни что иное как самый обычный класс. Как мы видим, он расширяет Grid-компоненту Ext.grid.Panel (другими словами, он наследуется от Grid-компоненты). В опции alias: мы задаем псевдоним класса, используя нотацию xtype (о чем будет рассказано далее). Мы так же определяем хранилище this.store, в котором хранятся данные о пользователях, и колонки this.columns, которые будут отображаться в таблице данных.

 

Далее необходимо добавить это представление в контроллер Users:

 

Ext.define('AM.controller.Users', {
  extend: 'Ext.app.Controller',

  views: [
    'user.List'
  ],

  init: ...

  onPanelRendered: ...
});

 

Так как мы устанавливали псевдоним представления используя специальный префикс "widget.", мы можем теперь везде использовать имя 'userlist' в качестве xtype (так, как мы это делали ранее с объектом panel).

 

Пока что мы только написали определение представления (вида) и подключили это определение в код контроллера. Теперь надо добавить отрисовку внутри основного окна путём изменения launch-метода в файле app.js:

 

Ext.application({
...

  launch: function() {
    Ext.create('Ext.container.Viewport', {
      layout: 'fit',
      items: {
        xtype: 'userlist'
      }
    });
  }


});

 

 

В вышеприведенном коде мы добавили в список элементов, отображаемых внутри Ext.container.Viewport, объект, описанный в 'user.List' (ведь, как мы помним, ему был присвоен xtype 'userlist'). Весь код объекта будет подгружен автоматически. Теперь мы можем обновить страницу, и увидим следующую таблицу с данными:

 

 

 


К списку "Компьютерное"

Интересное на сайте


Flash-анимация » Клип клуба "Сакура"

Оборудование: Pentium-200MMX, RAM 32Мб Среда: Flash MX Год: 2002   Этот клип я создавал, преследуя две цели.   Первая цель - разобраться с ...


Linux: как перестать удивляться, и начать работать » Как с помощью Linux сбросить пароль и получить права админа в Windows 7

Недавно я сменил место работы, и теперь вместо IT-компании, разрабатывающей игровое ПО под Linux, работаю в машиностроительной отрасли народного хозяй...


Демо на Ассемблере » Spear

Размер: 512 байт Требования: DOS 6.22 Год: 1999   Первое место в номинации 512 Byte на Paradox-99.   Скачать   Смотреть на YouTube...

RSS подписка

Подпишитесь на новости сайта по RSS


Регистрация ооо регистрация ооо bk63.ru.
http://ivit.pro/uslugi/it-infrastruktura/it-autsorsing/ айтишник 24 IT аутсорсинг.

Внимание!


На этом сайте разрабатывается программа MyTetra и её родственные проекты. Доступны к просмотру следующие базы знаний:

 

База Xintrea (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18)

База Rarrugas (1, 2)

База Balas

База YellowRaven

База Yurons

База Lesnik757

База Shandor

База Sirrichar

База Anatolean

База Аrmagedec

База SorokinRed

База Deadelf79

 

Требуют доработки:

 

База Tairesh

База Ivnglkv

База Kolyag87

База Andyk101

База Garik456456

База Harpokrat

База SalexIzyh

База Duwaz

 

Подробности на странице MyTetra Share.

 WebHamster.Ru
 Домик любопытного хомячка
Яндекс индекс цитирования
Почтовый ящик