200 lines
No EOL
7.4 KiB
HTML
200 lines
No EOL
7.4 KiB
HTML
<html><head><title>Layout.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>Layout.js</h1><pre class="highlighted"><code><i>/**
|
|
* @class Ext.form.Layout
|
|
* @extends Ext.Component
|
|
* Creates a container <b>for</b> layout and rendering of fields <b>in</b> an {@link Ext.form.Form}.
|
|
* @constructor
|
|
* @param {Object} config Configuration options
|
|
*/</i>
|
|
Ext.form.Layout = <b>function</b>(config){
|
|
Ext.form.Layout.superclass.constructor.call(<b>this</b>, config);
|
|
<b>this</b>.stack = [];
|
|
};
|
|
|
|
Ext.extend(Ext.form.Layout, Ext.Component, {
|
|
<i>/**
|
|
* @cfg {String/Object} autoCreate
|
|
* A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {String/Object/Function} style
|
|
* A style specification string eg "width:100px", or object <b>in</b> the form {width:"100px"}, or
|
|
* a <b>function</b> which returns such a specification.
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {String} labelAlign
|
|
* Valid values are "left," "top" and "right" (defaults to "left")
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {Number} labelWidth
|
|
* Fixed width <b>in</b> pixels of all field labels (defaults to undefined)
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {Boolean} clear
|
|
* True to add a clearing element at the end of <b>this</b> layout, equivalent to CSS clear: both (defaults to true)
|
|
*/</i>
|
|
clear : true,
|
|
<i>/**
|
|
* @cfg {String} labelSeparator
|
|
* The separator to use after field labels (defaults to ':')
|
|
*/</i>
|
|
labelSeparator : ':',
|
|
<i>/**
|
|
* @cfg {Boolean} hideLabels
|
|
* True to suppress the display of field labels <b>in</b> this layout (defaults to false)
|
|
*/</i>
|
|
hideLabels : false,
|
|
|
|
<i>// private</i>
|
|
defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
|
|
|
|
<i>// private</i>
|
|
onRender : <b>function</b>(ct, position){
|
|
<b>if</b>(this.el){ <i>// from markup</i>
|
|
<b>this</b>.el = Ext.get(<b>this</b>.el);
|
|
}<b>else</b> { <i>// generate</i>
|
|
<b>var</b> cfg = <b>this</b>.getAutoCreate();
|
|
<b>this</b>.el = ct.createChild(cfg, position);
|
|
}
|
|
<b>if</b>(this.style){
|
|
<b>this</b>.el.applyStyles(<b>this</b>.style);
|
|
}
|
|
<b>if</b>(this.labelAlign){
|
|
<b>this</b>.el.addClass('x-form-label-'+<b>this</b>.labelAlign);
|
|
}
|
|
<b>if</b>(this.hideLabels){
|
|
<b>this</b>.labelStyle = "display:none";
|
|
<b>this</b>.elementStyle = "padding-left:0;";
|
|
}<b>else</b>{
|
|
<b>if</b>(typeof <b>this</b>.labelWidth == 'number'){
|
|
<b>this</b>.labelStyle = "width:"+<b>this</b>.labelWidth+"px;";
|
|
<b>this</b>.elementStyle = "padding-left:"+((<b>this</b>.labelWidth+(<b>typeof</b> this.labelPad == 'number' ? <b>this</b>.labelPad : 5))+'px')+";";
|
|
}
|
|
<b>if</b>(this.labelAlign == 'top'){
|
|
<b>this</b>.labelStyle = "width:auto;";
|
|
<b>this</b>.elementStyle = "padding-left:0;";
|
|
}
|
|
}
|
|
<b>var</b> stack = <b>this</b>.stack;
|
|
<b>var</b> slen = stack.length;
|
|
<b>if</b>(slen > 0){
|
|
<b>if</b>(!<b>this</b>.fieldTpl){
|
|
<b>var</b> t = <b>new</b> Ext.Template(
|
|
'<div class="x-form-item {5}">',
|
|
'<label <b>for</b>="{0}" style="{2}">{1}{4}</label>',
|
|
'<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
|
|
'</div>',
|
|
'</div><div class="x-form-clear-left"></div>'
|
|
);
|
|
t.disableFormats = true;
|
|
t.compile();
|
|
Ext.form.Layout.prototype.fieldTpl = t;
|
|
}
|
|
<b>for</b>(var i = 0; i < slen; i++) {
|
|
<b>if</b>(stack[i].isFormField){
|
|
<b>this</b>.renderField(stack[i]);
|
|
}<b>else</b>{
|
|
<b>this</b>.renderComponent(stack[i]);
|
|
}
|
|
}
|
|
}
|
|
<b>if</b>(this.clear){
|
|
<b>this</b>.el.createChild({cls:'x-form-clear'});
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
renderField : <b>function</b>(f){
|
|
<b>this</b>.fieldTpl.append(<b>this</b>.el, [
|
|
f.id, f.fieldLabel,
|
|
f.labelStyle||<b>this</b>.labelStyle||'',
|
|
<b>this</b>.elementStyle||'',
|
|
<b>typeof</b> f.labelSeparator == 'undefined' ? <b>this</b>.labelSeparator : f.labelSeparator,
|
|
f.itemCls||<b>this</b>.itemCls||''
|
|
]);
|
|
},
|
|
|
|
<i>// private</i>
|
|
renderComponent : <b>function</b>(c){
|
|
c.render(<b>this</b>.el);
|
|
}
|
|
});
|
|
|
|
<i>/**
|
|
* @class Ext.form.Column
|
|
* @extends Ext.form.Layout
|
|
* Creates a column container <b>for</b> layout and rendering of fields <b>in</b> an {@link Ext.form.Form}.
|
|
* @constructor
|
|
* @param {Object} config Configuration options
|
|
*/</i>
|
|
Ext.form.Column = <b>function</b>(config){
|
|
Ext.form.Column.superclass.constructor.call(<b>this</b>, config);
|
|
};
|
|
|
|
Ext.extend(Ext.form.Column, Ext.form.Layout, {
|
|
<i>/**
|
|
* @cfg {Number} width
|
|
* The fixed width of the column <b>in</b> pixels (defaults to auto)
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {String/Object} autoCreate
|
|
* A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
|
|
*/</i>
|
|
|
|
<i>// private</i>
|
|
defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
|
|
|
|
<i>// private</i>
|
|
onRender : <b>function</b>(ct, position){
|
|
Ext.form.Column.superclass.onRender.call(<b>this</b>, ct, position);
|
|
<b>if</b>(this.width){
|
|
<b>this</b>.el.setWidth(<b>this</b>.width);
|
|
}
|
|
}
|
|
});
|
|
|
|
<i>/**
|
|
* @class Ext.form.FieldSet
|
|
* @extends Ext.form.Layout
|
|
* Creates a fieldset container <b>for</b> layout and rendering of fields <b>in</b> an {@link Ext.form.Form}.
|
|
* @constructor
|
|
* @param {Object} config Configuration options
|
|
*/</i>
|
|
Ext.form.FieldSet = <b>function</b>(config){
|
|
Ext.form.FieldSet.superclass.constructor.call(<b>this</b>, config);
|
|
};
|
|
|
|
Ext.extend(Ext.form.FieldSet, Ext.form.Layout, {
|
|
<i>/**
|
|
* @cfg {String} legend
|
|
* The text to display as the legend <b>for</b> the FieldSet (defaults to '')
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {String/Object} autoCreate
|
|
* A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
|
|
*/</i>
|
|
|
|
<i>// private</i>
|
|
defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
|
|
|
|
<i>// private</i>
|
|
onRender : <b>function</b>(ct, position){
|
|
Ext.form.FieldSet.superclass.onRender.call(<b>this</b>, ct, position);
|
|
<b>if</b>(this.legend){
|
|
<b>this</b>.setLegend(<b>this</b>.legend);
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
setLegend : <b>function</b>(text){
|
|
<b>if</b>(this.rendered){
|
|
<b>this</b>.el.child('legend').update(text);
|
|
}
|
|
}
|
|
});</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
|
</body></html> |