Desktop .. page items reloading trouble

[amegahed]

I have a few questions regarding the Desktop apps:
1. I followed the example in the dist. to make two forms that read from MySQL tables and fill in a grid. I tried to divide the code so i could read it better so i created my grid as follows:


var seriesGP = new Ext.grid.GridPanel({
border:false,
region: 'center',
store: store,
columns: [
sm,
{id:'seriesid',header: "ID", width: 30, sortable: true, hidden: true, dataIndex: 'seriesid'},
{header: 'Name', width: 470, sortable: true, dataIndex: 'seriesname'}
],
sm: sm,
stripeRows: true,
bbar: pagingBar
});


and in the page constructor i declared it as follows:


MyDesktop.MySeriesWindow = Ext.extend(Ext.app.Module, {
id:'myseries-win',
init : function(){
this.launcher = {
text: 'My Series',
iconCls:'icon-movie',
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
var desktop = this.app.getDesktop();
var winS = desktop.getWindow('myseries-win');
if(!winS){
winS = desktop.createWindow({
id: 'myseries-win',
title:'My Series',
width:740,
height:480,
iconCls: 'icon-movie',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'border',
items: [ seriesGP, seriesP]
});
}
winS.show();
}
});


the code loads with no problem the first time i open the page, but if i close it, and then open it again, the page opens up blank, both the grid (and the panel) are not displayed, but if put the code like this:


MyDesktop.MySeriesWindow = Ext.extend(Ext.app.Module, {
.....
items: [
new Ext.grid.GridPanel({
border:false,
region: 'center',
store: store,
columns: [
sm,
{id:'seriesid',header: "ID", width: 30, sortable: true, hidden: true, dataIndex: 'seriesid'},
{header: 'Name', width: 470, sortable: true, dataIndex: 'seriesname'}
],
sm: sm,
stripeRows: true,
bbar: pagingBar
}),
//seriesGP,
seriesP]


then the grid will load every time i open the page (but the panel [seriesP] does not).

Im not very good with Java, so, i would appreciate it if anyone's help should take that into account.

[amegahed]

ok, this is what i found until now:


MyDesktop.MyMoviesWindow = Ext.extend(Ext.app.Module, {
id:'mymovies-win',
init : function(){
this.launcher = {
text: 'My Movies',
iconCls:'icon-movie',
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('mymovies-win');
if(!win){
win = desktop.createWindow({
id: 'mymovies-win',
title:'My Movies',
width:740,
height:480,
iconCls: 'icon-movie',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'border',
items: [movieGP, movieP],
closeAction: 'hide'
});
}
win.show();
}
});


but this in the desktop environment only minimizes the window and does not hide it ?!

[amegahed]

ok ... found alot of useful things (on my third day of using ExtJS) but still have not found a solution for this.

I know the datastore is being loaded (i could see it in Firebug) but the itms on the window are not rendered .. can anyone even hint to where to look

thank you

[amegahed]

still trying to figure out this here ?! pointers anyone ?

[cristianomaddog]

Have you found a solution to this?


ok, this is what i found until now:


MyDesktop.MyMoviesWindow = Ext.extend(Ext.app.Module, {
id:'mymovies-win',
init : function(){
this.launcher = {
text: 'My Movies',
iconCls:'icon-movie',
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('mymovies-win');
if(!win){
win = desktop.createWindow({
id: 'mymovies-win',
title:'My Movies',
width:740,
height:480,
iconCls: 'icon-movie',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'border',
items: [movieGP, movieP],
closeAction: 'hide'
});
}
win.show();
}
});
but this in the desktop environment only minimizes the window and does not hide it ?!

I managed to avoid this by not setting the window's closeAction: 'hide' and creating a new type of window inside the desktop.js.


this.createHidableWindow = function(config, cls){
var win = new (cls||Ext.Window)(
Ext.applyIf(config||{}, {
manager: windows,
minimizable: true,
maximizable: true
})
);
win.render(desktopEl);

win.cmenu = new Ext.menu.Menu({
items: [

]
});

win.on({
'activate': {
fn: markActive
},
'beforeshow': {
fn: function(win){
win.taskButton = taskbar.addTaskButton(win);
win.animateTarget = win.taskButton.el;
markActive(win);
}
},
'deactivate': {
fn: markInactive
},
'minimize': {
fn: minimizeWin
},
'close': {
fn: removeWin
},
'beforeClose': {
fn: function(win){
win.hide();
removeWin(win);
return false;
}
}
});

layout();
return win;
}

When the close method of createHidableWindow is called, it hide's the window and removes it from the task bar. When you call the show method, it is added back to the taskbar.

I hope it could help.

[cristianomaddog]

This is the updated code. I have found a bug when the window was minimized and then maximazed back. It woul create a new taskbar icon.


this.createHidableWindow = function(config, cls){
var win = new (cls||Ext.Window)(
Ext.applyIf(config||{}, {
manager: windows,
minimizable: true,
maximizable: true
})
);
win.render(desktopEl);

win.hasTaskBarBtn = false;

win.cmenu = new Ext.menu.Menu({
items: [

]
});

win.on({
'activate': {
fn: markActive
},
'beforeshow': {
fn: function(win){
if(!win.hasTaskBarBtn){
win.taskButton = taskbar.addTaskButton(win);
win.animateTarget = win.taskButton.el;
win.hasTaskBarBtn = true;
}
markActive(win);
}
},
'deactivate': {
fn: markInactive
},
'minimize': {
fn: minimizeWin
},
'close': {
fn: removeWin
},
'beforeClose': {
fn: function(win){
win.hide();
if(win.hasTaskBarBtn){
removeWin(win);
win.hasTaskBarBtn = false;
}
return false;
}
}
});

layout();
return win;
}

[amegahed]

Thanks cristianomaddog for taking the time and posting your finding here, I have seen your original post, but unfortunatly i already have changed my interface to the normal web-style, but i have put into account that my code would be easily changed agian back into the desktop-style later on.

I have not yet tried your solution out, but definitly it sure ecourages one to rethink using the desktop interface again.