CODEWITHSUNDEEP
extjs4extjs-mvcextjs4.1
Razairo Aluguera
Razairo Aluguera

Reputation: 63

Window not displaying panel within it

I have a Window, and i want to add a panel to it. My code is as follows; I see the window but not the panel. Why is my code not showing the panel ?

then i would like to color each panel. It too doesn't work.

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

Upvotes: 1

Views: 291

Answers (1)

Izhaki
Izhaki

Reputation: 23586

panel1 will not be in scope when you define WelcomeWindow. A config property would normally need either an Ext.create reference or (much better) a component configuration object. So you have two options:

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

Or the better one:

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

Also, it is unclear from the code you have provided when the window is actually being created, so the setting of colors might fail as the window wasn't created just yet.

Upvotes: 2

Related Questions