PDA

View Full Version : Right-Side of Start Menu on Desktop Sample



Envision123
19 Aug 2011, 9:33 AM
You can see the website here with all the code to make it easier for you to diagnose what is happening:


http://www.zazavi.com/desktop/desktop.html

When you go to the start menu and select anything on the right side of the menu, it just opens up the Settings to change the wallpaper. I am wanting it to open up its selected window as defined in my classes.js file. I'm not sure if it is just that I have been sitting and staring at the code and am overlooking something or what is happening.

You can see my classes file here as well:


http://www.zazavi.com/desktop/classes.js

If someone can show me how to fix it for one of them, I can of course go through and fix them all.

Any help will be greatly appreciated. Thank you for your time!

skirtle
21 Aug 2011, 10:18 PM
Though it's always nice to be able to view a demo, it almost impossible for us to help you when the code is minified. I've tried my best to fight with a deminified version of the code but without the ability to read the code properly or add breakpoints it's almost impossible to be sure if anything I've 'discovered' is actually true at all.

With that in mind, I don't guarantee that anything I've said below is actually true, it's the best I could do with the code provided.

The items on the right-hand side of the menu all get added here:


{text:"System Configuration",iconCls:"settings",handler:b.onSettings,scope:b},
{text:"Email Templates",iconCls:"settings",handler:b.onSettings,scope:b},
{text:"Newsletter",iconCls:"settings",handler:b.onSettings,scope:b},
{text:"Languages",iconCls:"settings",handler:b.onSettings,scope:b},
...

Makes sense that they will launch the settings window. Obviously you'll need to change all of those handlers.

Looks to me like you've created all of your windows as modules. I think what you need to do is to add them all to the modules list but remove their launcher, so that they don't show up in the menu twice. In your handler for each menu item you should then be able to grab the module using getModule(id) and then reimplement the logic that's currently in the launcher.

christocracy
22 Aug 2011, 4:39 AM
Are you familiar with how Ext events work?

You might want to post the snippet of code here which controls your start menu.

This is very easy to fix.

Envision123
22 Aug 2011, 2:01 PM
This is actually the line that handles all of the start menu:


