.. / 4. Пара слов об устройстве компонент ExtJS

  1. ExtJS-4

Тут наверное надо немного разобраться в иерархии компонент ExtJS

Базовый класс для всех компонентов ExtJS - Component. От Component унаследованы сами окна, все элементы управления, контейнеры, в которые могут быть собраны другие компоненты.

Если в предыдущем примере в качестве содержимого использовался обычный html, ниже будет рассмотрено встраивание в окно наборов компонент

            win = Ext.create('widget.window', {
                title: 'Пример 4.1',
                …………………………………………………..
                …………………………………………………..
                /* Массив items содержащий компоненты или их конфигурации */
                items: [item1,item2,item3…]
            });
         } win.show()

items - массив, который задает набор компонент встроенных в контейнер - окно. Каждый компонент из этого набора в свою очередь может состоять из набора других компонентов - панелей, таблиц, форм, стандартных и нестандартных контролов. элементы массива - объекты. Они могут быть заданы в виде ссылки на ранее созданный компонент, а могут быть в виде литеральной записи (нотации).
В последнем случае при инициализации контейнера ExtJS самостоятельно создаст необходимые компоненты. Такой способ инициализации называется отложенным или ленивым (lazy). А дитеральная запись называется конфигурацией.

1.

Самый простой компонент - обычная панель.

<script>
function a() {
  var win;
  if (!win) {
      win = Ext.create('widget.window', {
          title: 'Пример1',
          width: 600,
          height: 350,
          /* Массив items содержащий  содержимое окна */
          items: [
                      {   xtype: 'panel',
                          title: 'Заголовок панели 1',
                          html:'Текст 1 текст 1 текст 1'
                      },
                      {   xtype: 'panel',
                          title: 'Заголовок панели 2',
                          html:'Текст 1 текст  1 текст 1'
                      },
                  ]
      });
   } win.show()
}
</script>

xtype служит указанием на то, какой именно компонент нужно проинициализировать. В данном случае значение xtype соответствует панели. Скопирую из мануала имена (xtype) некоторых стандартных компонент, назначение которых мне кажется очевидным из названия:

xtype Class


button Ext.button.Button
buttongroup Ext.container.ButtonGroup
colorpalette Ext.picker.Color
component Ext.Component
container Ext.container.Container
datepicker Ext.picker.Date
editor Ext.Editor
grid Ext.grid.Panel
panel Ext.panel.Panel
progress Ext.ProgressBar
slider Ext.slider.Single
tabpanel Ext.tab.Panel
treepanel Ext.tree.Panel
window Ext.window.Window

В больших приложениях (а ExtJS только для них) если какой-либо встроенный компонент используется многократно, предпочтительнее создать для него свой класс со своим собственным xtype, и уже дальше пользоваться им. Какие-то мелкие отличия в свойствах и методах можно задавать непосредственно в конфигурации вместе с xtype. Подробнее об xtype можно почитать здесь Tutorial:Xtype defined Позже я обязательно вернусь к этой теме. А пока в примерах повсюду используются только встроенные компоненты.

2.

Выше было сказано, что элементами массива items могут состоять как из конфигурации компонентов, так и сами компоненты, созданные ранее:

<script>
// Создание панели для примера 2.
function b() {
    // создание панели
    var ex2 = new Ext.Panel({
                    id: 'win1',
                    height: 50,
                    width: '100%',
                    title: 'Insert',
                    html: 'text   text   text'});
// встраивание в панель окна var win2 = Ext.create('widget.window', { title: 'Пример 2', width: 350, height: 350, autoScroll: true, items: [ex2] }); } </script>

В этом примере в массив items передается ссылка на объект - панель ex. Но точно таким же способом можно передать и ссылку на массив конфигураций. Первый пример можно переписать так:

var ex1= [
          {   title: 'Заголовок панели 1',
              html:'Текст 1 текст 1 текст 1'
          },
          {   title: 'Заголовок панели 2',
              html:'Текст 1 текст  1 текст 1'
          }]
var win2 = Ext.create('widget.window', {
        title: 'Пример 2',
        width:  350,
        height: 350,
        autoScroll: true,
        items: ex1
});

Далее

  1. Лэйоуты. Как все красиво разместить внутри окна
  2. Инструментальные панели. Часть 1. Кнопки
  3. Инструментальные панели. Часть 2. Меню
  4. Панель с закладками
  1. 2011-11-12
  2. ExtJS-4
  1. www.sencha.com/learn/legacy/Tutorial:Xtype_defined - Ленивая инициализация в ExtJS. Документация www.sencha.com
Go Index Test