窗口內不顯示面板

Question

我有一個窗口，我想添加一個面板。我的代碼如下;我看到窗戶，但看不到面板。爲什麼我的代碼不顯示面板？

然後我想爲每個面板着色。它也行不通。

Ext.define('Sports.view.WelcomeWindow', { 
    extend: 'Ext.window.Window', 
    alias : 'widget.welcomewin', 
    layout:'fit', 
    defaults: { 
    bodyStyle: 'padding:10px' 
    }, 
    items: [panel1] 
    }); 
//column.show(); 
var panel1 = Ext.create('Ext.panel.Panel', { 
    title: 'Panel 1', 
    html: 'Body 1', 
    id: 'panel1Id', 
    columnWidth: .25, //means 25% 
    height: 120 
    }); 

var resultQuery = Ext.ComponentQuery.query('panel'); 
var colors = ['#ACFA8A','#F4FA8A','#FAB38A','#8AE9FA','#CA8AFA']; 
for (var i = 0; i < resultQuery.length; i++) { 
resultQuery[i].body.highlight(colors[i], {duration: 10000}); 
} 

Answer 1

panel1不會在範圍上，當你定義WelcomeWindow。配置屬性通常需要Ext.create引用或（更好）組件配置對象。所以，你有兩個選擇：

Ext.define('Sports.view.WelcomeWindow', { 
    extend: 'Ext.window.Window', 
    alias : 'widget.welcomewin', 
    layout:'fit', 
    defaults: { 
     bodyStyle: 'padding:10px' 
    }, 
    items: [ 
     Ext.create('Ext.panel.Panel', { 
      title: 'Panel 1', 
      html: 'Body 1', 
      id: 'panel1Id', 
      columnWidth: .25, //means 25% 
      height: 120 
     }) 
    ] 
}); 

還是最好的一個：

Ext.define('Sports.view.WelcomeWindow', { 
    extend: 'Ext.window.Window', 
    alias : 'widget.welcomewin', 
    layout:'fit', 
    defaults: { 
     bodyStyle: 'padding:10px' 
    }, 
    items: { 
      xtype: 'panel', 
      title: 'Panel 1', 
      html: 'Body 1', 
      id: 'panel1Id', 
      columnWidth: .25, //means 25% 
      height: 120 
    } 
}); 

而且，從你實際上正在創建窗口時提供的代碼不清楚，所以顏色的設置可能由於該窗口尚未創建，因此失敗。