Ext.define("MyDesktop.App",
{extend:"Ext.ux.desktop.App",requires:["Ext.window.MessageBox","Ext.ux.desktop.ShortcutModel","MyDesktop.SystemStatus","MyDesktop.ForumWindow","MyDesktop.MarketWindow","MyDesktop.DashboardWindow","MyDesktop.ExtrasWindow","MyDesktop.BogusModule","MyDesktop.Settings"],
init:function(){this.callParent()},getModules:function()
{return[new MyDesktop.DashboardWindow(),new MyDesktop.MenusWindow(),new MyDesktop.PagesWindow(),new MyDesktop.PostsWindow(),new MyDesktop.ModulesWindow(),new MyDesktop.FormsWindow(),new MyDesktop.LayoutWindow(),new MyDesktop.UsersWindow(),new MyDesktop.MarketWindow(),new MyDesktop.ExtrasWindow(),new MyDesktop.ForumWindow()]},
getDesktopConfig:function(){var b=this,a=b.callParent();

return Ext.apply(a,{contextMenuItems:[{text:"Change Settings",handler:b.onSettings,scope:b}],shortcuts:Ext.create("Ext.data.Store",{model:"Ext.ux.desktop.ShortcutModel",

data:[{name:"Dashboard",iconCls:"cpu-shortcut",module:"dashboard"},
{name:"Zazavi Marketplace",iconCls:"grid-shortcut",module:"market"},
{name:"Free Extras",iconCls:"notepad-shortcut",module:"extras"},
{name:"Support Forum",iconCls:"accordion-shortcut",module:"forum"}]}),
wallpaper:"wallpapers/Blue-Sencha.jpg",wallpaperStretch:false})},
getStartConfig:function(){var b=this,a=b.callParent();

return Ext.apply(a,{title:"Welcome to the Zazavi Admin Panel !",iconCls:"user",height:350,toolConfig:{width:150,items:[

{text:"System Configuration",iconCls:"settings",handler:b.onSettings,scope:b},
{text:"Email Templates",iconCls:"settings",handler:b.onSettings,scope:b},
{text:"Newsletter",iconCls:"settings",handler:b.onSettings,scope:b},
{text:"Languages",iconCls:"settings",handler:b.onSettings,scope:b},
{text:"File Manager",iconCls:"settings",handler:b.onSettings,scope:b},
{text:"System Logs",iconCls:"settings",handler:b.onSettings,scope:b},
{text:"Database Backups",iconCls:"settings",handler:b.onSettings,scope:b},
{text:"Membership Setup",iconCls:"settings",handler:b.onSettings,scope:b},
{text:"Transactions",iconCls:"settings",handler:b.onSettings,scope:b},
{text:"Payment Gateways",iconCls:"settings",handler:b.onSettings,scope:b}]}})},

getTaskbarConfig:function(){var a=this.callParent();return Ext.apply(a,{quickStart:[],trayItems:[{xtype:"trayclock",flex:1}]})},
onLogout:function(){Ext.Msg.confirm("Logout","Are you sure you want to logout?")},
onSettings:function(){var a=new MyDesktop.Settings({desktop:this.desktop});a.show()}});
Ext.define("Ext.util.Point",{extend:"Ext.util.Region",statics:{fromEvent:function(a){a=(a.changedTouches&&a.changedTouches.length>0)?a.changedTouches[0]:a;return new this(a.pageX,a.pageY)}},constructor:function(a,b){this.callParent([b,a,b,a])},toString:function(){return"Point["+this.x+","+this.y+"]"},equals:function(a){return(this.x==a.x&&this.y==a.y)},isWithin:function(b,a){if(!Ext.isObject(a)){a={x:a,y:a}}return(this.x<=b.x+a.x&&this.x>=b.x-a.x&&this.y<=b.y+a.y&&this.y>=b.y-a.y)},roundedEquals:function(a){return(Math.round(this.x)==Math.round(a.x)&&Math.round(this.y)==Math.round(a.y))}},function(){this.prototype.translate=Ext.util.Region.prototype.translateBy});Ext.define("Ext.Layer",{uses:["Ext.Shadow"],statics:{shims:[]},extend:"Ext.core.Element",constructor:function(b,a){b=b||{};var c=this,d=Ext.core.DomHelper,f=b.parentEl,e=f?Ext.getDom(f):document.body,g=b.hideMode;if(a){c.dom=Ext.getDom(a)}if(!c.dom){c.dom=d.append(e,b.dh||{tag:"div",cls:Ext.baseCSSPrefix+"layer"})}else{c.addCls(Ext.baseCSSPrefix+"layer");if(!c.dom.parentNode){e.appendChild(c.dom)}}if(b.cls){c.addCls(b.cls)}c.constrain=b.constrain!==false;if(g){c.setVisibilityMode(Ext.core.Element[g.toUpperCase()]);if(c.visibilityMode==Ext.core.Element.ASCLASS){c.visibilityCls=b.visibilityCls}}else{if(b.useDisplay){c.setVisibilityMode(Ext.core.Element.DISPLAY)}else{c.setVisibilityMode(Ext.core.Element.VISIBILITY)}}if(b.id){c.id=c.dom.id=b.id}else{c.id=Ext.id(c.dom)}c.position("absolute");if(b.shadow){c.shadowOffset=b.shadowOffset||4;c.shadow=Ext.create("Ext.Shadow",{offset:c.shadowOffset,mode:b.shadow});c.disableShadow()}else{c.shadowOffset=0}c.useShim=b.shim!==false&&Ext.useShims;if(b.hidden===true){c.hide()}else{this.show()}},getZIndex:function(){return parseInt((this.getShim()||this).getStyle("z-index"),10)},getShim:function(){var b=this,c,a;if(!b.useShim){return null}if(!b.shim){c=b.self.shims.shift();if(!c){c=b.createShim();c.enableDisplayMode("block");c.hide()}a=b.dom.parentNode;if(c.dom.parentNode!=a){a.insertBefore(c.dom,b.dom)}b.shim=c}return b.shim},hideShim:function(){if(this.shim){this.shim.setDisplayed(false);this.self.shims.push(this.shim);delete this.shim}},disableShadow:function(){if(this.shadow){this.shadowDisabled=true;this.shadow.hide();this.lastShadowOffset=this.shadowOffset;this.shadowOffset=0}},enableShadow:function(a){if(this.shadow){this.shadowDisabled=false;this.shadowOffset=this.lastShadowOffset;delete this.lastShadowOffset;if(a){this.sync(true)}}},sync:function(b){var i=this,m=i.shadow,g,e,a;if(!this.updating&&this.isVisible()&&(m||this.useShim)){var d=this.getShim(),c=this.getLeft(true),n=this.getTop(true),k=this.getWidth(),f=this.getHeight(),j;if(m&&!this.shadowDisabled){if(b&&!m.isVisible()){m.show(this)}else{m.realign(c,n,k,f)}if(d){j=d.getStyle("z-index");if(j>i.zindex){i.shim.setStyle("z-index",i.zindex-2)}d.show();if(m.isVisible()){g=m.el.getXY();e=d.dom.style;a=m.el.getSize();e.left=(g[0])+"px";e.top=(g[1])+"px";e.width=(a.width)+"px";e.height=(a.height)+"px"}else{d.setSize(k,f);d.setLeftTop(c,n)}}}else{if(d){j=d.getStyle("z-index");if(j>i.zindex){i.shim.setStyle("z-index",i.zindex-2)}d.show();d.setSize(k,f);d.setLeftTop(c,n)}}}return this},remove:function(){this.hideUnders();this.callParent()},beginUpdate:function(){this.updating=true},endUpdate:function(){this.updating=false;this.sync(true)},hideUnders:function(){if(this.shadow){this.shadow.hide()}this.hideShim()},constrainXY:function(){if(this.constrain){var f=Ext.core.Element.getViewWidth(),b=Ext.core.Element.getViewHeight(),k=Ext.getDoc().getScroll(),j=this.getXY(),g=j[0],e=j[1],a=this.shadowOffset,i=this.dom.offsetWidth+a,c=this.dom.offsetHeight+a,d=false;if((g+i)>f+k.left){g=f-i-a;d=true}if((e+c)>b+k.top){e=b-c-a;d=true}if(g<k.left){g=k.left;d=true}if(e<k.top){e=k.top;d=true}if(d){Ext.Layer.superclass.setXY.call(this,[g,e]);this.sync()}}return this},getConstrainOffset:function(){return this.shadowOffset},setVisible:function(e,b,d,g,f){var c=this,a;a=function(){if(e){c.sync(true)}if(g){g()}};if(!e){this.hideUnders(true)}this.callParent([e,b,d,g,f]);if(!b){a()}return this},beforeFx:function(){this.beforeAction();return this.callParent(arguments)},afterFx:function(){this.callParent(arguments);this.sync(this.isVisible())},beforeAction:function(){if(!this.updating&&this.shadow){this.shadow.hide()}},setLeft:function(a){this.callParent(arguments);return this.sync()},setTop:function(a){this.callParent(arguments);return this.sync()},setLeftTop:function(b,a){this.callParent(arguments);return this.sync()},setXY:function(c,a,b,e,d){e=this.createCB(e);this.fixDisplay();this.beforeAction();this.callParent([c,a,b,e,d]);if(!a){e()}return this},createCB:function(c){var a=this,b=a.shadow&&a.shadow.isVisible();return function(){a.constrainXY();a.sync(b);if(c){c()}}},setX:function(a,b,c,e,d){this.setXY([a,this.getY()],b,c,e,d);return this},setY:function(e,a,b,d,c){this.setXY([this.getX(),e],a,b,d,c);return this},setSize:function(a,c,b,d,f,e){f=this.createCB(f);this.beforeAction();this.callParent([a,c,b,d,f,e]);if(!b){f()}return this},setWidth:function(a,b,c,e,d){e=this.createCB(e);this.beforeAction();this.callParent([a,b,c,e,d]);if(!b){e()}return this},setHeight:function(b,a,c,e,d){e=this.createCB(e);this.beforeAction();this.callParent([b,a,c,e,d]);if(!a){e()}return this},setBounds:function(b,h,d,a,c,e,g,f){g=this.createCB(g);this.beforeAction();if(!c){Ext.Layer.superclass.setXY.call(this,[b,h]);Ext.Layer.superclass.setSize.call(this,d,a);g()}else{this.callParent([b,h,d,a,c,e,g,f])}return this},setZIndex:function(a){this.zindex=a;if(this.getShim()){this.shim.setStyle("z-index",a++)}if(this.shadow){this.shadow.setZIndex(a++)}this.setStyle("z-index",a);return this}});

By default, Sencha has the code on the desktop very messy and just stretched across a few lines so it isn't formatted. But I tried formatting it a bit more to make it easier for you. I'm glad to hear that it should be an easy fix because it's driving me crazy and all I want is for it to open the modules instead of just settings :)

By the way, I am completely new to using ExtJS ;)

skirtle
22 Aug 2011, 2:43 PM
Shrinking the code like that so that it only spans a few lines is known as minification. Such code is said to be minified. This is a common practice in production systems as it shrinks the JS files down to be much smaller. This improves load-time performance.

A related process is obfuscation. The objective with obfuscation is to make the code hard to reverse engineer. Many people incorrectly use the term obfuscation to describe minification. The confusion results because JS minification involves renaming all of the variables to have short names, like a, b, c, etc. Though this has an obfuscating effect it isn't a deliberate attempt at obfuscation per se. Proper obfuscation is much more advanced than simply renaming a few variables.

