开发者

Create basic horizontal list in Sencha

开发者 https://www.devze.com 2023-04-05 23:14 出处:网络
I am fairly new to Sencha touch and finding it difficult to create a horizontal list. I can successfully create my list vertically passing in some inline data but cannot seem to figure out the way to

I am fairly new to Sencha touch and finding it difficult to create a horizontal list. I can successfully create my list vertically passing in some inline data but cannot seem to figure out the way to present my data horizontally. I have tried searching through the forums and still cannot seem to resolve. Can someone please help me resolve this simple yet very frustrating issue for me.

My Steps so far:

1 Create a data model

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

2 // Create Data Store

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

3 Create List

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

4 // Bind list to panel

    App.ListContainer = new Ext.Panel({
    layout:{
        type: 开发者_如何学C'hbox',
        pack: 'center',
        align: 'center'
        },
    items: [App.ListPanel]
    });

5 // Dock panel to root panel

Thanks in Advance


Add this to App.ListContainer

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

Update:

Try docking this to the root panel

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'
      }
      });


The solution to my problem was to add the items to a new panel using a hbox layout.

I don't think EXT.LIST was designed to be able to handle my issue.

0

精彩评论

暂无评论...
验证码 换一张
取 消