extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/container/Viewport.js

@@ -0,0 +1,184 @@
+/**
+ * A specialized container representing the viewable application area (the browser viewport).
+ *
+ * The Viewport renders itself to the document body, and automatically sizes itself to the size of
+ * the browser viewport and manages window resizing. There may only be one Viewport created
+ * in a page.
+ *
+ * Like any {@link Ext.container.Container Container}, a Viewport will only perform sizing and positioning
+ * on its child Components if you configure it with a {@link #layout}.
+ *
+ * A Common layout used with Viewports is {@link Ext.layout.container.Border border layout}, but if the
+ * required layout is simpler, a different layout should be chosen.
+ *
+ * For example, to simply make a single child item occupy all available space, use
+ * {@link Ext.layout.container.Fit fit layout}.
+ *
+ * To display one "active" item at full size from a choice of several child items, use
+ * {@link Ext.layout.container.Card card layout}.
+ *
+ * Inner layouts are available because all {@link Ext.panel.Panel Panel}s
+ * added to the Viewport, either through its {@link #cfg-items}, or the {@link #method-add}
+ * method of any of its child Panels may themselves have a layout.
+ *
+ * The Viewport does not provide scrolling, so child Panels within the Viewport should provide
+ * for scrolling if needed using the {@link #autoScroll} config.
+ *
+ * An example showing a classic application border layout:
+ *
+ *     @example
+ *     Ext.create('Ext.container.Viewport', {
+ *         layout: 'border',
+ *         items: [{
+ *             region: 'north',
+ *             html: '<h1 class="x-panel-header">Page Title</h1>',
+ *             border: false,
+ *             margins: '0 0 5 0'
+ *         }, {
+ *             region: 'west',
+ *             collapsible: true,
+ *             title: 'Navigation',
+ *             width: 150
+ *             // could use a TreePanel or AccordionLayout for navigational items
+ *         }, {
+ *             region: 'south',
+ *             title: 'South Panel',
+ *             collapsible: true,
+ *             html: 'Information goes here',
+ *             split: true,
+ *             height: 100,
+ *             minHeight: 100
+ *         }, {
+ *             region: 'east',
+ *             title: 'East Panel',
+ *             collapsible: true,
+ *             split: true,
+ *             width: 150
+ *         }, {
+ *             region: 'center',
+ *             xtype: 'tabpanel', // TabPanel itself has no title
+ *             activeTab: 0,      // First tab active by default
+ *             items: {
+ *                 title: 'Default Tab',
+ *                 html: 'The first tab\'s content. Others may be added dynamically'
+ *             }
+ *         }]
+ *     });
+ */
+Ext.define('Ext.container.Viewport', {
+    extend: 'Ext.container.Container',
+    alias: 'widget.viewport',
+    requires: ['Ext.EventManager'],
+    alternateClassName: 'Ext.Viewport',
+
+    // Privatize config options which, if used, would interfere with the
+    // correct operation of the Viewport as the sole manager of the
+    // layout of the document body.
+
+    /**
+     * @cfg {String/HTMLElement/Ext.Element} applyTo
+     * @private
+     */
+
+    /**
+     * @cfg {Boolean} allowDomMove
+     * @private
+     */
+
+    /**
+     * @cfg {Boolean} hideParent
+     * @private
+     */
+
+    /**
+     * @cfg {String/HTMLElement/Ext.Element} renderTo
+     * Always renders to document body.
+     * @private
+     */
+
+    /**
+     * @cfg {Number} height
+     * Sets itself to viewport width.
+     * @private
+     */
+
+    /**
+     * @cfg {Number} width
+     * Sets itself to viewport height.
+     * @private
+     */
+
+    /**
+     * @cfg {Boolean} deferHeight
+     * @private
+     */
+
+    /**
+     * @cfg {Boolean} monitorResize
+     * @private
+     */
+
+    /**
+     * @property {Boolean} isViewport
+     * `true` in this class to identify an object as an instantiated Viewport, or subclass thereof.
+     */
+    isViewport: true,
+
+    ariaRole: 'application',
+    
+    preserveElOnDestroy: true,
+
+    initComponent : function() {
+        var me = this,
+            html = document.body.parentNode,
+            el;
+
+        // Get the DOM disruption over with beforfe the Viewport renders and begins a layout
+        Ext.getScrollbarSize();
+        
+        // Clear any dimensions, we will size later on
+        me.width = me.height = undefined;
+
+        me.callParent(arguments);
+        Ext.fly(html).addCls(Ext.baseCSSPrefix + 'viewport');
+        if (me.autoScroll) {
+            delete me.autoScroll;
+            Ext.fly(html).setStyle('overflow', 'auto');
+        }
+        me.el = el = Ext.getBody();
+        el.setHeight = Ext.emptyFn;
+        el.setWidth = Ext.emptyFn;
+        el.setSize = Ext.emptyFn;
+        el.dom.scroll = 'no';
+        me.allowDomMove = false;
+        me.renderTo = me.el;
+    },
+    
+    onRender: function() {
+        var me = this;
+
+        me.callParent(arguments);
+
+        // Important to start life as the proper size (to avoid extra layouts)
+        // But after render so that the size is not stamped into the body
+        me.width = Ext.Element.getViewportWidth();
+        me.height = Ext.Element.getViewportHeight();
+    },
+
+    afterFirstLayout: function() {
+        var me = this;
+
+        me.callParent(arguments);
+        setTimeout(function() {
+            Ext.EventManager.onWindowResize(me.fireResize, me);
+        }, 1);
+    },
+
+    fireResize : function(width, height){
+        // In IE we can get resize events that have our current size, so we ignore them
+        // to avoid the useless layout...
+        if (width != this.width || height != this.height) {
+            this.setSize(width, height);
+        }
+    }
+});