Most of the ExtJS demos are presented with the ExtJS code minified but the example code left unminified. The reasoning behind this is that a demo you can't read is a bit useless and the overhead of such a small section of code being unminified is negligible.

For whatever reason the Ext Desktop demo is different - everything is minified. Perhaps this is because it is demonstrating so much example code, or perhaps it is trying to demonstrate how a big project could minify its code using JSB.

Whatever the reason, the fact remains that trying to debug your application in that form is going to be like pulling teeth. One of the biggest mental leaps that new ExtJS developers struggle to take is to get into the habit of looking at the ExtJS source code to figure things out.

The unminified version of all the source is provided in the ExtJS zip file that you've downloaded. If you take a look in the example/desktop directory you'll see all the code. There are also two HTML files: desktop.html and desktop-release.html. One of these is for the release version, the other shows one technique for creating a dev version (in this case using the loader... not my favourite way to do a dev version but it should work quite nicely in this case). I strongly suggest you switch to using a file based on desktop.html for your application until you get it into a state approaching completeness.

Using a dev build should also remove the need to run JSBuilder every time you want to test your changes. Once you get it setup correctly it's just a case of hitting F5 in the browser to reload the files.

Annoyingly, there's a bug in the current version of desktop.html. You'll need to add the following line just before the call to setPath():


Ext.Loader.setConfig('enabled', true);

Otherwise it'll complain that the loader isn't enabled and you'll just get a white screen.

Envision123
23 Aug 2011, 2:02 PM
I am not familiar at all with ExtJS but am trying to learn it as I go along. I have managed to fix everything I have come across except this one thing. I am guessing that there is one thing that I need to change for each of those so that that they will load from the start menu properly. If anyone has a chance, please post or send me what would need to be changed for one and I can replicate it on all the others.

Once again, thanks for your time and have a great day!

skirtle
23 Aug 2011, 10:11 PM
I have already given you an overview of the changes I believe you need to make. Please see the end of my original post. As you haven't commented on my suggestions I can only assume you haven't tried them.

I have also given you a long and detailed post explaining how to get your page into a suitable state for debugging. You will continue to find that people ignore your questions unless you act on my advice and provide a page where we can actually read the code. Beyond making the code readable it will also allow us to insert breakpoints, which are vital for fixing an issue like this where we cannot change the code ourselves.

I believe this is an easy problem to solve but you need to help us to help you.

Envision123
24 Aug 2011, 7:28 AM
Here's what I don't get, I have this listed:


{text:"System Configuration",iconCls:"settings",handler:b.onSettings,scope:b}

It seems like it should be as simple as changing it to this:


{text:"System Configuration",iconCls:"settings",handler:b.onSystemConWindow,scope:b}

However, when I change it to that it doesn't work.

I am guessing that the handler "b.onSettings" is define somewhere that I will also need to define "b.SystemConWindow" at but can't find it - since all I want to do is change it from loading one window to a different one.

I don't know ExtJS very well so that assumption is just based off what I have seen and done so far so I hope it makes sense :)

skirtle
24 Aug 2011, 7:43 AM
but can't find it

It's in the middle of the code you posted.


