Sencha Touch將身高拉伸到100％

我有一個用於父容器的vbox佈局，並且有3個項目，一個包含靜態數據和兩個其他列表。我想我的名單的高度擴大到他們內容的大小的100％，我有一個這樣的例子here。Sencha Touch將身高拉伸到100％

正如您所看到的，當您有數據並準備好提供服務時，此功能非常有用，但在我的情況下，我需要爲回調中的兩個列表提取數據，併爲每個存儲設置相應的存儲名單。問題是如果我沒有指定高度，則列表將被摺疊並且不會顯示列表數據。我嘗試過'適合'並刷新（）回調中的視圖，但似乎沒有任何工作。有任何想法嗎？

這是我在控制器方法來填充專賣店：

function buildOrgView (record, view) { 
    var managerUid = record.get('managerUid'); 
    var uid = record.get('uid'); 
    //Get data for org view 
    if (managerUid) { 
     var managerStore = new People.store.EmployeeDetails();//Ext.data.StoreManager.lookup('mgrDetailsStore'); 
     managerStore.getProxy().setUrl(People.app.userDetailsUrl + managerUid); 
     managerStore.load({ 
      callback: function (records) { 
       var peerStore = new People.store.OrgMembers(); 
       peerStore.getProxy().setUrl(People.app.orgMembersUrl + managerUid); 
       peerStore.load({ 
        callback: function (recs) { 
         Ext.each(recs, function(item, idx, allItems) { 
          if (item.get('fullName') == record.get('fullName')) { 
           peerStore.remove(item); 
          } 
         }); 
         view.getPeersList().setStore(peerStore); 

         var drStore = new People.store.OrgMembers(); 
         drStore.getProxy().setUrl(People.app.orgMembersUrl + uid); 
         drStore.load({ 
          callback: function (recs) { 
           view.getDirectReportsList().setStore(drStore); 
          } 
         }); 
        } 
       }); 
      } 
     }); 
    } 
}

這是List組件我想填充：

Ext.define('People.view.people.OrgList', { 
    extend: 'Ext.List', 
    xtype: 'orgList', 
    config: { 
     cls: 'peopleInfo', 
     store: 'OrgMembers', 
//  scrollable: true, 
//  height: 300, 
     itemTpl: [ 
      "<div class='listView small'>", 
      " <tpl if='workforceID != undefined'>", 
      "  <tpl if='workforceID == \"phind\"'>", 
      "   <div class='avatar notFound user'></div>", 
      "  <tpl else>", 
      "   <div class='avatar'></div>", 
      "  </tpl>", 
      " </tpl>", 
      " <ul class='data'>", 
      "  <li><h3>{fullName}</h3></li>", 
      " </ul>", 
      "</div>" 
     ], 
     listeners: [ 
      { 
       fn: 'onPersonTap', 
       event: 'itemtap' 
      } 
     ] 
    }, 
    onPersonTap: function (dataview, newValue, oldValue, eOpts) { 
     debugger; 
     this.fireEvent('persontap', this, newValue, oldValue, eOpts); 
    } 
});

來源

2013-02-07 occasl

我發現解決這個問題的最好方法是按照我在config中定義的每個元素的高度將列表中元素的數量倍增，然後添加標題的高度（在我的例子中爲27px）。這會產生所需的效果，雖然這有點不合適（適合的佈局應該真的起作用）。

view.getPeersList().setHeight(recs.length*50 + 27);

我能夠修復煎茶觸摸2.1.1使用這兩個參數的項目的高度：

itemHeight: 50, 
variableHeights: false,

來源

2013-02-10 04:26:22 occasl

您可以設置後的名單最低高度設置店這樣的：

list.setMinHeight(Ext.Viewport.getWindowHeight()/2);

，或者你可以在initialize功能做到這一點列表視圖。

來源

2013-02-07 12:43:47 ThinkFloyd

這看起來很有希望，因爲我現在看到實際的容器增長，但商店不再使用數據填充它。我使用了初始化選項。有任何想法嗎？ – occasl

使用DOM insoector並確認數據是否未填充或包含數據的列表是否已摺疊並且只有容器沒有列出高度。 – ThinkFloyd

是的，我看了看，但沒有記錄在列表中。我不確定爲什麼添加高度會使記錄出現，但確實如此;沒有它，我沒有記錄。 – occasl

Sencha Touch將身高拉伸到100％

回答

相關問題