1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    30
    Answers
    1
    Vote Rating
    0
    Envision123 is on a distinguished road

      0  

    Default Answered: Right-Side of Start Menu on Desktop Sample

    Answered: Right-Side of Start Menu on Desktop Sample


    You can see the website here with all the code to make it easier for you to diagnose what is happening:

    Code:
    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:

    Code:
    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!

  2. At the end of the file examples/desktop/App.js there is a method called onSettings. Change it to the following:

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

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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:

    Code:
    {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.

  4. #3
    Ext JS Premium Member christocracy's Avatar
    Join Date
    Oct 2006
    Location
    Montreal
    Posts
    381
    Vote Rating
    0
    christocracy is on a distinguished road

      0  

    Default Ext Events

    Ext Events


    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.
    /**
    * @author Chris Scott
    * @business www.transistorsoft.com
    * @rate $150USD / hr; training $500USD / day / developer (5 dev min)
    *
    * @SenchaDevs http://senchadevs.com/developers/transistor-software
    * @twitter http://twitter.com/#!/christocracy
    * @github https://github.com/christocracy
    */

  5. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    30
    Answers
    1
    Vote Rating
    0
    Envision123 is on a distinguished road

      0  

    Default


    This is actually the line that handles all of the start menu:

    Code:
    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

  6. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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():

    Code:
    Ext.Loader.setConfig('enabled', true);
    Otherwise it'll complain that the loader isn't enabled and you'll just get a white screen.

  7. #6
    Sencha User
    Join Date
    Aug 2011
    Posts
    30
    Answers
    1
    Vote Rating
    0
    Envision123 is on a distinguished road

      0  

    Default


    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!

  8. #7
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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.

  9. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    30
    Answers
    1
    Vote Rating
    0
    Envision123 is on a distinguished road

      0  

    Default


    Here's what I don't get, I have this listed:

    Code:
    {text:"System Configuration",iconCls:"settings",handler:b.onSettings,scope:b}
    It seems like it should be as simple as changing it to this:

    Code:
    {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

  10. #9
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    but can't find it
    It's in the middle of the code you posted.

    Code:
    ...
    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.

  11. #10
    Sencha User
    Join Date
    Aug 2011
    Posts
    30
    Answers
    1
    Vote Rating
    0
    Envision123 is on a distinguished road

      0  

    Default


    Here is a copy of the code for the line handling the start menu:

    Code:
    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
        }
    });

Thread Participants: 2