...
onSettings:function(){var a=new MyDesktop.Settings({...

b is just this, look up a couple of lines. In the original code b is called me.

I don't understand why you still stubbornly refuse to work with the unminified version of the code. You'd have had the answer days ago if you'd just sorted out a proper dev version.

Envision123
24 Aug 2011, 1:43 PM
Here is a copy of the code for the line handling the start menu:


Ext.define("MyDesktop.App", {
extend: "Ext.ux.desktop.App",
requires: ["Ext.window.MessageBox", "Ext.ux.desktop.ShortcutModel", "MyDesktop.SystemStatus", "MyDesktop.ForumWindow", "MyDesktop.MarketWindow", "MyDesktop.DashboardWindow", "MyDesktop.ExtrasWindow", "MyDesktop.BogusModule", "MyDesktop.Settings"],
init: function () {
this.callParent()
},
getModules: function () {
return [new MyDesktop.DashboardWindow(), new MyDesktop.MenusWindow(), new MyDesktop.PagesWindow(), new MyDesktop.PostsWindow(), new MyDesktop.ModulesWindow(), new MyDesktop.FormsWindow(), new MyDesktop.LayoutWindow(), new MyDesktop.UsersWindow(), new MyDesktop.MarketWindow(), new MyDesktop.ExtrasWindow(), new MyDesktop.ForumWindow()]
},
getDesktopConfig: function () {
var b = this,
a = b.callParent();
return Ext.apply(a, {
contextMenuItems: [{
text: "Change Settings",
handler: b.onSettings,
scope: b
}],
shortcuts: Ext.create("Ext.data.Store", {
model: "Ext.ux.desktop.ShortcutModel",
data: [{
name: "Dashboard",
iconCls: "cpu-shortcut",
module: "dashboard"
}, {
name: "Zazavi Marketplace",
iconCls: "grid-shortcut",
module: "market"
}, {
name: "Free Extras",
iconCls: "notepad-shortcut",
module: "extras"
}, {
name: "Support Forum",
iconCls: "accordion-shortcut",
module: "forum"
}]
}),
wallpaper: "wallpapers/Blue-Sencha.jpg",
wallpaperStretch: false
})
},
getStartConfig: function () {
var b = this,
a = b.callParent();
return Ext.apply(a, {
title: "Welcome to the Zazavi Admin Panel !",
iconCls: "user",
height: 350,
toolConfig: {
width: 150,
items: [{
text: "System Configuration",
iconCls: "settings",
handler: b.onSettings,
scope: b
}, {
text: "Email Templates",
iconCls: "settings",
handler: b.onSettings,
scope: b
}, {
text: "Newsletter",
iconCls: "settings",
handler: b.onSettings,
scope: b
}, {
text: "Languages",
iconCls: "settings",
handler: b.onSettings,
scope: b
}, {
text: "File Manager",
iconCls: "settings",
handler: b.onSettings,
scope: b
}, {
text: "System Logs",
iconCls: "settings",
handler: b.onSettings,
scope: b
}, {
text: "Database Backups",
iconCls: "settings",
handler: b.onSettings,
scope: b
}, {
text: "Membership Setup",
iconCls: "settings",
handler: b.onSettings,
scope: b
}, {
text: "Transactions",
iconCls: "settings",
handler: b.onSettings,
scope: b
}, {
text: "Payment Gateways",
iconCls: "settings",
handler: b.onSettings,
scope: b
}]
}
})
},
getTaskbarConfig: function () {
var a = this.callParent();
return Ext.apply(a, {
quickStart: [],
trayItems: [{
xtype: "trayclock",
flex: 1
}]
})
},
onLogout: function () {
Ext.Msg.confirm("Logout", "Are you sure you want to logout?")
},
onSettings: function () {
var a = new MyDesktop.Settings({
desktop: this.desktop
});
a.show()
}
});
Ext.define("Ext.util.Point", {
extend: "Ext.util.Region",
statics: {
fromEvent: function (a) {
a = (a.changedTouches && a.changedTouches.length > 0) ? a.changedTouches[0] : a;
return new this(a.pageX, a.pageY)
}
},
constructor: function (a, b) {
this.callParent([b, a, b, a])
},
toString: function () {
return "Point[" + this.x + "," + this.y + "]"
},
equals: function (a) {
return (this.x == a.x && this.y == a.y)
},
isWithin: function (b, a) {
if (!Ext.isObject(a)) {
a = {
x: a,
y: a
}
}
return (this.x <= b.x + a.x && this.x >= b.x - a.x && this.y <= b.y + a.y && this.y >= b.y - a.y)
},
roundedEquals: function (a) {
return (Math.round(this.x) == Math.round(a.x) && Math.round(this.y) == Math.round(a.y))
}
}, function () {
this.prototype.translate = Ext.util.Region.prototype.translateBy
});
Ext.define("Ext.Layer", {
uses: ["Ext.Shadow"],
statics: {
shims: []
},
extend: "Ext.core.Element",
constructor: function (b, a) {
b = b || {};
var c = this,
d = Ext.core.DomHelper,
f = b.parentEl,
e = f ? Ext.getDom(f) : document.body,
g = b.hideMode;
if (a) {
c.dom = Ext.getDom(a)
}
if (!c.dom) {
c.dom = d.append(e, b.dh || {
tag: "div",
cls: Ext.baseCSSPrefix + "layer"
})
} else {
c.addCls(Ext.baseCSSPrefix + "layer");
if (!c.dom.parentNode) {
e.appendChild(c.dom)
}
}
if (b.cls) {
c.addCls(b.cls)
}
c.constrain = b.constrain !== false;
if (g) {
c.setVisibilityMode(Ext.core.Element[g.toUpperCase()]);
if (c.visibilityMode == Ext.core.Element.ASCLASS) {
c.visibilityCls = b.visibilityCls
}
} else {
if (b.useDisplay) {
c.setVisibilityMode(Ext.core.Element.DISPLAY)
} else {
c.setVisibilityMode(Ext.core.Element.VISIBILITY)
}
}
if (b.id) {
c.id = c.dom.id = b.id
} else {
c.id = Ext.id(c.dom)
}
c.position("absolute");
if (b.shadow) {
c.shadowOffset = b.shadowOffset || 4;
c.shadow = Ext.create("Ext.Shadow", {
offset: c.shadowOffset,
mode: b.shadow
});
c.disableShadow()
} else {
c.shadowOffset = 0
}
c.useShim = b.shim !== false && Ext.useShims;
if (b.hidden === true) {
c.hide()
} else {
this.show()
}
},
getZIndex: function () {
return parseInt((this.getShim() || this).getStyle("z-index"), 10)
},
getShim: function () {
var b = this,
c, a;
if (!b.useShim) {
return null
}
if (!b.shim) {
c = b.self.shims.shift();
if (!c) {
c = b.createShim();
c.enableDisplayMode("block");
c.hide()
}
a = b.dom.parentNode;
if (c.dom.parentNode != a) {
a.insertBefore(c.dom, b.dom)
}
b.shim = c
}
return b.shim
},
hideShim: function () {
if (this.shim) {
this.shim.setDisplayed(false);
this.self.shims.push(this.shim);
delete this.shim
}
},
disableShadow: function () {
if (this.shadow) {
this.shadowDisabled = true;
this.shadow.hide();
this.lastShadowOffset = this.shadowOffset;
this.shadowOffset = 0
}
},
enableShadow: function (a) {
if (this.shadow) {
this.shadowDisabled = false;
this.shadowOffset = this.lastShadowOffset;
delete this.lastShadowOffset;
if (a) {
this.sync(true)
}
}
},
sync: function (b) {
var i = this,
m = i.shadow,
g, e, a;
if (!this.updating && this.isVisible() && (m || this.useShim)) {
var d = this.getShim(),
c = this.getLeft(true),
n = this.getTop(true),
k = this.getWidth(),
f = this.getHeight(),
j;
if (m && !this.shadowDisabled) {
if (b && !m.isVisible()) {
m.show(this)
} else {
m.realign(c, n, k, f)
}
if (d) {
j = d.getStyle("z-index");
if (j > i.zindex) {
i.shim.setStyle("z-index", i.zindex - 2)
}
d.show();
if (m.isVisible()) {
g = m.el.getXY();
e = d.dom.style;
a = m.el.getSize();
e.left = (g[0]) + "px";
e.top = (g[1]) + "px";
e.width = (a.width) + "px";
e.height = (a.height) + "px"
} else {
d.setSize(k, f);
d.setLeftTop(c, n)
}
}
} else {
if (d) {
j = d.getStyle("z-index");
if (j > i.zindex) {
i.shim.setStyle("z-index", i.zindex - 2)
}
d.show();
d.setSize(k, f);
d.setLeftTop(c, n)
}
}
}
return this
},
remove: function () {
this.hideUnders();
this.callParent()
},
beginUpdate: function () {
this.updating = true
},
endUpdate: function () {
this.updating = false;
this.sync(true)
},
hideUnders: function () {
if (this.shadow) {
this.shadow.hide()
}
this.hideShim()
},
constrainXY: function () {
if (this.constrain) {
var f = Ext.core.Element.getViewWidth(),
b = Ext.core.Element.getViewHeight(),
k = Ext.getDoc().getScroll(),
j = this.getXY(),
g = j[0],
e = j[1],
a = this.shadowOffset,
i = this.dom.offsetWidth + a,
c = this.dom.offsetHeight + a,
d = false;
if ((g + i) > f + k.left) {
g = f - i - a;
d = true
}
if ((e + c) > b + k.top) {
e = b - c - a;
d = true
}
if (g < k.left) {
g = k.left;
d = true
}
if (e < k.top) {
e = k.top;
d = true
}
if (d) {
Ext.Layer.superclass.setXY.call(this, [g, e]);
this.sync()
}
}
return this
},
getConstrainOffset: function () {
return this.shadowOffset
},
setVisible: function (e, b, d, g, f) {
var c = this,
a;
a = function () {
if (e) {
c.sync(true)
}
if (g) {
g()
}
};
if (!e) {
this.hideUnders(true)
}
this.callParent([e, b, d, g, f]);
if (!b) {
a()
}
return this
},
beforeFx: function () {
this.beforeAction();
return this.callParent(arguments)
},
afterFx: function () {
this.callParent(arguments);
this.sync(this.isVisible())
},
beforeAction: function () {
if (!this.updating && this.shadow) {
this.shadow.hide()
}
},
setLeft: function (a) {
this.callParent(arguments);
return this.sync()
},
setTop: function (a) {
this.callParent(arguments);
return this.sync()
},
setLeftTop: function (b, a) {
this.callParent(arguments);
return this.sync()
},
setXY: function (c, a, b, e, d) {
e = this.createCB(e);
this.fixDisplay();
this.beforeAction();
this.callParent([c, a, b, e, d]);
if (!a) {
e()
}
return this
},
createCB: function (c) {
var a = this,
b = a.shadow && a.shadow.isVisible();
return function () {
a.constrainXY();
a.sync(b);
if (c) {
c()
}
}
},
setX: function (a, b, c, e, d) {
this.setXY([a, this.getY()], b, c, e, d);
return this
},
setY: function (e, a, b, d, c) {
this.setXY([this.getX(), e], a, b, d, c);
return this
},
setSize: function (a, c, b, d, f, e) {
f = this.createCB(f);
this.beforeAction();
this.callParent([a, c, b, d, f, e]);
if (!b) {
f()
}
return this
},
setWidth: function (a, b, c, e, d) {
e = this.createCB(e);
this.beforeAction();
this.callParent([a, b, c, e, d]);
if (!b) {
e()
}
return this
},
setHeight: function (b, a, c, e, d) {
e = this.createCB(e);
this.beforeAction();
this.callParent([b, a, c, e, d]);
if (!a) {
e()
}
return this
},
setBounds: function (b, h, d, a, c, e, g, f) {
g = this.createCB(g);
this.beforeAction();
if (!c) {
Ext.Layer.superclass.setXY.call(this, [b, h]);
Ext.Layer.superclass.setSize.call(this, d, a);
g()
} else {
this.callParent([b, h, d, a, c, e, g, f])
}
return this
},
setZIndex: function (a) {
this.zindex = a;
if (this.getShim()) {
this.shim.setStyle("z-index", a++)
}
if (this.shadow) {
this.shadow.setZIndex(a++)
}
this.setStyle("z-index", a);
return this
}
});

Envision123
24 Aug 2011, 2:00 PM
And here is a copy of the line for the System Configuration module which is the first thing listed on the right side of the start menu:


Ext.define("MyDesktop.SystemConWindow", {
extend: "Ext.ux.desktop.Module",
requires: ["Ext.tab.Panel"],
id: "systemcon",
init: function () {
this.launcher = {
text: "System Configuration",
iconCls: "tabs",
handler: this.createWindow,
scope: this
}
},
createWindow: function () {
var b = this.app.getDesktop();
var a = b.getWindow("systemcon");
if (!a) {
a = b.createWindow({
id: "systemcon",
title: "System Configuration",
width: "90%",
height: "80%",
iconCls: "tabs",
animCollapse: false,
border: false,
constrainHeader: true,
layout: "fit",
items: [{
xtype: "tabpanel",
activeTab: 0,
bodyStyle: "padding: 5px;",
items: [{
title: "System Configuration",
header: false,
html: '<iframe frameBorder="0" height="100%" width="100%" src="http://www.google.com"></iframe>',
border: false
}]
}]
})
}
a.show();
return a
}
});
Ext.define("Ext.panel.Table", {
extend: "Ext.panel.Panel",
alias: "widget.tablepanel",
uses: ["Ext.selection.RowModel", "Ext.grid.Scroller", "Ext.grid.header.Container", "Ext.grid.Lockable"],
cls: Ext.baseCSSPrefix + "grid",
extraBodyCls: Ext.baseCSSPrefix + "grid-body",
layout: "fit",
hasView: false,
viewType: null,
selType: "rowmodel",
scrollDelta: 40,
scroll: true,
sortableColumns: true,
verticalScrollDock: "right",
verticalScrollerType: "gridscroller",
horizontalScrollerPresentCls: Ext.baseCSSPrefix + "horizontal-scroller-present",
verticalScrollerPresentCls: Ext.baseCSSPrefix + "vertical-scroller-present",
scrollerOwner: true,
invalidateScrollerOnRefresh: true,
enableColumnMove: true,
enableColumnResize: true,
initComponent: function () {
var g = this,
a = g.scroll,
d = false,
c = false,
h = g.columns || g.colModel,
f = 0,
b, e = g.border;
g.determineScrollbars = Ext.Function.createBuffered(g.determineScrollbars, 30);
g.injectView = Ext.Function.createBuffered(g.injectView, 30);
if (g.hideHeaders) {
e = false
}
if (h instanceof Ext.grid.header.Container) {
g.headerCt = h;
g.headerCt.border = e;
g.columns = g.headerCt.items.items
} else {
if (Ext.isArray(h)) {
h = {
items: h,
border: e
}
}
Ext.apply(h, {
forceFit: g.forceFit,
sortable: g.sortableColumns,
enableColumnMove: g.enableColumnMove,
enableColumnResize: g.enableColumnResize,
border: e
});
g.columns = h.items;
if (Ext.ComponentQuery.query("{locked !== undefined}{processed != true}", g.columns).length) {
g.self.mixin("lockable", Ext.grid.Lockable);
g.injectLockable()
}
}
g.store = Ext.data.StoreManager.lookup(g.store);
g.addEvents("scrollerhide", "scrollershow");
g.bodyCls = g.bodyCls || "";
g.bodyCls += (" " + g.extraBodyCls);
delete g.autoScroll;
if (!g.hasView) {
if (!g.headerCt) {
g.headerCt = Ext.create("Ext.grid.header.Container", h)
}
g.columns = g.headerCt.items.items;
if (g.hideHeaders) {
g.headerCt.height = 0;
g.headerCt.border = false;
g.headerCt.addCls(Ext.baseCSSPrefix + "grid-header-ct-hidden");
g.addCls(Ext.baseCSSPrefix + "grid-header-hidden");
if (Ext.isIEQuirks) {
g.headerCt.style = {
display: "none"
}
}
}
if (a === true || a === "both") {
d = c = true
} else {
if (a === "horizontal") {
c = true
} else {
if (a === "vertical") {
d = true
} else {
g.headerCt.availableSpaceOffset = 0
}
}
}
if (d) {
g.verticalScroller = g.verticalScroller || {};
Ext.applyIf(g.verticalScroller, {
dock: g.verticalScrollDock,
xtype: g.verticalScrollerType,
store: g.store
});
g.verticalScroller = Ext.ComponentManager.create(g.verticalScroller);
g.mon(g.verticalScroller, {
bodyscroll: g.onVerticalScroll,
scope: g
})
}
if (c) {
g.horizontalScroller = Ext.ComponentManager.create({
xtype: "gridscroller",
section: g,
dock: "bottom",
store: g.store
});
g.mon(g.horizontalScroller, {
bodyscroll: g.onHorizontalScroll,
scope: g
})
}
g.headerCt.on("columnresize", g.onHeaderResize, g);
g.relayEvents(g.headerCt, ["columnresize", "columnmove", "columnhide", "columnshow", "sortchange"]);
g.features = g.features || [];
g.dockedItems = g.dockedItems || [];
g.dockedItems.unshift(g.headerCt);
g.viewConfig = g.viewConfig || {};
g.viewConfig.invalidateScrollerOnRefresh = g.invalidateScrollerOnRefresh;
b = g.getView();
if (b) {
g.mon(b.store, {
load: g.onStoreLoad,
scope: g
});
g.mon(b, {
refresh: {
fn: this.onViewRefresh,
scope: g,
buffer: 50
},
itemupdate: g.onViewItemUpdate,
scope: g
});
this.relayEvents(b, ["beforeitemmousedown", "beforeitemmouseup", "beforeitemmouseenter", "beforeitemmouseleave", "beforeitemclick", "beforeitemdblclick", "beforeitemcontextmenu", "itemmousedown", "itemmouseup", "itemmouseenter", "itemmouseleave", "itemclick", "itemdblclick", "itemcontextmenu", "beforecontainermousedown", "beforecontainermouseup", "beforecontainermouseover", "beforecontainermouseout", "beforecontainerclick", "beforecontainerdblclick", "beforecontainercontextmenu", "containermouseup", "containermouseover", "containermouseout", "containerclick", "containerdblclick", "containercontextmenu", "selectionchange", "beforeselect"])
}
}
g.callParent(arguments)
},
initStateEvents: function () {
var a = this.stateEvents;
Ext.each(["columnresize", "columnmove", "columnhide", "columnshow", "sortchange"], function (b) {
if (Ext.Array.indexOf(a, b)) {
a.push(b)
}
});
this.callParent()
},
getState: function () {
var a = {
columns: []
},
b = this.store.sorters.first();
this.headerCt.items.each(function (c) {
a.columns.push({
id: c.headerId,
width: c.flex ? undefined : c.width,
hidden: c.hidden,
sortable: c.sortable
})
});
if (b) {
a.sort = {
property: b.property,
direction: b.direction
}
}
return a
},
applyState: function (a) {
var c = a.columns,
b = c ? c.length : 0,
d = this.headerCt,
h = d.items,
l = a.sort,
j = this.store,
e = 0,
g, k, f;
for (; e < b; ++e) {
k = c[e];
f = d.down("gridcolumn[headerId=" + k.id + "]");
g = h.indexOf(f);
if (e !== g) {
d.moveHeader(g, e)
}
f.sortable = k.sortable;
if (Ext.isDefined(k.width)) {
delete f.flex;
if (f.rendered) {
f.setWidth(k.width)
} else {
f.minWidth = f.width = k.width
}
}
f.hidden = k.hidden
}
if (l) {
if (j.remoteSort) {
j.sorters.add(Ext.create("Ext.util.Sorter", {
property: l.property,
direction: l.direction
}))
} else {
j.sort(l.property, l.direction)
}
}
},
getStore: function () {
return this.store
},
getView: function () {
var a = this,
b;
if (!a.view) {
b = a.getSelectionModel();
a.view = a.createComponent(Ext.apply({}, a.viewConfig, {
xtype: a.viewType,
store: a.store,
headerCt: a.headerCt,
selModel: b,
features: a.features,
panel: a
}));
a.mon(a.view, {
uievent: a.processEvent,
scope: a
});
b.view = a.view;
a.headerCt.view = a.view;
a.relayEvents(a.view, ["cellclick", "celldblclick"])
}
return a.view
},
setAutoScroll: Ext.emptyFn,
elScroll: function (d, e, b) {
var c = this,
a;
if (d === "up" || d === "left") {
e = -e
}
if (d === "down" || d === "up") {
a = c.getVerticalScroller();
a.scrollByDeltaY(e)
} else {
a = c.getHorizontalScroller();
a.scrollByDeltaX(e)
}
},
afterLayout: function () {
this.callParent(arguments);
this.injectView()
},
injectView: function () {
if (!this.hasView && !this.collapsed) {
var b = this,
a = b.getView();
b.hasView = true;
b.add(a);
a.el.scroll = Ext.Function.bind(b.elScroll, b);
b.mon(a.el, {
mousewheel: b.onMouseWheel,
scope: b
})
}
},
afterExpand: function () {
this.callParent(arguments);
if (!this.hasView) {
this.injectView()
}
},
processEvent: function (f, b, a, c, d, h) {
var g = this,
i;
if (d !== -1) {
i = g.headerCt.getGridColumns()[d];
return i.processEvent.apply(i, arguments)
}
},
determineScrollbars: function () {
var e = this,
b, a, f, d, c;
if (!e.collapsed && e.view && e.view.el) {
b = e.view.el.dom;
a = e.headerCt.getFullWidth();
f = b.offsetWidth;
if (e.verticalScroller && e.verticalScroller.el) {
d = e.verticalScroller.getSizeCalculation().height
} else {
d = b.scrollHeight
}
c = b.clientHeight;
if (!e.collapsed && d > c) {
e.showVerticalScroller()
} else {
e.hideVerticalScroller()
}
if (!e.collapsed && a > (f + Ext.getScrollBarWidth() - 2)) {
e.showHorizontalScroller()
} else {
e.hideHorizontalScroller()
}
}
},
onHeaderResize: function () {
if (this.view && this.view.rendered) {
this.determineScrollbars();
this.invalidateScroller()
}
},
hideHorizontalScroller: function () {
var a = this;
if (a.horizontalScroller && a.horizontalScroller.ownerCt === a) {
a.verticalScroller.offsets.bottom = 0;
a.removeDocked(a.horizontalScroller, false);
a.removeCls(a.horizontalScrollerPresentCls);
a.fireEvent("scrollerhide", a.horizontalScroller, "horizontal")
}
},
showHorizontalScroller: function () {
var a = this;
if (a.verticalScroller) {
a.verticalScroller.offsets.bottom = Ext.getScrollBarWidth() - 2
}
if (a.horizontalScroller && a.horizontalScroller.ownerCt !== a) {
a.addDocked(a.horizontalScroller);
a.addCls(a.horizontalScrollerPresentCls);
a.fireEvent("scrollershow", a.horizontalScroller, "horizontal")
}
},
hideVerticalScroller: function () {
var a = this,
b = a.headerCt;
if (b && b.layout.reserveOffset) {
b.layout.reserveOffset = false;
b.doLayout()
}
if (a.verticalScroller && a.verticalScroller.ownerCt === a) {
a.removeDocked(a.verticalScroller, false);
a.removeCls(a.verticalScrollerPresentCls);
a.fireEvent("scrollerhide", a.verticalScroller, "vertical")
}
},
showVerticalScroller: function () {
var a = this,
b = a.headerCt;
if (b && !b.layout.reserveOffset) {
b.layout.reserveOffset = true;
b.doLayout()
}
if (a.verticalScroller && a.verticalScroller.ownerCt !== a) {
a.addDocked(a.verticalScroller);
a.addCls(a.verticalScrollerPresentCls);
a.fireEvent("scrollershow", a.verticalScroller, "vertical")
}
},
invalidateScroller: function () {
var b = this,
a = b.verticalScroller,
c = b.horizontalScroller;
if (a) {
a.invalidate()
}
if (c) {
c.invalidate()
}
},
onHeaderMove: function (c, d, a, b) {
this.view.refresh()
},
onHeaderHide: function (a, b) {
this.invalidateScroller()
},
onHeaderShow: function (a, b) {
this.invalidateScroller()
},
getVerticalScroller: function () {
return this.getScrollerOwner().down("gridscroller[dock=" + this.verticalScrollDock + "]")
},
getHorizontalScroller: function () {
return this.getScrollerOwner().down("gridscroller[dock=bottom]")
},
onMouseWheel: function (j) {
var k = this,
n = j.browserEvent,
g = k.getVerticalScroller(),
l = k.getHorizontalScroller(),
c = k.scrollDelta,
d, f, i, m, h, b, o, a;
if (l) {
m = l.el;
if (m) {
h = m.dom.scrollLeft
}
}
if (g) {
i = g.el;
if (i) {
b = i.dom.scrollTop
}
}
if (n.wheelDeltaX || n.wheelDeltaY) {
f = -n.wheelDeltaX / 120 * c / 3;
d = -n.wheelDeltaY / 120 * c / 3;
if (l) {
o = l.scrollByDeltaX(f)
}
if (g) {
a = g.scrollByDeltaY(d)
}
} else {
if (n.axis && n.axis === 1) {
if (l) {
f = -(c * j.getWheelDelta()) / 3;
o = l.scrollByDeltaX(f)
}
} else {
if (g) {
d = -(c * j.getWheelDelta() / 3);
a = g.scrollByDeltaY(d)
}
}
}
if ((f !== 0 && o !== h) || (d !== 0 && a !== b)) {
j.stopEvent()
}
},
onViewRefresh: function () {
if (Ext.isIE) {
this.syncCellHeight()
}
this.determineScrollbars();
if (this.invalidateScrollerOnRefresh) {
this.invalidateScroller()
}
},
onViewItemUpdate: function (a, b, c) {
if (Ext.isIE) {
this.syncCellHeight([c])
}
},
syncCellHeight: function (g) {
var m = this,
f = 0,
e, d, h, l, c, n, k = [],
a, b = ("." + Ext.baseCSSPrefix + "grid-cell");
g = g || m.view.getNodes();
n = g.length;
for (; f < n; f++) {
l = g[f];
e = Ext.fly(l).query(b);
h = e.length;
a = [];
for (d = 0; d < h; d++) {
c = e[d];
a.push(c.clientHeight)
}
k.push(Ext.Array.max(a))
}
for (f = 0; f < n; f++) {
l = g[f];
h = l.childNodes.length;
for (d = 0; d < h; d++) {
c = Ext.fly(l.childNodes[d]);
if (k[f]) {
if (c.is(b)) {
c.setHeight(k[f])
} else {
c.down(b).setHeight(k[f])
}
}
}
}
},
setScrollTop: function (d) {
var c = this,
b = c.getScrollerOwner(),
a = c.getVerticalScroller();
b.virtualScrollTop = d;
if (a) {
a.setScrollTop(d)
}
},
getScrollerOwner: function () {
var a = this;
if (!this.scrollerOwner) {
a = this.up("[scrollerOwner]")
}
return a
},
scrollByDeltaY: function (a) {
var c = this.getScrollerOwner(),
b;
b = c.down("gridscroller[dock=" + this.verticalScrollDock + "]");
if (b) {
b.scrollByDeltaY(a)
}
},
scrollByDeltaX: function (a) {
this.horizontalScroller.scrollByDeltaX(a)
},
getLhsMarker: function () {
var a = this;
if (!a.lhsMarker) {
a.lhsMarker = Ext.core.DomHelper.append(a.el, {
cls: Ext.baseCSSPrefix + "grid-resize-marker"
}, true)
}
return a.lhsMarker
},
getRhsMarker: function () {
var a = this;
if (!a.rhsMarker) {
a.rhsMarker = Ext.core.DomHelper.append(a.el, {
cls: Ext.baseCSSPrefix + "grid-resize-marker"
}, true)
}
return a.rhsMarker
},
getSelectionModel: function () {
if (!this.selModel) {
this.selModel = {}
}
var b = "SINGLE",
a;
if (this.simpleSelect) {
b = "SIMPLE"
} else {
if (this.multiSelect) {
b = "MULTI"
}
}
Ext.applyIf(this.selModel, {
allowDeselect: this.allowDeselect,
mode: b
});
if (!this.selModel.events) {
a = this.selModel.selType || this.selType;
this.selModel = Ext.create("selection." + a, this.selModel)
}
if (!this.selModel.hasRelaySetup) {
this.relayEvents(this.selModel, ["selectionchange", "select", "deselect"]);
this.selModel.hasRelaySetup = true
}
if (this.disableSelection) {
this.selModel.locked = true
}
return this.selModel
},
onVerticalScroll: function (e, f) {
var b = this.getScrollerOwner(),
c = b.query("tableview"),
d = 0,
a = c.length;
for (; d < a; d++) {
c[d].el.dom.scrollTop = f.scrollTop
}
},
onHorizontalScroll: function (b, j) {
var d = this.getScrollerOwner(),
k = d.query("tableview"),
f = 0,
h = k.length,
a, e, g, l, c;
a = k[1] || k[0];
e = a.el.dom;
g = e.scrollWidth;
l = e.offsetWidth;
c = this.horizontalScroller.getWidth();
e.scrollLeft = j.scrollLeft;
this.headerCt.el.dom.scrollLeft = j.scrollLeft
},
onStoreLoad: Ext.emptyFn,
getEditorParent: function () {
return this.body
},
bindStore: function (a) {
var b = this;
b.store = a;
b.getView().bindStore(a)
},
reconfigure: function (a, b) {
var c = this;
if (c.lockable) {
c.reconfigureLockable(a, b);
return
}
if (b) {
c.headerCt.removeAll();
c.headerCt.add(b)
}
if (a) {
a = Ext.StoreManager.lookup(a);
c.bindStore(a)
} else {
c.getView().refresh()
}
},
afterComponentLayout: function () {
this.callParent(arguments);
this.determineScrollbars();
this.invalidateScroller()
}
});
Ext.define("Ext.grid.Panel", {
extend: "Ext.panel.Table",
requires: ["Ext.grid.View"],
alias: ["widget.gridpanel", "widget.grid"],
alternateClassName: ["Ext.list.ListView", "Ext.ListView", "Ext.grid.GridPanel"],
viewType: "gridview",
lockable: false,
normalCfgCopy: ["invalidateScrollerOnRefresh", "verticalScroller", "verticalScrollDock", "verticalScrollerType", "scroll"],
lockedCfgCopy: ["invalidateScrollerOnRefresh"],
initComponent: function () {
var a = this;
if (a.columnLines) {
a.setColumnLines(a.columnLines)
}
a.callParent()
},
setColumnLines: function (a) {
var b = this,
c = (a) ? "addClsWithUI" : "removeClsWithUI";
b[c]("with-col-lines")
}
});

skirtle
24 Aug 2011, 5:08 PM
It seems that the HTML files I described only exist in certain version of the ExtJS ZIP. In other versions the file I describe as desktop-release.html is called desktop.html and there is no equivalent of the other file.

However, the unminified JS files do appear to be there. For example, do you have a file called examples/desktop/js/Desktop.js containing unminified code? This is one of the files that combine to make classes.js. If you don't, try redownloading the ExtJS ZIP:

http://www.sencha.com/learn/legacy/Ext_Version_Archives

Using 4.0.2 I replaced the file examples/desktop/desktop.html with the file below. This appear to work and gives debug versions of the files. Please give this a try and let me know how you get on. Once we get this sorted I feel we can fix your original problem pretty quickly.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ExtTop - Desktop Sample App</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/desktop.css" />

<script type="text/javascript" src="../../bootstrap.js"></script>

<script type="text/javascript">
Ext.Loader.setConfig('enabled', true);

Ext.Loader.setPath({
'Ext.ux.desktop': 'js',
MyDesktop: ''
});

Ext.require('MyDesktop.App');

var myDesktopApp;
Ext.onReady(function () {
myDesktopApp = new MyDesktop.App();
});
</script>
</head>

<body>

<a href="http://www.sencha.com" target="_blank" alt="Powered by Ext JS"
id="poweredby"><div></div></a>

</body>
</html>

Envision123
24 Aug 2011, 6:29 PM
Just re-uploaded 4.0.2 with those files for you and edited desktop.html with you code. I uploaded all of this here: http://www.zazavi.com/desktop2/examples/desktop/desktop.html

skirtle
24 Aug 2011, 7:18 PM
I have just followed your new link. The HTML file is clearly not the one I asked you to use. It doesn't load the bootstrapper, it doesn't enable the loader, ...

Envision123
24 Aug 2011, 10:20 PM
Sorry about that, uploaded the wrong file. The correct desktop.html is now uploaded.

skirtle
24 Aug 2011, 10:24 PM
... and now it doesn't have your menu items. I can't fix them if they aren't there.

Envision123
25 Aug 2011, 5:42 AM
It looks like when you gave me new code for desktop.html that you didn't include the classes.css file.

I have gone ahead and added it to desktop.html and the menus are loading for you.

skirtle
25 Aug 2011, 6:06 PM
It looks like when you gave me new code for desktop.html that you didn't include the classes.css file.

Judging by the current demo, I assume you mean classes.js, not classes.css.

Omitting that file is exactly what I was trying to do. That file contains the concatenated and minified versions of the source files. If you include it then the the loader won't bother loading the original source files as the classes they define will already be present.

Please tell me you are not writing your own code directly into classes.js? That file is a build artefact. It's the equivalent of compiled code.

I sense that you have not understood many of the things I have said on this thread. Please re-read my posts and ensure you understand all of them. If there is anything you don't understand then please ask. You mustn't be afraid of appearing ignorant, it will only hold back your understanding.

Envision123
25 Aug 2011, 6:24 PM
No problem, I can make it very simple. Here's the link: http://www.zazavi.com/desktop2/examples/desktop/desktop.html

On the right side you see Settings and Logout. What would I need to change to make Settings open Tab Window instead of the settings window?

skirtle
25 Aug 2011, 7:05 PM
At the end of the file examples/desktop/App.js there is a method called onSettings. Change it to the following:


onSettings: function () {
this.getModule('tab-win').createWindow();
}

Envision123
25 Aug 2011, 8:17 PM
Thanks! That just put me much closer to having this completed!

There is only one issue that I am running into now. It works when using a module that is already listed on the desktop or left side menu such as Pages Window because it is listed here:


getModules: function () {
return [new MyDesktop.DashboardWindow(), new MyDesktop.MenusWindow(), new MyDesktop.PagesWindow(), new MyDesktop.PostsWindow(), new MyDesktop.ModulesWindow(), new MyDesktop.FormsWindow(), new MyDesktop.LayoutWindow(), new MyDesktop.UsersWindow(), new MyDesktop.MarketWindow(), new MyDesktop.ExtrasWindow(), new MyDesktop.ForumWindow()]
},

For example, if I added


new MyDesktop.SystemConWindow

to the above list then the System Configuration window would load from the right menu but is also going to appear on the left side.

In my demo ( http://www.zazavi.com/desktop/desktop.html ) you will see that all the buttons on the right side are loading Pages and Posts because they are listed in the above list. However, when I change System Configuration to load its module (already did in demo so you can see it) then it won't load it since it is not in the first list.

So, to make it more basic like before: where can I list the module so that the right menu can get it but so that it doesn't appear in the left menu?

Once again, thanks for your time!

skirtle
25 Aug 2011, 8:24 PM
I believe you need to add it to the same module list as the others but delete its launcher.

Envision123
25 Aug 2011, 8:42 PM
This is how I added it:


getModules: function () {
return [new MyDesktop.SystemConWindow(), new MyDesktop.DashboardWindow(), new MyDesktop.MenusWindow(), new MyDesktop.PagesWindow(), new MyDesktop.PostsWindow(), new MyDesktop.ModulesWindow(), new MyDesktop.FormsWindow(), new MyDesktop.LayoutWindow(), new MyDesktop.UsersWindow(), new MyDesktop.MarketWindow(), new MyDesktop.ExtrasWindow(), new MyDesktop.ForumWindow()]
},

What exactly do I need to change for it to not show on the left side but still work on the right side?

Also, I have the demo updated so that it is currently working on the right side but also showing now on the left so you see what I mean.

skirtle
25 Aug 2011, 8:48 PM
Remove the code that adds the launcher:


this.launcher={text:"System Configuration" ...

Envision123
25 Aug 2011, 9:00 PM
When I remove the launcher


{this.launcher={text:"System Configuration",iconCls:"tabs",handler:this.createWindow,scope:this}}

it just loads a blank page on my end.

skirtle
25 Aug 2011, 9:08 PM
Delete this bit too:


init:function(),

You wouldn't be having these problems if you weren't still trying to write minified code. A decent IDE would also help.

Envision123
25 Aug 2011, 9:36 PM
That worked perfect! Thank you so much for your help!