PDA

View Full Version : open window in ExtJs desktop on application start up



jimswers
12 Dec 2011, 5:12 AM
Hi,

I wondering how to open any window on application startup?
may be correct my code somewhere or just say how?


init: function() {
// custom logic before getXYZ methods get called...
this.callParent();
// now ready...
//something here i should open?
// something like that?
// new MyDesktop.SystemStatus();
},

tobiu
12 Dec 2011, 5:30 AM
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.app.Controller-method-onLaunch

i recommend to read the guides (part 1-3):
http://docs.sencha.com/ext-js/4-0/#!/guide/mvc_pt1

jimswers
12 Dec 2011, 6:10 AM
I'm expect something like that.
But I try it before it doesn't work for me at all.
Just ignored


onLaunch: function() {
console.log('on start up');
},


I'm speaking about default http://docs.sencha.com/ext-js/4-0/#!/example/desktop/desktop.html application
and i want on launch see some window opened on startup, for example: MyDesktop.SystemStatus

tobiu
12 Dec 2011, 6:19 AM
i was assuming you are doing it the MVC way. of course, my suggested method is only working for controllers.

i looked into the code of Ext.ux.desktop.App and the class fires the event "ready" you can listen to.

jimswers
12 Dec 2011, 6:58 AM
Actually I also tried this before..



var dsk;
Ext.onReady(function () {
dsk = new MyDesktop.App();
dsk.onReady(function(){
notepad = new MyDesktop.Notepad();
})
});


this code does not give error, but Notepad does not appear after.
may be you have some good example how to do this simple thing?

jimswers
17 Dec 2011, 4:36 AM
this is answered.

jhust call in onReady
MyDesktop.getModule('win-grid').createWindow();

koko2589
17 Dec 2011, 5:16 AM
MyDesktop.on('ready', function(app) {
app.modules[0].createWindow();
}, this);

Unkind
12 Feb 2013, 1:47 AM
in what method or file i must write this? for automatic startup one of the applications

koko2589
6 Mar 2013, 1:43 AM
//////sample.js/////

app.modules[0]
or
app.modules[1]
or
app.modules[2]

3 , 4 , 5 what you want to Launch for automatic startup


/*
* Ext JS Library 3.0 RC2
* Copyright(c) 2006-2009, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/




// Sample desktop configuration
MyDesktop = new Ext.app.App({
init :function(){
Ext.QuickTips.init();
},


getModules : function(){
return [
new MyDesktop.GridWindow(),
new MyDesktop.TabWindow(),
new MyDesktop.AccordionWindow(),
new MyDesktop.BogusMenuModule(),
new MyDesktop.BogusModule()
];
},


// config for the start menu
getStartConfig : function(){
return {
title: 'Jack Slocum',
iconCls: 'user',
toolItems: [{
text:'Settings',
iconCls:'settings',
scope:this
},'-',{
text:'Logout',
iconCls:'logout',
scope:this
}]
};
}
});


MyDesktop.on('ready', function(app) {
app.modules[0].createWindow();
}, this);


/*
* Example windows
*/
MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
id:'grid-win',
init : function(){
this.launcher = {
text: 'Grid Window',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
}
},


createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if(!win){
win = desktop.createWindow({
id: 'grid-win',
title:'Grid Window',
width:740,
height:480,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,


layout: 'fit',
items:
new Ext.grid.GridPanel({
border:false,
ds: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'}
]),
data: Ext.grid.dummyData
}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Company", width: 120, sortable: true,


dataIndex: 'company'},
{header: "Price", width: 70, sortable: true, renderer:


Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 70, sortable: true, dataIndex:


'change'},
{header: "% Change", width: 70, sortable: true,


dataIndex: 'pctChange'}
]),


viewConfig: {
forceFit:true
},
//autoExpandColumn:'company',


tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}]
})
});
}
win.show();
}
});






