Sencha Touch List在与其他元素的面板中“支撑”

我有一个Panel，我希望在其中有一些其他元素和列表。当我在它自己的父面板中列表时，该列表正常工作。但是，当我向父面板添加另一项时，列表现在不会向下滚动（不再受限于屏幕大小）。Sencha Touch List在与其他元素的面板中“支撑”

这是我想我的布局是：

 Viewport 
|--------------------| 
| Revenue Panel | 
|--------------------| 
|  EventList  | 
|     | 
|--------------------|

虽然列表似乎越来越呈现屏幕外的所有在它的存储器中的数据。

这是我有我的看法：

DashboardIndex.js

shopifymobile.views.DashboardIndex = Ext.extend(Ext.Panel, { 
    dockedItems: [ 
     { 
      xtype: 'toolbar', 
      title: 'SHOP NAME', 
      dock: 'top', 
      defaults: { 
       iconMask: true, 
       ui: 'plain' 
      }, 
      items: [ 
       {xtype: 'spacer'}, 
       { 
        iconCls: 'refresh', 
        listeners: { 
         'tap' : function(){ 
          shopifymobile.stores.onlineEventStore.load(); 
         } 
        } 
       } 
      ] 
     } 
    ], 
    layout: 'fit', 
    fullscreen: true, 
});

Revenue.js

shopifymobile.views.RevenuePanel = Ext.extend(Ext.Panel, { 
    styleHtmlContent: true, 
    flex: 1, 
    items: [ 
     { 
      tpl: [ 
      '<div class="revenuepanel">', 
       '<div id="revenuedata">', 
        '<h3 class="label">TODAY\'S REVENUE</h3>', 
        '<p>{revenue}</p>', 
       '</div>', 
       '<div id="orderdata">', 
        '<div id="orders">', 
         '<p><span class="label">ORDERS</span>{count}</p>', 
        '</div>', 
        '<div id="items">', 
         '<p><span class="label">ITEMS</span>{items}</p>', 
        '</div>', 
       '</div>', 
      '</div>' 
      ], 
     } 
    ], 
    updateWithRecord: function(record){ 
     Ext.each(this.items.items, function(item){ 
      item.update(record.data); 
     }); 
    }, 
    //*************HACK FIXME*********************** 
    fetchStoreData: function(){ 
     var store = shopifymobile.stores.onlineProductStore; 
     this.updateWithRecord(store.getAt(0)); 
     store.removeListener('load', this.fetchStoreData); 
    }, 
    initComponent: function(){ 
     shopifymobile.stores.onlineProductStore.addListener('load', this.fetchStoreData, this); 
     shopifymobile.stores.onlineProductStore.load(); 
     shopifymobile.views.RevenuePanel.superclass.initComponent.apply(this, arguments); 
    } 
});

EventList.js

shopifymobile.views.EventList = Ext.extend(Ext.Panel, { 
    layout: 'fit', 
    items: [ 
     { 
      id: 'eventList', 
      xtype: 'list', 
      store: shopifymobile.stores.onlineEventStore, 
      itemTpl: [ 
       '<div class="eventitem">', 
        '<div id="eventdata">', 
         '<ul>', 
          '<li>New {verb}</li>', 
          '<li>{message}</li>', 
         '<ul>', 
        '</div>', 
        '<div id="eventtime">', 
         '<p>{created_at}</p>', 
        '</div>', 
       '</div>' 
      ] 
     }, 
    ], 
    initComponent: function(){ 
     shopifymobile.views.OrderList.superclass.initComponent.apply(this, arguments); 
    } 
});

当我初始化我的视口我添加了一个新的R evenuePanel和EVENTLIST到dashboardIndex对象：

shopifymobile.views.dashboardIndex.add(new shopifymobile.views.RevenuePanel()); 
    shopifymobile.views.dashboardIndex.add(new shopifymobile.views.EventList());

我能得到名单的唯一方式有点工作是，如果我将它设置为全屏，但因为我有我的屏幕底部的工具栏上的最后一项是被它重叠。

来源

2011-03-21 csaunders

我这样做的方式是在列表中嵌入列表，并且该列表应包含layout：fit。我还必须在包含面板中指定宽度：100％，但根据具体情况可能有所不同。这就是我所做的 - 请注意，我也使用DataVIew而不是Panel作为列表库，但它应该以任何方式工作。

 var panel = new Ext.Panel({ 
     flex: 1, 
     frame:true, 
     autoHeight: true, 
     collapsible: true, 
     width: '100%', 
     layout: 'fit', 
     items: [ 
      new Ext.DataView({.....}) ] });

来源

2011-03-27 20:07:36

Sencha Touch List在与其他元素的面板中“支撑”

回答

相关问题