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在與其他元素的面板中「支撐」

回答

相關問題