rushi2440
13 Feb 2012, 2:49 AM
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
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