Extjs4 窗口不显示其中的面板

Extjs4 窗口不显示其中的面板,extjs4,extjs-mvc,extjs4.1,Extjs4,Extjs Mvc,Extjs4.1,我有一个窗口,我想在其中添加一个面板。我的代码如下;我看到了窗户,但没有看到面板。为什么我的代码不显示面板 然后我想给每个面板上色。它也不起作用 Ext.define('Sports.view.WelcomeWindow', { extend: 'Ext.window.Window', alias : 'widget.welcomewin', layout:'fit', defaults: { bodyStyle: 'padding:10px' }

我有一个窗口,我想在其中添加一个面板。我的代码如下;我看到了窗户,但没有看到面板。为什么我的代码不显示面板

然后我想给每个面板上色。它也不起作用

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});
}
Ext.define('Sports.view.WelcomeWindow'{
扩展:“Ext.window.window”,
别名:“widget.welcomewin”,
布局:'适合',
默认值:{
车身风格:“衬垫:10px”
},
项目:[第1小组]
});
//column.show();
var panel1=Ext.create('Ext.panel.panel'{
标题:“小组1”,
html:'正文1',
id:'panel1Id',
列宽:.25,//表示25%
身高:120
});
var resultQuery=Ext.ComponentQuery.query('panel');
变量颜色=['#ACFA8A'、'#F4FA8A'、'#FAB38A'、'#8AE9FA'、'#CA8AFA'];
对于(var i=0;i
当您定义
WelcomeWindow
时,panel1
将不在范围内。配置属性通常需要
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
    }
});

此外,从您提供的代码中还不清楚实际创建窗口的时间,因此颜色设置可能会失败,因为窗口尚未创建。

有人知道如何解决此问题吗?你能帮我吗?当用户点击屏幕上的按钮时,我会打开这个窗口。