タイトルなしで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],    
    }); 

} 

}）。

atributteタイトルを削除すると、リストがまったく表示されません。

ご協力いただければ幸いです！

Answer 1

問題は、リストビューではありませんが、問題は、私はタブパネルラッパーを削除する場合は、リストビューの高さに応じてレイアウトを調整することができませんでしたタブパネルであるが、その後の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%', 
     }); 
    } 
});​​​​​​​ 

作品あなたは、私は、正確な問題を見つけることを試みることのためにオプションではありませんが、それはそれを除去することが可能であるならば、あなたは上の名前を表示するには、タブパネル必要性の中に、このコードにtitleプロパティを

Answer 2

アイテムを使用することができますタブ。あなたは、Webインスペクタコンソールで見る場合は、エラーメッセージが表示されます。また

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

は、あなたがrenderToプロパティを使用しないでください。その代わり、Ext.Viewportに追加するか、trueに設定fullscreen設定し、次のいずれか

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