PDA

View Full Version : Problems with windows in desktop application



BrunoROT
9 Dec 2011, 7:28 AM
I'm working on a big application based on the Web Desktop.
I've created several windows. Mostly every window has its own controller.
Every Window has a Toolbar with buttons.
When I open a window the buttons work correctly. When I open a second window in this window the buttons work also correctly.
But when I change to the first opened window the buttons don't work. I have to close the window and open it again. But then the buttons in the other window don't work.
I've tried to create a controller for all windows. But it's the same. The buttons work only in the last opened window.

Is there something I can do? What did I wrong?

Thanks a lot

Bruno

arthurakay
9 Dec 2011, 10:34 AM
You're going to have to post some code for anyone to help.

If I had to blindly guess, it sounds like a duplicate ID problem. But that's just a blind guess.

BrunoROT
11 Dec 2011, 10:08 PM
Every button has its own unique ID. Each button get the following values:

id: <Unique ID> like "viewProjectsBtnAdd" or "viewCompaniesBtnEdit"
text
tooltip
action: here I have no unique strings but I tried it and there no change
iconCls

Maybe I forgotten something.

arthurakay
12 Dec 2011, 8:26 AM
You're going to have to post some code for anyone to help.

Without seeing your code, there is no possible way for me or anyone else to help you.

BrunoROT
12 Dec 2011, 9:34 AM
Ok,
here is the code for creating the windows.
I'll create the windows from data from a database.

The view has no special code. All views look like:



Ext.define('Portal.view.admin.Companies', {
extend: 'Portal.view.ListWindow',
alias: 'widget.viewCompanies',
store: 'Portal.store.Companies',
controller: 'Portal.controller.admin.Companies',
initComponent: function(){
this.callParent();
}
});


Then in my Controller "Desktop" I create the windows with:



cfg = Ext.create(result.data.windowType,{ //result.data.windowType is from the database an contain 'Portal.view.admin.Comanies'
windowId: windowId,
items: [{
id: windowId+'-grid',
xtype: 'grid',store: result.data.Store, // from database
border: false,
region: 'center',
layout: 'fit',
height: '100%',
columns:[allCols] // the columns are also from the database (not everyone has the right to see all columns, different order of columns...)
}]
});


After that I set some configs for the window:



cfg.id = windowId;
cfg.setIconCls(result.data.Icon);

cfg.setPosition(Number(result.data.x),Number(result.data.y), false);

cfg.setSize(Number(result.data.width),Number(result.data.height));
cfg.title = strings['Title'];


An then I create the buttons (with data from database):



var tlb = Ext.create('Ext.toolbar.Toolbar',{
id:windowId+"Toolbar"
});

for(A=0;A<buttons.count;A++){
if (buttons.data[A].ButtonName=='-'){
tlb.add('-');
}
else if (buttons.data[A].ButtonName=='x'){
tlb.add({xtype:'tbfill'});
}
else {
tlb.add({
id: windowId+buttons.data[A].ButtonName,
text: strings[buttons.data[A].ButtonName],
tooltip: strings[buttons.data[A].ButtonName+'-Tooltip'],
action:buttons.data[A].ButtonName,
disabled:buttons.data[A].Disabled,
iconCls:buttons.data[A].Icon
});
}
}

cfg.addDocked(tlb);


In the controllers:



init: function() {
this.control({
'viewCompanies':{
activate: this.loadData
},

'viewCompanies button[action=BTNAdd]': {
click: this.addItem
},

'viewCompanies button[action=BTNEdit]': {
click: this.editItem
},

'viewCompanies button[action=BTNDelete]': {
click: this.deleteItem
},

'viewCompanies grid':{
itemdblclick: this.edititem
}
})
},


In every window the buttons working. But only in the last opened window.
When I open a new window I have to close the others.

Thank you

Bruno

arthurakay
12 Dec 2011, 10:07 AM
Please take the time to put CODE or PHP tags around your code so that it's easier to read. I've done that in your post for you this time.

...

Looking at the code you posted, I immediately notice two things:
(1) You have and "id" on almost every component you create. Duplicate IDs are very possible.
(2) It's very possible you have a "scope" issue

Why do you have hard-coded IDs on your components? My first instinct is that you can rip all of them out, because they're not doing anything (as far as I can tell). That could potentially solve any duplicate-ID problems.

As for scope, the problem you initially described sounds like it could be the result of improper scoping (the "this" keyword). I don't have much to offer you for a solution, but set a bunch of break points in your code and see if "this" is the object it's supposed to be.

It's obvious that your code is rather involved, so if you continue to struggle it might be more appropriate for you to open a support ticket and have one of our engineers step through the app with you.

Kangulo
3 Jan 2013, 7:59 PM
Hi Arthurakay..


I have de same problem.

I am playing with a web desktop example in extjs 4.1.0, everything was fine. So i decide to begin a new development using a webtop interface. When i started to add modules, I did duplicating an existent module and change his id with a form that contains controls with the same name that the first here was when start the troubles. The controls with the same name disappear in one window, it depend of what windows id click first.

