-Ext.ns("Ext.ux");\r
-\r
-/**\r
- * @class Ext.ux.FieldLabeler\r
- * <p>A plugin for Field Components which renders standard Ext form wrapping and labels\r
- * round the Field at render time regardless of the layout of the Container.</p>\r
- * <p>Usage:</p>\r
- * <pre><code>\r
- {\r
- xtype: 'combo',\r
- plugins: [ Ext.ux.FieldLabeler ],\r
- triggerAction: 'all',\r
- fieldLabel: 'Select type',\r
- store: typeStore\r
- }\r
- * </code></pre>\r
- */\r
-Ext.ux.FieldLabeler = (function(){\r
-\r
-// Pulls a named property down from the first ancestor Container it's found in\r
- function getParentProperty(propName) {\r
- for (var p = this.ownerCt; p; p = p.ownerCt) {\r
- if (p[propName]) {\r
- return p[propName];\r
- }\r
- }\r
- }\r
-\r
- return {\r
-\r
-// Add behaviour at important points in the Field's lifecycle.\r
- init: function(f) {\r
-// Replace the Field's onRender method with a sequence that calls the plugin's onRender after the Field's onRender\r
- f.onRender = f.onRender.createSequence(this.onRender);\r
-\r
-// We need to completely override the onResize method because of the complexity\r
- f.onResize = this.onResize;\r
-\r
-// Replace the Field's onDestroy method with a sequence that calls the plugin's onDestroy after the Field's onRender\r
- f.onDestroy = f.onDestroy.createSequence(this.onDestroy);\r
- },\r
-\r
- onRender: function() {\r
-// Do nothing if being rendered by a form layout\r
- if (this.ownerCt) {\r
- if (this.ownerCt.layout instanceof Ext.layout.FormLayout) {\r
- return;\r
- }\r
- }\r
-\r
- this.resizeEl = (this.wrap || this.el).wrap({\r
- cls: 'x-form-element',\r
- style: Ext.isIE ? 'position:absolute;top:0;left:0;overflow:visible' : ''\r
- });\r
- this.positionEl = this.itemCt = this.resizeEl.wrap({\r
- cls: 'x-form-item '\r
- });\r
- if (this.nextSibling()) {\r
- this.margins = {\r
- top: 0,\r
- right: 0,\r
- bottom: this.positionEl.getMargins('b'),\r
- left: 0\r
- };\r
- }\r
- this.actionMode = 'itemCt';\r
-\r
-// If our Container is hiding labels, then we're done!\r
- if (!Ext.isDefined(this.hideLabels)) {\r
- this.hideLabels = getParentProperty.call(this, "hideLabels");\r
- }\r
- if (this.hideLabels) {\r
- this.resizeEl.setStyle('padding-left', '0px');\r
- return;\r
- }\r
-\r
-// Collect the info we need to render the label from our Container.\r
- if (!Ext.isDefined(this.labelSeparator)) {\r
- this.labelSeparator = getParentProperty.call(this, "labelSeparator");\r
- }\r
- if (!Ext.isDefined(this.labelPad)) {\r
- this.labelPad = getParentProperty.call(this, "labelPad");\r
- }\r
- if (!Ext.isDefined(this.labelAlign)) {\r
- this.labelAlign = getParentProperty.call(this, "labelAlign") || 'left';\r
- }\r
- this.itemCt.addClass('x-form-label-' + this.labelAlign);\r
-\r
- if(this.labelAlign == 'top'){\r
- if (!this.labelWidth) {\r
- this.labelWidth = 'auto';\r
- }\r
- this.resizeEl.setStyle('padding-left', '0px');\r
- } else {\r
- if (!Ext.isDefined(this.labelWidth)) {\r
- this.labelWidth = getParentProperty.call(this, "labelWidth") || 100;\r
- }\r
- this.resizeEl.setStyle('padding-left', (this.labelWidth + (this.labelPad || 5)) + 'px');\r
- this.labelWidth += 'px';\r
- }\r
-\r
- this.label = this.itemCt.insertFirst({\r
- tag: 'label',\r
- cls: 'x-form-item-label',\r
- style: {\r
- width: this.labelWidth\r
- },\r
- html: this.fieldLabel + (this.labelSeparator || ':')\r
- });\r
- },\r
-\r
-// private\r
-// Ensure the input field is sized to fit in the content area of the resizeEl (to the right of its padding-left)\r
-// We perform all necessary sizing here. We do NOT call the current class's onResize because we need this control\r
-// we skip that and go up the hierarchy to Ext.form.Field\r
- onResize: function(w, h) {\r
- Ext.form.Field.prototype.onResize.apply(this, arguments);\r
- w -= this.resizeEl.getPadding('l');\r
- if (this.getTriggerWidth) {\r
- this.wrap.setWidth(w);\r
- this.el.setWidth(w - this.getTriggerWidth());\r
- } else {\r
- this.el.setWidth(w);\r
- }\r
- if (this.el.dom.tagName.toLowerCase() == 'textarea') {\r
- var h = this.resizeEl.getHeight(true);\r
- if (!this.hideLabels && (this.labelAlign == 'top')) {\r
- h -= this.label.getHeight();\r
- }\r
- this.el.setHeight(h);\r
- }\r
- },\r
-\r
-// private\r
-// Ensure that we clean up on destroy.\r
- onDestroy: function() {\r
- this.itemCt.remove();\r
- }\r
- };\r
+Ext.ns("Ext.ux");
+
+/**
+ * @class Ext.ux.FieldLabeler
+ * <p>A plugin for Field Components which renders standard Ext form wrapping and labels
+ * round the Field at render time regardless of the layout of the Container.</p>
+ * <p>Usage:</p>
+ * <pre><code>
+ {
+ xtype: 'combo',
+ plugins: [ Ext.ux.FieldLabeler ],
+ triggerAction: 'all',
+ fieldLabel: 'Select type',
+ store: typeStore
+ }
+ * </code></pre>
+ */
+Ext.ux.FieldLabeler = (function(){
+
+// Pulls a named property down from the first ancestor Container it's found in
+ function getParentProperty(propName) {
+ for (var p = this.ownerCt; p; p = p.ownerCt) {
+ if (p[propName]) {
+ return p[propName];
+ }
+ }
+ }
+
+ return {
+
+// Add behaviour at important points in the Field's lifecycle.
+ init: function(f) {
+// Replace the Field's onRender method with a sequence that calls the plugin's onRender after the Field's onRender
+ f.onRender = f.onRender.createSequence(this.onRender);
+
+// We need to completely override the onResize method because of the complexity
+ f.onResize = this.onResize;
+
+// Replace the Field's onDestroy method with a sequence that calls the plugin's onDestroy after the Field's onRender
+ f.onDestroy = f.onDestroy.createSequence(this.onDestroy);
+ },
+
+ onRender: function() {
+// Do nothing if being rendered by a form layout
+ if (this.ownerCt) {
+ if (this.ownerCt.layout instanceof Ext.layout.FormLayout) {
+ return;
+ }
+ }
+
+ this.resizeEl = (this.wrap || this.el).wrap({
+ cls: 'x-form-element',
+ style: (Ext.isIE || Ext.isOpera) ? 'position:absolute;top:0;left:0;overflow:visible' : ''
+ });
+ this.positionEl = this.itemCt = this.resizeEl.wrap({
+ cls: 'x-form-item '
+ });
+ if (this.nextSibling()) {
+ this.margins = {
+ top: 0,
+ right: 0,
+ bottom: this.positionEl.getMargins('b'),
+ left: 0
+ };
+ }
+ this.actionMode = 'itemCt';
+
+// If our Container is hiding labels, then we're done!
+ if (!Ext.isDefined(this.hideLabels)) {
+ this.hideLabels = getParentProperty.call(this, "hideLabels");
+ }
+ if (this.hideLabels) {
+ this.resizeEl.setStyle('padding-left', '0px');
+ return;
+ }
+
+// Collect the info we need to render the label from our Container.
+ if (!Ext.isDefined(this.labelSeparator)) {
+ this.labelSeparator = getParentProperty.call(this, "labelSeparator");
+ }
+ if (!Ext.isDefined(this.labelPad)) {
+ this.labelPad = getParentProperty.call(this, "labelPad");
+ }
+ if (!Ext.isDefined(this.labelAlign)) {
+ this.labelAlign = getParentProperty.call(this, "labelAlign") || 'left';
+ }
+ this.itemCt.addClass('x-form-label-' + this.labelAlign);
+
+ if(this.labelAlign == 'top'){
+ if (!this.labelWidth) {
+ this.labelWidth = 'auto';
+ }
+ this.resizeEl.setStyle('padding-left', '0px');
+ } else {
+ if (!Ext.isDefined(this.labelWidth)) {
+ this.labelWidth = getParentProperty.call(this, "labelWidth") || 100;
+ }
+ this.resizeEl.setStyle('padding-left', (this.labelWidth + (this.labelPad || 5)) + 'px');
+ this.labelWidth += 'px';
+ }
+
+ this.label = this.itemCt.insertFirst({
+ tag: 'label',
+ cls: 'x-form-item-label',
+ style: {
+ width: this.labelWidth
+ },
+ html: this.fieldLabel + (this.labelSeparator || ':')
+ });
+ },
+
+// private
+// Ensure the input field is sized to fit in the content area of the resizeEl (to the right of its padding-left)
+// We perform all necessary sizing here. We do NOT call the current class's onResize because we need this control
+// we skip that and go up the hierarchy to Ext.form.Field
+ onResize: function(w, h) {
+ Ext.form.Field.prototype.onResize.apply(this, arguments);
+ w -= this.resizeEl.getPadding('l');
+ if (this.getTriggerWidth) {
+ this.wrap.setWidth(w);
+ this.el.setWidth(w - this.getTriggerWidth());
+ } else {
+ this.el.setWidth(w);
+ }
+ if (this.el.dom.tagName.toLowerCase() == 'textarea') {
+ var h = this.resizeEl.getHeight(true);
+ if (!this.hideLabels && (this.labelAlign == 'top')) {
+ h -= this.label.getHeight();
+ }
+ this.el.setHeight(h);
+ }
+ },
+
+// private
+// Ensure that we clean up on destroy.
+ onDestroy: function() {
+ this.itemCt.remove();
+ }
+ };
git.ithinksw.org / extjs.git / blobdiff