PDA

View Full Version : Recommended architecture for Desktop application in Ext JS 4



sarosh
16 Jan 2014, 5:00 AM
Hi,

I am developing desktop application in Ext JS 4. The problem i am encountering is that i want to create multiple window's of the same type.
At the moment, when i try to open different window's in desktop enviornment everything seems to work.
But i want to know if its an architectural constraint while opening the same windows multiple times as more than one window will be sharing the same id.

Also if i am doing the wrong thing kindly suggest what is the best way to handle such kind of requirement.
I am also posting the sample code for creating a window. The code at the moment supports only one type of window.



Ext.define('mtc.usermanagement.controller.userManagement', { extend: 'Ext.ux.desktop.Module', requires: [ 'Ext.data.ArrayStore', 'Ext.util.Format', 'Ext.grid.Panel', 'Ext.grid.RowNumberer', 'mtc.usermanagement.view.list',
], id: 'user_manager_window_id', appType: 'mtc.usermanagement.controller.userManagement', init: function () { }, createWindow: function () { var desktop = this.desktop; var win = desktop.getWindow('user_manager_window_id'); if (!win) { win = desktop.createWindow({ id: 'user_manager_window_id', title: 'User manager', width: '80%', height: '80%', x: this.desktop.rand('x'), y: this.desktop.rand('y'), iconCls: 'notepad', animCollapse: false, constrainHeader: true, layout: 'fit', items: [ Ext.create('mtc.usermanagement.view.list') ] }); } return win; }});

scottmartin
16 Jan 2014, 5:15 AM
You should not assign hard id's to your components. You will have collisions on re-use. It is better to use itemId and componentQuery instead.

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.ComponentQuery-method-query

sarosh
16 Jan 2014, 5:50 AM
Hi Scott,Many thanks for your reply.What about using Ext.getCmp for the different components that needs to used inside different window's?How can i use it with componentQuery.Just some direction on where i can look for examples will be perfect.Once again, thanks for understanding the problem and providing with a great feedback.

scottmartin
16 Jan 2014, 5:58 AM
Ext.getCmp() is used to get components by id, but is only recommended to use for quick debugging. It should not be used in production (nor id's )

Here is a quick example of gaining access using query:



Ext.application({
name : 'Fiddle',

launch : function() {

Ext.create('Ext.panel.Panel', {
itemId: 'main-panel',
title: 'Hello',
width: 200,
html: '<p>World!</p>',
items: [{
xtype: 'panel',
itemId: 'inside-panel',
html: 'Inside Panel'
}],
renderTo: Ext.getBody()
});

Ext.create('Ext.panel.Panel', {
itemId: 'other-panel',
title: 'Hello',
width: 200,
html: '<p>Other</p>',
renderTo: Ext.getBody()
});

var panel1 = Ext.ComponentQuery.query('#main-panel')[0];
console.log(panel1);

var panel2 = Ext.ComponentQuery.query('panel[itemId=main-panel]')[0];
console.log(panel2);

var ipanel1 = panel1.query('#inside-panel')[0];
console.log(ipanel1);

var ipanel2 = panel2.down('#inside-panel');
console.log(ipanel2);

var oPanel = Ext.ComponentQuery.query('#other-panel')[0];
console.log(oPanel);


}
});

sarosh
16 Jan 2014, 6:00 AM
Thank you Scott,It solves the confusion :)Really grateful for your help.Best RegardsSarosh