I tried using namespaces at the begining of the js file that contain module and no work.

Also in the sencha example of desktop I duplicated de module "notepad.js" to "notepad2.js" and all his content obviously, with the same bad result .
NotePad2.js


/*!
* Ext JS Library 4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/

Ext.define('MyDesktop.Notepad2', {
extend: 'Ext.ux.desktop.Module',

requires: [
'Ext.form.field.HtmlEditor'
//'Ext.form.field.TextArea'
],

id:'notepad2',

init : function(){
this.launcher = {
text: 'Notepad2',
iconCls:'notepad'
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('notepad2');
if(!win){
win = desktop.createWindow({
id: 'notepad2',
title:'Notepad',
width:600,
height:400,
iconCls: 'notepad',
animCollapse:false,
border: false,
//defaultFocus: 'notepad-editor', EXTJSIV-1300

// IE has a bug where it will keep the iframe's background visible when the window
// is set to visibility:hidden. Hiding the window via position offsets instead gets
// around this bug.
hideMode: 'offsets',

layout: 'fit',
items: [
{
xtype: 'htmleditor',
//xtype: 'textarea',
id: 'notepad-editor', // here is the problem, is the same id
value: [
'Some <b>rich</b> <font color="red">text</font> goes <u>here</u><br>',
'Give it a try!'
].join('')
}
]
});
}
return win;
}
});


App.js

Ext.define('MyDesktop.App', {
extend: 'Ext.ux.desktop.App',

requires: [
'Ext.window.MessageBox',

'Ext.ux.desktop.ShortcutModel',

'MyDesktop.SystemStatus',
'MyDesktop.VideoWindow',
'MyDesktop.GridWindow',
'MyDesktop.TabWindow',
'MyDesktop.AccordionWindow',
'MyDesktop.Notepad',
'MyDesktop.Notepad2',
'MyDesktop.BogusMenuModule',
'MyDesktop.BogusModule',

// 'MyDesktop.Blockalanche',
'MyDesktop.Settings'
],

init: function() {
// custom logic before getXYZ methods get called...

this.callParent();

// now ready...
},

getModules : function(){
return [
new MyDesktop.VideoWindow(),
//new MyDesktop.Blockalanche(),
new MyDesktop.SystemStatus(),
new MyDesktop.GridWindow(),
new MyDesktop.TabWindow(),
new MyDesktop.AccordionWindow(),
new MyDesktop.Notepad(),
new MyDesktop.Notepad2(),
new MyDesktop.BogusMenuModule(),
new MyDesktop.BogusModule()
];
},

getDesktopConfig: function () {
var me = this, ret = me.callParent();

return Ext.apply(ret, {
//cls: 'ux-desktop-black',

contextMenuItems: [
{ text: 'Change Settings', handler: me.onSettings, scope: me }
],

shortcuts: Ext.create('Ext.data.Store', {
model: 'Ext.ux.desktop.ShortcutModel',
data: [
{ name: 'Grid Window', iconCls: 'grid-shortcut', module: 'grid-win' },
{ name: 'Accordion Window', iconCls: 'accordion-shortcut', module: 'acc-win' },
{ name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },
{ name: 'Notepad2', iconCls: 'notepad-shortcut', module: 'notepad2' },
{ name: 'System Status', iconCls: 'cpu-shortcut', module: 'systemstatus'}
]
}),

wallpaper: 'wallpapers/Blue-Sencha.jpg',
wallpaperStretch: false
});
},

// config for the start menu
getStartConfig : function() {
var me = this, ret = me.callParent();

return Ext.apply(ret, {
title: 'Don Griffin',
iconCls: 'user',
height: 300,
toolConfig: {
width: 100,
items: [
{
text:'Settings',
iconCls:'settings',
handler: me.onSettings,
scope: me
},
'-',
{
text:'Logout',
iconCls:'logout',
handler: me.onLogout,
scope: me
}
]
}
});
},

getTaskbarConfig: function () {
var ret = this.callParent();

return Ext.apply(ret, {
quickStart: [
{ name: 'Accordion Window', iconCls: 'accordion', module: 'acc-win' },
{ name: 'Grid Window', iconCls: 'icon-grid', module: 'grid-win' }
],
trayItems: [
{ xtype: 'trayclock', flex: 1 }
]
});
},

onLogout: function () {
Ext.Msg.confirm('Logout', 'Are you sure you want to logout?');
},

onSettings: function () {
var dlg = new MyDesktop.Settings({
desktop: this.desktop
});
dlg.show();
}
});


here is the error:

Ext.Error: Registering duplicate id "notepad-editor-toolbar" with this manager

Ok, i know the problem is duplicate id, but my question is: There is no way to do that, because each module must be a diferente and it must be a namespace itself.? Or the solution is change all my controls id for each module that application have? and if Scope is the solution i must confese that i dont undestand it very well.


Thanks in advance &
Regards