Как сделать dataview.list видимым в Sencha Touch 2? - PullRequest
Новая
       16

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

2 голосов
/ 13 марта 2012

Новичок Сенча 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, я думаю).

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

Ответы [ 2 ]

4 голосов
/ 13 марта 2012

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

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

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

Проблема заключалась в том, что вы не включили 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/#qXaQm

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

1 голос
/ 14 марта 2012

Компонент 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'
      }
    ]
  }
})
...