煎茶觸摸列表

Question

我在煎茶觸摸新。我遇到了一些奇怪的行爲。不久我想用下面的工具欄和列表製作一個窗口。

主發射碼：

Ext.Loader.setConfig({ 
    enabled: true 
}); 

Ext.application({ 
    name: 'xxx', 

    controllers: ['Main'], 
    views: ['Home', 'Header', 'Footer', 'list.MainMenu'], 
    stores: ['MainMenu'], 
    models: ['MenuItem'], 


    launch: function() { 
     Ext.create('xxx.view.Viewport'); 
    } 
}); 

口的視圖：

Ext.define('xxx.view.Viewport', { 
    extend: 'Ext.Panel', 

    config: { 
     fullscreen: true, 

     items: [ 
      { 
       xtype: 'headerpanel', 
      },{ 
       xtype: 'MainMenu' 
      } 
     ] 
    } 
}); 

部首視圖：

Ext.define('xxx.view.Header', { 
    extend: Ext.Panel, 
    xtype: 'headerpanel', 

    config: {    
     items: [ 
      { 
       xtype: 'titlebar', 
       docked: 'top', 
       title: '<img src="lib/resources/images/x.png" />', 

       items: [ 
        { 
         text: 'One', 
         align: 'left' 
        },{ 
         text: 'Two', 
         align: 'right' 
        } 
       ] 
      } 
     ] 
    } 
}); 

Meniu觀點：

Ext.define('xxx.view.list.MainMenu', { 
    extend: 'Ext.List', 
    xtype: 'MainMenu', 

    requires: ['xxx.store.MainMenu'], 

    config: { 
     itemTpl: '{title}', 
     store: 'MainMenu'  
    } 
}); 

菜單店：

Ext.define('xxx.store.MainMenu', { 
    extend: 'Ext.data.Store', 

    config: { 
     model: 'xxx.model.MenuItem', 
     data: [ 
      {icon: 'a', title: 'A'}, 
      {icon: 'b', title: 'B'}, 
     ] 
    } 
}); 

菜單模式：

Ext.define('xxx.model.MenuItem', { 
    extend: 'Ext.data.Model', 

    config: { 
     fields: ['icon', 'title'] 
    } 
}); 

的這段代碼的結果是只是工具欄沒有任何名單 。

我設置佈局「適應」值的結果是相反的：只列出我可以看到。

Answer 1

你忘了設置佈局視口視圖。沒有佈局，容器不知道如何顯示內部項目。

嘗試以下操作：

Ext.define('xxx.view.Viewport', { 
    extend: 'Ext.Panel', 

    config: { 
     fullscreen: true, 
     layout:'fit', 
     items: [ 
      { 
       xtype: 'titlebar', 
       docked: 'top', 
       title: '<img src="lib/resources/images/x.png" />', 

       items: [{ 
        text: 'One', 
        align: 'left' 
       },{ 
        text: 'Two', 
        align: 'right' 
       }] 
      },{ 
       xtype: 'list', 
       itemTpl: '{title}', 
       store: 'MainMenu' 
      } 
     ] 
    } 
}); 

你可以找到更多關於佈局here