Собираем
информацию
по крупицам
Статьи - Компьютерное

Перевод документации 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'). Весь код объекта будет подгружен автоматически. Теперь мы можем обновить страницу, и увидим следующую таблицу с данными:

 

 

 


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

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


Мультиплатформенные игры » Ежик-попрыгунчик. Лесная тропа.

Игра про ёжика, который прыгает по подвижным платформам и собирает яблочки.   Эта игра писалась в рамках конкурса конференции разработчиков игр ...


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

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


Гаджеты » Бал роботов в Москве 2014 г. Личные впечатления

Вступление   Когда я учился в школе, я бегал в местную детско-юношескую библиотеку и зачитывался советской фантастикой. Моим самым любимым авторо...

RSS подписка

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

Поделиться



Регистрация ооо регистрация ооо bk63.ru.
http://ivit.pro/uslugi/it-infrastruktura/it-autsorsing/ айтишник 24 IT аутсорсинг.
Купить асбестоцементные трубы асбоцементные трубы купить gkpartner.com.

Внимание!


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

 

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

База Rarrugas (1, 2)

База Balas

База YellowRaven

База Yurons

База Lesnik757

База Shandor

База Sirrichar

База Anatolean

База Аrmagedec

База SorokinRed

База Deadelf79

База Fadk

 

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

 

База Tairesh

База Ivnglkv

База Kolyag87

База Andyk101

База Garik456456

База Harpokrat

База SalexIzyh

База Duwaz

 

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

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