extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/layout/component/field/FieldContainer.js

@@ -0,0 +1,48 @@
+/**
+ * @private
+ */
+Ext.define('Ext.layout.component.field.FieldContainer', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.layout.component.field.Field',
+
+    alias: 'layout.fieldcontainer',
+
+    /* End Definitions */
+
+    type: 'fieldcontainer',
+
+    waitForOuterHeightInDom: true,
+    waitForOuterWidthInDom: true,
+
+    beginLayout: function(ownerContext) {
+        this.callParent(arguments);
+
+        // Tell Component.measureAutoDimensions to measure the DOM when containerChildrenDone is true
+        ownerContext.hasRawContent = true;
+        ownerContext.target.bodyEl.setStyle('height', '');
+    },
+
+    measureContentHeight: function (ownerContext) {
+        // since we are measuring the outer el, we have to wait for whatever is in our
+        // container to be flushed to the DOM... especially for things like box layouts
+        // that size the innerCt since that is all that will contribute to our size!
+        return ownerContext.hasDomProp('containerLayoutDone') ? this.callParent(arguments) : NaN;
+    },
+
+    measureContentWidth: function (ownerContext) {
+        // see measureContentHeight
+        return ownerContext.hasDomProp('containerLayoutDone') ? this.callParent(arguments) : NaN;
+    },
+
+    publishInnerWidth: function (ownerContext, width) {
+        var bodyContext = ownerContext.bodyCellContext;
+        bodyContext.setWidth(bodyContext.el.getWidth(), false);
+    },
+    
+    publishInnerHeight: function (ownerContext, height) {
+        var bodyContext = ownerContext.bodyCellContext;
+        bodyContext.setHeight(height - this.measureLabelErrorHeight(ownerContext));
+    }
+});

data/app/assets/javascripts/extjs-rails/src/layout/component/field/HtmlEditor.js

@@ -0,0 +1,54 @@
+/**
+ * Layout class for {@link Ext.form.field.HtmlEditor} fields. Sizes the toolbar, textarea, and iframe elements.
+ * @private
+ */
+Ext.define('Ext.layout.component.field.HtmlEditor', {
+    extend: 'Ext.layout.component.field.Field',
+    alias: ['layout.htmleditor'],
+
+    type: 'htmleditor',
+
+    // Flags to say that the item is autosizing itself.
+    toolbarSizePolicy: {
+        setsWidth: 0,
+        setsHeight: 0
+    },
+
+    beginLayout: function(ownerContext) {
+        this.callParent(arguments);
+
+        ownerContext.textAreaContext = ownerContext.getEl('textareaEl');
+        ownerContext.iframeContext   = ownerContext.getEl('iframeEl');
+        ownerContext.toolbarContext  = ownerContext.context.getCmp(this.owner.getToolbar());
+    },
+
+    getItemSizePolicy: function (item) {
+        // we are only ever called by the toolbar
+        return this.toolbarSizePolicy;
+    },
+
+    getLayoutItems: function () {
+        var toolbar = this.owner.getToolbar();
+        // The toolbar may not exist if we're destroying
+        return toolbar ? [toolbar] : [];
+    },
+
+    getRenderTarget: function() {
+        return this.owner.bodyEl;
+    },
+
+    publishInnerHeight: function (ownerContext, height) {
+        var me = this,
+            innerHeight = height - me.measureLabelErrorHeight(ownerContext) -
+                          ownerContext.toolbarContext.getProp('height') -
+                          ownerContext.bodyCellContext.getPaddingInfo().height;
+
+        // If the Toolbar has not acheieved a height yest, we are not done laying out.
+        if (Ext.isNumber(innerHeight)) {
+            ownerContext.textAreaContext.setHeight(innerHeight);
+            ownerContext.iframeContext.setHeight(innerHeight);
+        } else {
+            me.done = false;
+        }
+    }
+});

data/app/assets/javascripts/extjs-rails/src/layout/component/field/Slider.js

