無法將列表渲染到沒有標題的div，Sencha-Touch 2.0

Question

我無法渲染沒有列表標題的列表。

我浪費了很多時間，但找不到解決方案。

實施例：http://jsfiddle.net/q8H48/

和代碼這裏：

Ext.application({ 
name: 'myApp', 
launch: function() { 


    var listdata = Ext.create('Ext.data.Store', { 
     fields : ['title'], 
     data : [ {title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'}, {title: 'Charly'} ] 
    }); 


    var test1 = Ext.create('Ext.List', { 
     //!!!title: 'Test1', 
     itemTpl: '{title}', 
     store: listdata 
    }); 


    Ext.create('Ext.tab.Panel', { 
     renderTo: 'el', 
     height : '100%', 
     items  : [test1],    
    }); 

} 

}）;

如果我刪除分類標題，那麼列表根本不會呈現。

任何幫助將不勝感激！

Answer 1

的問題不是在ListView但問題是的TabPanel這是不能夠根據ListView控件的高度，以調整佈局，如果我刪除的TabPanel包裝然後ListView中正常工作

Ext.application({ 
    name: 'myApp', 
    launch: function() { 

     var listdata = Ext.create('Ext.data.Store', { 
      fields : ['title'], 
      data : [ {title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'}, {title: 'Bravo'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'}, {title: 'Bravo'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'}, {title: 'Charly'} ] 
     }); 

     var test2 = Ext.create('Ext.List', { 
      // title: 'Test2', 
      itemTpl: '{title}', 
      store: listdata, 
      renderTo: 'el2', 
      height : '100%', 
     }); 
    } 
});​​​​​​​ 

如果刪除的TabPanel是不適合你的話，我可以嘗試找出確切的問題的一個選擇，但如果它是可以移除，那麼你可以使用此代碼

Answer 2

項目一的TabPanel 需要內一個title屬性上顯示的名稱該標籤。如果您在Web檢查控制檯看，你會看到錯誤消息：

Error: [ERROR][Ext.Container#onFirstItemAdd] Adding a card to a tab container without specifying any tab configuration. 

而且，你不應該使用renderTo財產。相反，無論是將它添加到Ext.Viewport或設置fullscreen配置爲true：

Ext.Viewport.add({ 
    xtype: 'tabpanel', 
    ... 
}); 

或者fullscreen：

Ext.create('Ext.tab.Panel', { 
    fullscreen: true, 
    ... 
}); 

你也不需要height: 100%線，作爲組件容器的佈局將處理項目大小。

這裏是做你想要什麼的正確方法：

Ext.application({ 
    name: 'Sencha', 
    launch: function() { 
     Ext.Viewport.add({ 
      xtype: 'tabpanel', 
      items: [ 
       { 
        title: 'test', 
        xtype: 'list', 
        itemTpl: '{title}', 
        store: { 
         fields : ['title'], 
         data : [ 
          {title: 'Alpha'}, 
          {title: 'Bravo'}, 
          {title: 'Alpha'}, 
          {title: 'Bravo'}, 
          {title: 'Alpha'}, 
          {title: 'Alpha'}, 
          {title: 'Alpha'}, 
          {title: 'Alpha'}, 
          {title: 'Alpha'}, 
          {title: 'Alpha'} 
         ] 
        } 
       } 
      ] 
     }); 
    } 
});