how to add viewport to window in extjs 4 MVC desktop

[rushi2440]

hi... forum member I am having one problem in adding my viewport to my already existing window to make it comes like popup window

My application having a desktop window in which, when I click the desktop icon the window popup and show me the view containing the viewport.

I tried but it gives me error. My desktop view comes perfectly like the below image snap.

Now when the user click the last desktop icon a window should popup and contain the viewport in it.
my code for the window to popup is give below

Ext.define('gantt.view.projectmgt.projectmgtWindow', {
alias: 'widget.projectmgtmain',
requires: ['Ext.container.Viewport','gantt.view.projectmgt.projectmgtViewport'],
id: 'projectmgtmain',
width: '100%',
height: '100%',
closeAction: 'hide',

init: function() {
this.launcher = {
text: 'Project Management Window',
iconCls: 'project-mini-icon',
handler: this.createWindow,
scope: this
};
},

createWindow: function() {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('projectmgtwindow');
if(!win) {
win = desktop.createWindow({
id: 'projectmgtwindow',
title: 'Project Management Window',
width: '99.5%',
height: '95%',
iconCls: 'project-mini-icon',
closeAction: 'hide',
items: [{
xtype: 'projectmgtviewport'
}]
});
}
win.show();
}
});


and the code for the projectmgtviewport is below mentioned

Ext.define('gantt.view.projectmgt.projectmgtViewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.projectmgtviewport',
itemId: 'projectViewport',
layout: {
type: 'border'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'panel',
title: 'Project List',
flex: 3,
region: 'center',
items: [
{
xtype: 'gridpanel',
title: 'My Grid Panel',
forceFit: true,
store: 'CarStore',
viewConfig: {


},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'manufacturer',
text: 'Manufacturer'
},
{
xtype: 'gridcolumn',
dataIndex: 'model',
text: 'Model'
},
{
xtype: 'gridcolumn',
dataIndex: 'price',
text: 'Price'
},
{
xtype: 'gridcolumn',
dataIndex: 'wiki',
text: 'Wiki'
},
{
xtype: 'gridcolumn',
dataIndex: 'img',
text: 'Img'
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'splitbutton',
text: 'Export PDF'
},
{
xtype: 'tbseparator'
},
{
xtype: 'splitbutton',
text: 'Export Excel'
},
{
xtype: 'tbseparator'
},
{
xtype: 'tbspacer'
},
{
xtype: 'splitbutton',
text: 'Refresh'
},
{
xtype: 'tbseparator'
},
{
xtype: 'splitbutton',
text: 'Search'
},
{
xtype: 'textfield',
fieldLabel: ''
}
]
},
{
xtype: 'pagingtoolbar',
autoRender: true,
autoScroll: true,
displayInfo: true,
store: 'CarStore',
dock: 'bottom'
}
]
},
{
xtype: 'panel',
frame: true,
collapseFirst: false,
collapsed: false,
collapsible: true,
title: 'New Project',
flex: 1,
region: 'east',
items: [
{
xtype: 'textfield',
padding: '5 0 0 0',
width: 300,
fieldLabel: 'Project Title'
},
{
xtype: 'textfield',
width: 300,
fieldLabel: 'Project Name'
},
{
xtype: 'datefield',
width: 300,
fieldLabel: 'Start Date'
},
{
xtype: 'datefield',
width: 300,
fieldLabel: 'End Date'
},
{
xtype: 'htmleditor',
height: 450,
style: 'background-color: white;',
width: 300,
fieldLabel: 'Label',
hideLabel: true
},
{
xtype: 'button',
frame: true,
height: 35,
width: 57,
text: 'Save'
},
{
xtype: 'button',
height: 35,
width: 57,
menuAlign: 'tr-br?',
text: 'Cancel'
}
]
},
{
xtype: 'toolbar',
height: 150,
flex: 0.16,
region: 'south',
items: [
{
xtype: 'splitbutton',
text: 'Main Desktop'
},
{
xtype: 'tbseparator'
},
{
xtype: 'splitbutton',
text: 'Office Management',
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
}
]
}
},
{
xtype: 'tbseparator'
},
{
xtype: 'splitbutton',
text: 'Event Management',
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
}
]
}
},
{
xtype: 'tbseparator'
},
{
xtype: 'splitbutton',
text: 'Accessories',
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
}
]
}
},
{
xtype: 'tbseparator'
},
{
xtype: 'splitbutton',
text: 'Help'
}
]
}
]
});


me.callParent(arguments);
}
});


but don't know what's the problem neither the window popup nor it contains my viewport.
Also when I removed the xtype: 'projectmgtviewport' and add the html:'hello' the window popup comes perfectly.

I just want my window to have the viewport in it when the window popup. Suggest me some solution which help me to solve my problem I am facing.

Yogendra SinghSr. Programmer
Kintudesigns.com

[mitchellsimoens]

Ext.container.Viewport is meant to take up 100% of the browser's height and width so it should not be used inside another component. For that you should just use Container or Panel. You can have the Container take up 100% of the Window's height and width by using layout : 'fit' on the Window. YOu will need to make sure you give the Window a width and height.

[rushi2440]

hi. mitchellsimoens

thanks for your reply. I used the panel with layout: 'border', so my problem is solved. But I am having another problem. I had posted my question to the forum you can view it by going to below link http://www.sencha.com/forum/showthread.php?180953-item-is-undefined
(http://www.sencha.com/forum/showthread.php?180953-item-is-undefined)

Yogendra Singh
Sr. Programmer
Kintudesigns.com