@@ -0,0 +1,58 @@
+/**
+ * @private
+ */
+Ext.define('Ext.layout.component.field.Slider', {
+
+    /* Begin Definitions */
+
+    alias: ['layout.sliderfield'],
+
+    extend: 'Ext.layout.component.field.Field',
+
+    /* End Definitions */
+
+    type: 'sliderfield',
+
+    beginLayout: function(ownerContext) {
+        this.callParent(arguments);
+
+        ownerContext.endElContext   = ownerContext.getEl('endEl');
+        ownerContext.innerElContext = ownerContext.getEl('innerEl');
+        ownerContext.bodyElContext  = ownerContext.getEl('bodyEl');
+    },
+
+    publishInnerHeight: function (ownerContext, height) {
+        var innerHeight = height - this.measureLabelErrorHeight(ownerContext),
+            endElPad,
+            inputPad;
+        if (this.owner.vertical) {
+            endElPad = ownerContext.endElContext.getPaddingInfo();
+            inputPad = ownerContext.inputContext.getPaddingInfo();
+            ownerContext.innerElContext.setHeight(innerHeight - inputPad.height - endElPad.height);
+        } else {
+            ownerContext.bodyElContext.setHeight(innerHeight);
+        }
+    },
+
+    publishInnerWidth: function (ownerContext, width) {
+        if (!this.owner.vertical) {
+            var endElPad = ownerContext.endElContext.getPaddingInfo(),
+                inputPad = ownerContext.inputContext.getPaddingInfo();
+
+            ownerContext.innerElContext.setWidth(width - inputPad.left - endElPad.right - ownerContext.labelContext.getProp('width'));
+        }
+    },
+
+    beginLayoutFixed: function(ownerContext, width, suffix) {
+        var me = this,
+            ieInputWidthAdjustment = me.ieInputWidthAdjustment;
+
+        if (ieInputWidthAdjustment) {
+            // adjust for IE 6/7 strict content-box model
+            // RTL: This might have to be padding-left unless the senses of the padding styles switch when in RTL mode.
+            me.owner.bodyEl.setStyle('padding-right', ieInputWidthAdjustment + 'px');
+        }
+
+        me.callParent(arguments);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/layout/component/field/Text.js

@@ -0,0 +1,75 @@
+/**
+ * Layout class for {@link Ext.form.field.Text} fields. Handles sizing the input field.
+ * @private
+ */
+Ext.define('Ext.layout.component.field.Text', {
+    extend: 'Ext.layout.component.field.Field',
+    alias: 'layout.textfield',
+    requires: ['Ext.util.TextMetrics'],
+
+    type: 'textfield',
+    
+    canGrowWidth: true,
+
+    beginLayoutCycle: function(ownerContext) {
+        var me = this;
+        
+        me.callParent(arguments);
+        
+        // Clear height, in case a previous layout cycle stretched it.
+        if (ownerContext.shrinkWrap) {
+            ownerContext.inputContext.el.setStyle('height', '');
+        }
+    },
+
+    measureContentWidth: function (ownerContext) {
+        var me = this,
+            owner = me.owner,
+            width = me.callParent(arguments),
+            inputContext = ownerContext.inputContext,
+            inputEl, value, calcWidth, max, min;
+
+        if (owner.grow && me.canGrowWidth && !ownerContext.state.growHandled) {
+            inputEl = owner.inputEl;
+
+            // Find the width that contains the whole text value
+            value = Ext.util.Format.htmlEncode(inputEl.dom.value || (owner.hasFocus ? '' : owner.emptyText) || '');
+            value += owner.growAppend;
+            calcWidth = inputEl.getTextWidth(value) + inputContext.getFrameInfo().width;
+
+            max = owner.growMax;
+            min = Math.min(max, width);
+            max = Math.max(owner.growMin, max, min);
+
+            // Constrain
+            calcWidth = Ext.Number.constrain(calcWidth, owner.growMin, max);
+            inputContext.setWidth(calcWidth);
+            ownerContext.state.growHandled = true;
+            
+            // Now that we've set the inputContext, we need to recalculate the width
+            inputContext.domBlock(me, 'width');
+            width = NaN;
+        }
+        return width;
+    },
+    
+    publishInnerHeight: function(ownerContext, height) {
+        ownerContext.inputContext.setHeight(height - this.measureLabelErrorHeight(ownerContext));
+    },
+
+    beginLayoutFixed: function(ownerContext, width, suffix) {
+        var me = this,
+            ieInputWidthAdjustment = me.ieInputWidthAdjustment;
+
+        if (ieInputWidthAdjustment) {
+            // adjust for IE 6/7 strict content-box model
+            // RTL: This might have to be padding-left unless the senses of the padding styles switch when in RTL mode.
+            me.owner.bodyEl.setStyle('padding-right', ieInputWidthAdjustment + 'px');
+            if(suffix === 'px') {
+                width -= ieInputWidthAdjustment;
+            }
+        }
+
+        me.callParent(arguments);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/layout/component/field/TextArea.js

@@ -0,0 +1,51 @@
+/**
+ * Layout class for {@link Ext.form.field.TextArea} fields. Handles sizing the textarea field.
+ * @private
+ */
+Ext.define('Ext.layout.component.field.TextArea', {
+    extend: 'Ext.layout.component.field.Text',
+    alias: 'layout.textareafield',
+
+    type: 'textareafield',
+    
+    canGrowWidth: false,
+    
+    beginLayout: function(ownerContext){
+        this.callParent(arguments);
+        ownerContext.target.inputEl.setStyle('height', '');
+    },
+
+    measureContentHeight: function (ownerContext) {
+        var me = this,
+            owner = me.owner,
+            height = me.callParent(arguments),
+            inputContext, inputEl, value, max, curWidth, calcHeight;
+
+        if (owner.grow && !ownerContext.state.growHandled) {
+            inputContext = ownerContext.inputContext;
+            inputEl = owner.inputEl;
+            curWidth = inputEl.getWidth(true); //subtract border/padding to get the available width for the text
+
+            // Get and normalize the field value for measurement
+            value = Ext.util.Format.htmlEncode(inputEl.dom.value) || ' ';
+            value += owner.growAppend;
+            
+            // Translate newlines to <br> tags
+            value = value.replace(/\n/g, '<br/>');
+
+            // Find the height that contains the whole text value
+            calcHeight = Ext.util.TextMetrics.measure(inputEl, value, curWidth).height +
+                         inputContext.getBorderInfo().height + inputContext.getPaddingInfo().height;
+
+            // Constrain
+            calcHeight = Ext.Number.constrain(calcHeight, owner.growMin, owner.growMax);
+            inputContext.setHeight(calcHeight);
+            ownerContext.state.growHandled = true;
+            
+            // Now that we've set the inputContext, we need to recalculate the width
+            inputContext.domBlock(me, 'height');
+            height = NaN;
+        }
+        return height;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/layout/component/field/Trigger.js

@@ -0,0 +1,132 @@
+/**
+ * Layout class for {@link Ext.form.field.Trigger} fields. Adjusts the input field size to accommodate
+ * the trigger button(s).
+ * @private
+ */
+Ext.define('Ext.layout.component.field.Trigger', {
+
+    /* Begin Definitions */
+
+    alias: 'layout.triggerfield',
+
+    extend: 'Ext.layout.component.field.Field',
+
+    /* End Definitions */
+
+    type: 'triggerfield',
+
+    beginLayout: function(ownerContext) {
+        var me = this,
+            owner = me.owner,
+            flags;
+
+        ownerContext.triggerWrap = ownerContext.getEl('triggerWrap');
+
+        me.callParent(arguments);
+
+        // if any of these important states have changed, sync them now:
+        flags = owner.getTriggerStateFlags();
+        if (flags != owner.lastTriggerStateFlags) {
+            owner.lastTriggerStateFlags = flags;
+            me.updateEditState();
+        }
+    },
+
+    beginLayoutFixed: function (ownerContext, width, suffix) {
+        var me = this,
+            owner = ownerContext.target,
+            ieInputWidthAdjustment = me.ieInputWidthAdjustment,
+            inputWidth = '100%';
+
+        me.callParent(arguments);
+
+        owner.inputCell.setStyle('width', '100%');
+        if(ieInputWidthAdjustment) {
+            // adjust for IE 6/7 strict content-box model
+            // RTL: This might have to be padding-left unless the senses of the padding styles switch when in RTL mode.
+            owner.inputCell.setStyle('padding-right', ieInputWidthAdjustment + 'px');
+            if(suffix === 'px') {
+                inputWidth = width - ieInputWidthAdjustment - owner.getTriggerWidth();
+            }
+        }
+        owner.inputEl.setStyle('width', inputWidth);
+        owner.triggerWrap.setStyle('width', width + suffix);
+        owner.triggerWrap.setStyle('table-layout', 'fixed');
+    },
+
+    beginLayoutShrinkWrap: function (ownerContext) {
+        var owner = ownerContext.target,
+            emptyString = '';
+
+        this.callParent(arguments);
+
+        owner.triggerWrap.setStyle('width', emptyString);
+        owner.inputCell.setStyle('width', emptyString);
+        owner.inputEl.setStyle('width', emptyString);
+        owner.triggerWrap.setStyle('table-layout', 'auto');
+    },
+
+    getTextWidth: function () {
+        var me = this,
+            owner = me.owner,
+            inputEl = owner.inputEl,
+            value;
+
+        // Find the width that contains the whole text value
+        value = (inputEl.dom.value || (owner.hasFocus ? '' : owner.emptyText) || '') + owner.growAppend;
+        return inputEl.getTextWidth(value);
+    },
+
+    measureContentWidth: function (ownerContext) {
+        var me = this,
+            owner = me.owner,
+            width = me.callParent(arguments),
+            inputContext = ownerContext.inputContext,
+            calcWidth, max, min;
+
+        if (owner.grow && !ownerContext.state.growHandled) {
+            calcWidth = me.getTextWidth() + ownerContext.inputContext.getFrameInfo().width;
+
+            max = owner.growMax;
+            min = Math.min(max, width);
+            max = Math.max(owner.growMin, max, min);
+
+            // Constrain
+            calcWidth = Ext.Number.constrain(calcWidth, owner.growMin, max);
+            inputContext.setWidth(calcWidth);
+            ownerContext.state.growHandled = true;
+            
+            // Now that we've set the inputContext, we need to recalculate the width
+            inputContext.domBlock(me, 'width');
+            width = NaN;
+        }
+        return width;
+    },
+
+    updateEditState: function() {
+        var me = this,
+            owner = me.owner,
+            inputEl = owner.inputEl,
+            noeditCls = Ext.baseCSSPrefix + 'trigger-noedit',
+            displayed,
+            readOnly;
+
+        if (me.owner.readOnly) {
+            inputEl.addCls(noeditCls);
+            readOnly = true;
+            displayed = false;
+        } else {
+            if (me.owner.editable) {
+                inputEl.removeCls(noeditCls);
+                readOnly = false;
+            } else {
+                inputEl.addCls(noeditCls);
+                readOnly = true;
+            }
+            displayed = !me.owner.hideTrigger;
+        }
+
+        owner.triggerCell.setDisplayed(displayed);
+        inputEl.dom.readOnly = readOnly;
+    }
+});

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

@@ -0,0 +1,121 @@
+/**
+ * This is a layout that inherits the anchoring of {@link Ext.layout.container.Anchor} and adds the
+ * ability for x/y positioning using the standard x and y component config options.
+ *
+ * This class is intended to be extended or created via the {@link Ext.container.Container#layout layout}
+ * configuration property.  See {@link Ext.container.Container#layout} for additional details.
+ *
+ *     @example
+ *     Ext.create('Ext.form.Panel', {
+ *         title: 'Absolute Layout',
+ *         width: 300,
+ *         height: 275,
+ *         layout: {
+ *             type: 'absolute'
+ *             // layout-specific configs go here
+ *             //itemCls: 'x-abs-layout-item',
+ *         },
+ *         url:'save-form.php',
+ *         defaultType: 'textfield',
+ *         items: [{
+ *             x: 10,
+ *             y: 10,
+ *             xtype:'label',
+ *             text: 'Send To:'
+ *         },{
+ *             x: 80,
+ *             y: 10,
+ *             name: 'to',
+ *             anchor:'90%'  // anchor width by percentage
+ *         },{
+ *             x: 10,
+ *             y: 40,
+ *             xtype:'label',
+ *             text: 'Subject:'
+ *         },{
+ *             x: 80,
+ *             y: 40,
+ *             name: 'subject',
+ *             anchor: '90%'  // anchor width by percentage
+ *         },{
+ *             x:0,
+ *             y: 80,
+ *             xtype: 'textareafield',
+ *             name: 'msg',
+ *             anchor: '100% 100%'  // anchor width and height
+ *         }],
+ *         renderTo: Ext.getBody()
+ *     });
+ */
+Ext.define('Ext.layout.container.Absolute', {
+
+    /* Begin Definitions */
+
+    alias: 'layout.absolute',
+    extend: 'Ext.layout.container.Anchor',
+    alternateClassName: 'Ext.layout.AbsoluteLayout',
+
+    /* End Definitions */
+
+    targetCls: Ext.baseCSSPrefix + 'abs-layout-ct',
+    itemCls: Ext.baseCSSPrefix + 'abs-layout-item',
+
+    /**
+     * @cfg {Boolean} ignoreOnContentChange
+     * True indicates that changes to one item in this layout do not effect the layout in
+     * general. This may need to be set to false if {@link Ext.AbstractComponent#autoScroll}
+     * is enabled for the container.
+     */
+    ignoreOnContentChange: true,
+
+    type: 'absolute',
+
+    // private
+    adjustWidthAnchor: function(value, childContext) {
+        var padding = this.targetPadding,
+            x = childContext.getStyle('left');
+
+        return value - x + padding.left;
+    },
+
+    // private
+    adjustHeightAnchor: function(value, childContext) {
+        var padding = this.targetPadding,
+            y = childContext.getStyle('top');
+
+        return value - y + padding.top;
+    },
+
+    isItemLayoutRoot: function (item) {
+        return this.ignoreOnContentChange || this.callParent(arguments);
+    },
+
+    isItemShrinkWrap: function (item) {
+        return true;
+    },
+
+    beginLayout: function (ownerContext) {
+        var me = this,
+            target = me.getTarget();
+
+        me.callParent(arguments);
+
+        // Do not set position: relative; when the absolute layout target is the body
+        if (target.dom !== document.body) {
+            target.position();
+        }
+
+        me.targetPadding = ownerContext.targetContext.getPaddingInfo();
+    },
+
+    isItemBoxParent: function (itemContext) {
+        return true;
+    },
+
+    onContentChange: function () {
+        if (this.ignoreOnContentChange) {
+            return false;
+        }
+        return this.callParent(arguments);
+    }
+});