Как сделать dataview.list видимым в Sencha Touch 2?

Question

Сенча Touch новичок здесь. Тем не менее, я медленно обдумывал это в последний день или около того. Одна вещь, которая сводила меня с ума, это formpanels и списки, не появляющиеся по некоторой странной причине расположения. Я не могу понять, почему. Например, у меня есть следующий вид поиска:

Ext.define('NC.view.Search', {
  extend: 'Ext.dataview.List',
  xtype: 'searchpage',
  id: 'search-form',

  config: {
    title: 'Search',
    layout:  'vbox',
    itemTpl: '<div class="name">{name}</div>',
    store: 'Recipes',

    items: [
      {
        xtype: 'toolbar',
        docked: 'top',

        items: [
          { xtype: 'spacer' },
          {
            xtype: 'searchfield',
            placeHolder: 'Search...'
          },
          { xtype: 'spacer' }
        ]
      }
    ]
  }
})

Это находится в панели вкладок:

Ext.define('NC.view.Recipes', {
  extend: 'Ext.tab.Panel',
  xtype: 'recipetabpanel',

  config: {
    title: 'Recipes',
    tabBarPosition: 'bottom',
    activeItem: 0,

    items: [
      {
        title: 'Recipes',
        iconCls: 'bookmarks',
        items: [
          {
            xtype: 'searchpage'
          }
        ]
      },
      {
        title: 'Settings',
        iconCls: 'settings',
        html: 'Settings screen'
      }
    ]
  }
})

Это приводит к прекрасной визуализированной панели вкладок с закрепленной панелью поиска вверху, но никаких элементов списка не видно. Если я добавлю к моей панели списка некоторые размеры:

width: '100%',
height: '200px',

Появятся элементы списка из моего хранилища данных. Но я не могу установить высоту до 100%, потому что она исчезнет (ошибка CSS, я думаю).

Так какая иерархия или спецификации макета мне нужны, чтобы список появился и занимал область между панелью поиска и вкладками внизу? Спасибо!

Answer 1

Списки и Dataviews используют макет по умолчанию, поэтому вам не нужно указывать свой собственный vbox раскладка. Если вы удалите эту конфигурацию из списка, она должна просто работать.

Редактировать:

Хорошо, я внимательно посмотрел на ваше приложение. Вы можете просмотреть его здесь: http://www.senchafiddle.com/ (пресс- запуск).

Проблема заключалась в том, что вы не включали layout: fit в элементе рецептов на панели вкладок (Recipes.js, строка 15).

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

Но основная проблема с элементом, который вы добавляете, является чрезмерной. Давайте посмотрим на ваш код:

{
    title: 'Recipes',
    iconCls: 'bookmarks',
    layout: 'fit',
    items: [
        {
            xtype: 'searchpage'
        }
    ]
}

То, что происходит здесь, это создание нового Ext.Container (с title, iconCls и т.д.), а затем в этом контейнере добавление searchpage компонент, который вы создаете. Теперь внешний контейнер здесь (с title) автоматически растянется до размера своего контейнера (панели вкладок), поскольку панель вкладок имеет layout: 'card' конфигурация по умолчанию. Проблема в том, что вы добавляете в него еще один компонент (ваш searchpage) и потому что контейнер, который вы добавили (тот, с title) не имеет макета (только его контейнер, панель вкладок), а затем список (searchpage) не знает растянуть до размера предмета.

Это называется чрезмерным, потому что вы можете просто вставить searchpage компонент в качестве дочернего элемента табульной панели и дать ему title а также iconCls, Что вы должны делать это:

{
    title: 'Recipes',
    iconCls: 'bookmarks',
    xtype: 'searchpage'
}

Как видите, я просто перемещаю xtype в блок конфигурации, и мы можем удалить всю конфигурацию элементов, потому что добавляемый элемент является фактическим searchpage,

А вот ссылка на код, но исправленная: http://www.senchafiddle.com/

Надеюсь, это имеет смысл. Макеты могут быть трудны для восприятия с Sencha Touch. Я бы также посоветовал вам прочитать руководство по макету (если вы этого еще не сделали) в документации Sencha Touch 2, так как оно может быть очень полезным.

Answer 2

Компонент Ext List не нуждается в макете. Кроме того, компонент списка не является контейнером - это просто представление данных, которое не может иметь собственных дочерних элементов. Таким образом, вы не можете добавлять предметы туда.

Так,

1. Удалить макет
2. Удалить предметы
3. Добавьте панель инструментов на панель, где вы добавляете этот список.
4. Добавить макет: "подгонка" к панели выше

Список:

Ext.define('NC.view.Search', {
  extend: 'Ext.dataview.List',
  xtype: 'searchpage',
  id: 'search-form',
  config: {
    title: 'Search',
    layout:  'vbox',
    itemTpl: '<div class="name">{name}</div>',
    store: 'Recipes'
  }
});

TabPanel:

Ext.define('NC.view.Recipes', {
  extend: 'Ext.tab.Panel',
  xtype: 'recipetabpanel',

  config: {
    title: 'Recipes',
    tabBarPosition: 'bottom',
    activeItem: 0,    
    items: [{
        title: 'Recipes',
        iconCls: 'bookmarks',
        layout : 'fit',
        items: [{
            xtype: 'toolbar',
            docked: 'top',
            items: [{ xtype: 'spacer' }, {
                xtype: 'searchfield',
                placeHolder: 'Search...'
      },
      { xtype: 'spacer' }
    ]
  },
          {
            xtype: 'searchpage'
          }
        ]
      },
      {
        title: 'Settings',
        iconCls: 'settings',
        html: 'Settings screen'
      }
    ]
  }
})