Создать базовый горизонтальный список в Сенче - PullRequest
Новая
       6

Создать базовый горизонтальный список в Сенче

0 голосов
/ 19 сентября 2011

Я довольно плохо знаком с Sencha touch, и мне трудно создавать горизонтальный список.Я могу успешно создать свой список по вертикали, передавая некоторые встроенные данные, но не могу понять, как представить мои данные по горизонтали.Я пытался искать по форумам и до сих пор не могу решить.Может кто-нибудь, пожалуйста, помогите мне решить эту простую, но очень расстраивающую проблему для меня.

Мои шаги на данный момент:

1 Создать модель данных 

    Ext.regModel('Alphabet', {
     fields: ['Letter']
     });

2 // Создать хранилище данных 

App.ListStore = new Ext.data.Store({
        model: 'Alphabet',
        data: [
            {Letter: 'A'},
            {Letter: 'b'},
            {Letter: 'c'},
            {Letter: 'd'},
            {Letter: 'e'},
            ]
    });

3 Создать список 

    App.ListPanel = new Ext.List ({
    store: App.ListStore,
    itemTpl: '<div class = "Alphabet">{Letter}</div>'
    });

4 // Привязать список к панели 

    App.ListContainer = new Ext.Panel({
    layout:{
        type: 'hbox',
        pack: 'center',
        align: 'center'
        },
    items: [App.ListPanel]
    });

5 // Прикрепить панель к корневой панели

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 26 сентября 2011

Решением моей проблемы было добавление элементов на новую панель с использованием макета hbox.

Я не думаю, что EXT.LIST был разработан, чтобы справиться с моей проблемой.

0 голосов
/ 19 сентября 2011

Добавьте это к App.ListContainer

scroll: {direction: 'horizontal',useIndicators: false}

Обновление :

Попробуйте прикрепить это к корневой панели 

App.ListPanel = new Ext.Toolbar ({
      defaults:{ ui: 'plain'},
          items: [
                {text: 'ItemList_A'},
                {text: 'ItemList_b'},
                {text: 'ItemList_c'},
                {text: 'ItemList_d'},
                {text: 'ItemList_e'},
                {text: 'ItemList_A'},
                {text: 'ItemList_b'},
        ],
      dock: 'bottom',
      scroll: {
          direction: 'horizontal',
          useIndicators: false
      },
      layout: {
        pack: 'center'
      }
      });
...