data/app/assets/javascripts/extjs-rails/src/core/dom/Element.form.js

@@ -0,0 +1,50 @@
+/**
+ * @class Ext.dom.Element
+ */
+Ext.apply(Ext.core.Element, {
+    /**
+     * Serializes a DOM form into a url encoded string
+     * @param {Object} form The form
+     * @return {String} The url encoded form
+     * @static
+     */
+    serializeForm: function(form) {
+        var fElements = form.elements || (document.forms[form] || Ext.getDom(form)).elements,
+            hasSubmit = false,
+            encoder   = encodeURIComponent,
+            data      = '',
+            e,
+            eLen      = fElements.length,
+            el, name, type, options, hasValue,
+            o, oLen, opt;
+
+        for (e = 0; e < eLen; e++) {
+            el      = fElements[e];
+            name    = el.name;
+            type    = el.type;
+            options = el.options;
+
+            if (!el.disabled && name) {
+                if (/select-(one|multiple)/i.test(type)) {
+                    oLen = options.length;
+
+                    for (o = 0; o < oLen; o++) {
+                        opt = options[o];
+
+                        if (opt.selected) {
+                            hasValue = opt.hasAttribute ? opt.hasAttribute('value') : opt.getAttributeNode('value').specified;
+                            data += Ext.String.format("{0}={1}&", encoder(name), encoder(hasValue ? opt.value : opt.text));
+                        }
+                    }
+                } else if (!(/file|undefined|reset|button/i.test(type))) {
+                    if (!(/radio|checkbox/i.test(type) && !el.checked) && !(type == 'submit' && hasSubmit)) {
+                        data += encoder(name) + '=' + encoder(el.value) + '&';
+                        hasSubmit = /submit/i.test(type);
+                    }
+                }
+            }
+        }
+
+        return data.substr(0, data.length - 1);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/core/dom/Element.static-more.js

@@ -0,0 +1,159 @@
+/**
+ * @class Ext.dom.Element
+ */
+(function(){
+    var doc = document,
+        isCSS1 = doc.compatMode == "CSS1Compat",
+        ELEMENT = Ext.Element,
+        fly = function(el){
+            if (!_fly) {
+                _fly = new Ext.Element.Flyweight();
+            }
+            _fly.dom = el;
+            return _fly;
+        }, _fly;
+
+    Ext.apply(ELEMENT, {
+
+        getViewWidth : function(full) {
+            return full ? ELEMENT.getDocumentWidth() : ELEMENT.getViewportWidth();
+        },
+
+        getViewHeight : function(full) {
+            return full ? ELEMENT.getDocumentHeight() : ELEMENT.getViewportHeight();
+        },
+
+        getDocumentHeight: function() {
+            return Math.max(!isCSS1 ? doc.body.scrollHeight : doc.documentElement.scrollHeight, ELEMENT.getViewportHeight());
+        },
+
+        getDocumentWidth: function() {
+            return Math.max(!isCSS1 ? doc.body.scrollWidth : doc.documentElement.scrollWidth, ELEMENT.getViewportWidth());
+        },
+
+        getViewportHeight: function(){
+            return Ext.isIE ?
+                   (Ext.isStrict ? doc.documentElement.clientHeight : doc.body.clientHeight) :
+                   self.innerHeight;
+        },
+
+        getViewportWidth : function() {
+            return (!Ext.isStrict && !Ext.isOpera) ? doc.body.clientWidth :
+                   Ext.isIE ? doc.documentElement.clientWidth : self.innerWidth;
+        },
+
+        getY : function(el) {
+            return ELEMENT.getXY(el)[1];
+        },
+
+        getX : function(el) {
+            return ELEMENT.getXY(el)[0];
+        },
+
+        getOffsetParent: function (el) {
+            el = Ext.getDom(el);
+            try {
+                // accessing offsetParent can throw "Unspecified Error" in IE6-8 (not 9)
+                return el.offsetParent;
+            } catch (e) {
+                var body = document.body; // safe bet, unless...
+                return (el == body) ? null : body;
+            }
+        },
+
+        getXY : function(el) {
+            var p,
+                pe,
+                b,
+                bt,
+                bl,
+                dbd,
+                x = 0,
+                y = 0,
+                scroll,
+                hasAbsolute,
+                bd = (doc.body || doc.documentElement),
+                ret;
+
+            el = Ext.getDom(el);
+
+            if(el != bd){
+                hasAbsolute = fly(el).isStyle("position", "absolute");
+
+                if (el.getBoundingClientRect) {
+                    try {
+                        b = el.getBoundingClientRect();
+                        scroll = fly(document).getScroll();
+                        ret = [ Math.round(b.left + scroll.left), Math.round(b.top + scroll.top) ];
+                    } catch (e) {
+                        // IE6-8 can also throw from getBoundingClientRect...
+                    }
+                }
+
+                if (!ret) {
+                    for (p = el; p; p = ELEMENT.getOffsetParent(p)) {
+                        pe = fly(p);
+                        x += p.offsetLeft;
+                        y += p.offsetTop;
+
+                        hasAbsolute = hasAbsolute || pe.isStyle("position", "absolute");
+
+                        if (Ext.isGecko) {
+                            y += bt = parseInt(pe.getStyle("borderTopWidth"), 10) || 0;
+                            x += bl = parseInt(pe.getStyle("borderLeftWidth"), 10) || 0;
+
+                            if (p != el && !pe.isStyle('overflow','visible')) {
+                                x += bl;
+                                y += bt;
+                            }
+                        }
+                    }
+
+                    if (Ext.isSafari && hasAbsolute) {
+                        x -= bd.offsetLeft;
+                        y -= bd.offsetTop;
+                    }
+
+                    if (Ext.isGecko && !hasAbsolute) {
+                        dbd = fly(bd);
+                        x += parseInt(dbd.getStyle("borderLeftWidth"), 10) || 0;
+                        y += parseInt(dbd.getStyle("borderTopWidth"), 10) || 0;
+                    }
+
+                    p = el.parentNode;
+                    while (p && p != bd) {
+                        if (!Ext.isOpera || (p.tagName.toUpperCase() != 'TR' && !fly(p).isStyle("display", "inline"))) {
+                            x -= p.scrollLeft;
+                            y -= p.scrollTop;
+                        }
+                        p = p.parentNode;
+                    }
+                    ret = [x,y];
+                }
+            }
+            return ret || [0,0];
+        },
+
+        setXY : function(el, xy) {
+            (el = Ext.fly(el, '_setXY')).position();
+
+            var pts = el.translatePoints(xy),
+                style = el.dom.style,
+                pos;
+
+            for (pos in pts) {
+                if (!isNaN(pts[pos])) {
+                    style[pos] = pts[pos] + "px";
+                }
+            }
+        },
+
+        setX : function(el, x) {
+            ELEMENT.setXY(el, [x, false]);
+        },
+
+        setY : function(el, y) {
+            ELEMENT.setXY(el, [false, y]);
+        }
+    });
+}());

data/app/assets/javascripts/extjs-rails/src/core/examples/index.html

@@ -0,0 +1,321 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html>
+    <head>
+        <title>Ext Core 4 Class Example</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <style>
+            pre { border: 1px gray solid; padding: 5px; margin-top: 30px; }
+        </style>
+
+        <script type="text/javascript" src="../src/Ext.js"></script>
+        <script type="text/javascript" src="../src/version/Version.js"></script>
+        <script type="text/javascript" src="../src/lang/String.js"></script>
+        <script type="text/javascript" src="../src/lang/Array.js"></script>
+        <script type="text/javascript" src="../src/lang/Number.js"></script>
+        <script type="text/javascript" src="../src/lang/Date.js"></script>
+        <script type="text/javascript" src="../src/lang/Object.js"></script>
+        <script type="text/javascript" src="../src/lang/Function.js"></script>
+        <script type="text/javascript" src="../src/class/Base.js"></script>
+        <script type="text/javascript" src="../src/class/Class.js"></script>
+        <script type="text/javascript" src="../src/class/ClassManager.js"></script>
+        <script type="text/javascript" src="../src/class/Loader.js"></script>
+        <script type="text/javascript" src="../src/lang/Error.js"></script>
+        <script>
+            Ext.Loader.setConfig({
+                enabled: true,
+                paths: {
+                    'Sample': 'src/Sample'
+                }
+            });
+        </script>
+        <script>
+            var sources = {};
+
+            function storeCode() {
+                var i = 0,
+                    name,
+                    pre;
+
+                while (++i) {
+                    name = 'sample' + i;
+                    pre = document.getElementById(name);
+
+                    if (!pre) {
+                        break;
+                    }
+
+                    sources[name] = pre.innerHTML;
+                }
+            }
+
+            function run(id) {
+                eval(sources[id]);
+            }
+        </script>
+    </head>
+    <body onload="storeCode();">
+        <pre id="sample1">
+Ext.require('Sample.Person', function() {
+    var aaron = new Sample.Person({
+        name: 'Aaron Conran',
+        gender: 'male',
+        isCool: true
+    });
+
+    alert(aaron.getName()); // 'Aaron Conran'
+    alert(aaron.getGender()); // 'male'
+    alert(aaron.getIsCool()); // true
+
+    aaron.eat("Salad"); // alerts "I'm eating: Salad"
+
+    aaron.setGender('weird');
+    alert(aaron.getGender()); // 'unknown'
+});
+        </pre>
+        <p>
+            <button onclick="run('sample1')">Run Code</button>
+        </p>
+
+        <pre id="sample2">
+Ext.require('Sample.Developer', function() {
+    var tommy = new Sample.Developer({
+        name: 'Tommy Maintz',
+        languages: ['PHP', 'JavaScript', 'HTML', 'CSS']
+    });
+
+    tommy.code('Objective-C'); // alerts "I can't code in: Objective-C"
+    tommy.code('JavaScript'); // alerts "I'm coding in: JavaScript"
+                              // alerts "I'm eating: Bugs"
+});
+        </pre>
+        <p>
+            <button onclick="run('sample2')">Run Code</button>
+        </p>
+
+        <pre id="sample3">
+Ext.require('Sample.Musician', function() {
+    var dave = new Sample.Musician({
+        name: 'David Kaneda',
+        isCool: true
+    });
+
+    dave.composeSongs(); // alerts "David Kaneda is composing songs"
+    dave.playGuitar(); // alerts "David Kaneda is playing guitar"
+
+    var anotherDave = Sample.Musician.clone(dave);
+    alert(anotherDave.getName()); // alerts "David Kaneda"
+});
+        </pre>
+        <p>
+            <button onclick="run('sample3')">Run Code</button>
+        </p>
+
+        <pre id="sample4">
+Ext.require('Sample.CoolGuy', function() {
+    var jacky = new Sample.CoolGuy({
+        name: 'Jacky Nguyen',
+        isCool: true
+    });
+
+    jacky.playGuitar(); // alerts "Jacky Nguyen is playing guitar"
+    jacky.sing("Love Me or Die"); // alerts "Ahem..."
+                                  // alerts "I'm singing: Love Me or Die"
+});
+        </pre>
+        <p>
+            <button onclick="run('sample4')">Run Code</button>
+        </p>
+
+        <pre id="sample5">
+Ext.require(['Sample.Developer', 'Sample.HumanResource'], function() {
+    var jacky = new Sample.Developer({
+            name: 'Jacky Nguyen',
+            languages: ['PHP', 'JavaScript', 'HTML', 'CSS']
+        }),
+        noobie = new Sample.Developer({
+            name: 'Noobie Dumb',
+            languages: ['LameScript']
+        }),
+        hr = Sample.HumanResource;
+
+    hr.recruit(noobie); // alerts "Noobie Dumb doesn't know JavaScript, no point recruiting!"
+    hr.recruit(jacky);
+
+    alert(hr.getDevelopersCount()); // alerts 1
+});
+        </pre>
+        <p>
+            <button onclick="run('sample5')">Run Code</button>
+        </p>
+
+        <pre id="sample6">
+Ext.require(['Sample.deadlock.A'], function() {
+    // should throw Error
+});
+        </pre>
+        <p>
+            <button onclick="run('sample6')">Run Code</button>
+        </p>
+
+        <pre id="sample7">
+Ext.require(['Sample.notdeadlock.A'], function() {
+    alert("Loading sequence: " + Ext.Loader.history.join(" -> "));
+});
+        </pre>
+        <p>
+            <button onclick="run('sample7')">Run Code</button>
+        </p>
+
+        <pre id="sample8">
+Ext.require(['Sample.CTO', 'Sample.Developer'], function() {
+    var abe = new Sample.CTO();
+    alert(abe.isGeek); // alerts true
+    alert(abe.isSuperGeek); // alerts true
+    alert(abe.getAverageIQ()); // alerts 140
+                               // not the current class
+
+    var ape = abe.clone();
+    alert(Ext.getClassName(ape)); // alerts 'Sample.CTO'
+
+    var jacky = new Sample.Developer();
+    alert(jacky.getAverageIQ()); // alerts 120
+
+    var jackie = abe.hireNewDeveloperLike(jacky);
+    alert(Ext.getClassName(jackie)); // alerts 'Sample.Developer'
+});
+        </pre>
+        <p>
+            <button onclick="run('sample8')">Run Code</button>
+        </p>
+
+        <pre id="sample9">
+Ext.define('My.own.A', {
+    statics: {
+        myName: 'A'
+    },
+
+    constructor: function() {
+        alert(this.statics().myName);
+        alert(this.self.myName);
+    },
+
+    clone: function() {
+        var cloned = new this.self();
+
+        cloned.rootName = this.statics().myName;
+
+        return cloned;
+    }
+});
+
+Ext.define('My.own.B', {
+    extend: 'My.own.A',
+
+    statics: {
+        myName: 'B'
+    },
+
+    clone: function() {
+        var cloned = this.callParent();
+
+        cloned.special = true;
+
+        return cloned;
+    }
+});
+
+var a = new My.own.A(); // alerts 'A' then alerts 'A'
+var b = new My.own.B(); // alerts 'A' then alerts 'B'
+
+var aa = a.clone();
+var bb = b.clone();
+
+alert(Ext.getClassName(aa)); // alerts 'My.own.A'
+alert(Ext.getClassName(bb)); // alerts 'My.own.B'
+
+alert(aa.rootName); // alerts 'A'
+alert(bb.rootName); // alerts 'A'
+alert(bb.special); // alerts true
+        </pre>
+        <p>
+            <button onclick="run('sample9')">Run Code</button>
+        </p>
+
+        <pre id="sample10">
+Ext.define('My.Cat', {
+    statics: {
+        totalCreated: 0,
+        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
+    },
+
+    constructor: function() {
+        var statics = this.statics();
+
+        alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to
+                                        // equivalent to: My.Cat.speciesName
+
+        alert(this.self.speciesName);   // dependent on 'this'
+
+        statics.totalCreated++;
+
+        return this;
+    },
+
+    clone: function() {
+        var cloned = new this.self;                      // dependent on 'this'
+
+        cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName
+
+        return cloned;
+    }
+});
+
+
+Ext.define('My.SnowLeopard', {
+    extend: 'My.Cat',
+
+    statics: {
+        speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
+    },
+
+    constructor: function() {
+        this.callParent();
+    }
+});
+
+var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'
+
+var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
+
+var clone = snowLeopard.clone();
+alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
+alert(clone.groupName);                 // alerts 'Cat'
+
+alert(My.Cat.totalCreated);             // alerts 3
+        </pre>
+        <p>
+            <button onclick="run('sample10')">Run Code</button>
+        </p>
+
+        <pre id="sample11">
+Ext.define('Bank', {
+    money: '$$$',
+    printMoney: function() {
+        alert('$$$$$$$');
+    }
+});
+
+Ext.define('Thief', {});
+
+Thief.borrow(Bank, ['money', 'printMoney']);
+
+var jacky = new Thief();
+
+alert(jacky.money); // alerts '$$$'
+jacky.printMoney(); // alerts '$$$$$$$'
+        </pre>
+        <p>
+            <button onclick="run('sample11')">Run Code</button>
+        </p>
+    </body>
+</html>