MyDesktop.TabWindow = Ext.extend(Ext.app.Module, {
id:'tab-win',
init : function(){
this.launcher = {
text: 'Tab Window',
iconCls:'tabs',
handler : this.createWindow,
scope: this
}
},


createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('tab-win');
if(!win){
win = desktop.createWindow({
id: 'tab-win',
title:'Tab Window',
width:740,
height:480,
iconCls: 'tabs',
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,


layout: 'fit',
items:
new Ext.TabPanel({
activeTab:0,


items: [{
title: 'Tab Text 1',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 2',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 3',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 4',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
}]
})
});
}
win.show();
}
});






MyDesktop.AccordionWindow = Ext.extend(Ext.app.Module, {
id:'acc-win',
init : function(){
this.launcher = {
text: 'Accordion Window',
iconCls:'accordion',
handler : this.createWindow,
scope: this
}
},


createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('acc-win');
if(!win){
win = desktop.createWindow({
id: 'acc-win',
title: 'Accordion Window',
width:250,
height:400,
iconCls: 'accordion',
shim:false,
animCollapse:false,
constrainHeader:true,


tbar:[{
tooltip:{title:'Rich Tooltips', text:'Let your users know what


they can do!'},
iconCls:'connect'
},'-',{
tooltip:'Add a new user',
iconCls:'user-add'
},' ',{
tooltip:'Remove the selected user',
iconCls:'user-delete'
}],


layout:'accordion',
border:false,
layoutConfig: {
animate:false
},


items: [
new Ext.tree.TreePanel({
id:'im-tree',
title: 'Online Users',
loader: new Ext.tree.TreeLoader(),
rootVisible:false,
lines:false,
autoScroll:true,
tools:[{
id:'refresh',
on:{
click: function(){
var tree = Ext.getCmp('im-tree');
tree.body.mask('Loading', 'x-mask-loading');
tree.root.reload();
tree.root.collapse(true, false);
setTimeout(function(){ // mimic a server call
tree.body.unmask();
tree.root.expand(true, true);
}, 1000);
}
}
}],
root: new Ext.tree.AsyncTreeNode({
text:'Online',
children:[{
text:'Friends',
expanded:true,
children:[{
text:'Jack',
iconCls:'user',
leaf:true
},{
text:'Brian',
iconCls:'user',
leaf:true
},{
text:'Jon',
iconCls:'user',
leaf:true
},{
text:'Tim',
iconCls:'user',
leaf:true
},{
text:'Nige',
iconCls:'user',
leaf:true
},{
text:'Fred',
iconCls:'user',
leaf:true
},{
text:'Bob',
iconCls:'user',
leaf:true
}]
},{
text:'Family',
expanded:true,
children:[{
text:'Kelly',
iconCls:'user-girl',
leaf:true
},{
text:'Sara',
iconCls:'user-girl',
leaf:true
},{
text:'Zack',
iconCls:'user-kid',
leaf:true
},{
text:'John',
iconCls:'user-kid',
leaf:true
}]
}]
})
}), {
title: 'Settings',
html:'<p>Something useful would be in here.</p>',
autoScroll:true
},{
title: 'Even More Stuff',
html : '<p>Something useful would be in here.</p>'
},{
title: 'My Stuff',
html : '<p>Something useful would be in here.</p>'
}
]
});
}
win.show();
}
});


// for example purposes
var windowIndex = 0;


MyDesktop.BogusModule = Ext.extend(Ext.app.Module, {
init : function(){
this.launcher = {
text: 'Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId:windowIndex
}
},


createWindow : function(src){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('bogus'+src.windowId);
if(!win){
win = desktop.createWindow({
id: 'bogus'+src.windowId,
title:src.text,
width:640,
height:480,
html : '<p>Something useful would be in here.</p>',
iconCls: 'bogus',
shim:false,
animCollapse:false,
constrainHeader:true
});
}
win.show();
}
});




MyDesktop.BogusMenuModule = Ext.extend(MyDesktop.BogusModule, {
init : function(){
this.launcher = {
text: 'Bogus Submenu',
iconCls: 'bogus',
handler: function() {
return false;
},
menu: {
items:[{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
}]
}
}
}
});




// Array data for the grid
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];