webgui/www/extras/extjs/docs/output/Layout.jss.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 &quot;width:100px&quot;, or object <b>in</b> the form {width:&quot;100px&quot;}, or
* a <b>function</b> which returns such a specification.
*/</i>
<i>// holder</i>
<i>/***
* @cfg {String} labelAlign
* Valid values are &quot;left,&quot; &quot;top&quot; and &quot;right&quot; (defaults to &quot;left&quot;)
*/</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 = &quot;display:none&quot;;
<b>this</b>.elementStyle = &quot;padding-left:0;&quot;;
}<b>else</b>{
<b>if</b>(typeof <b>this</b>.labelWidth == 'number'){
<b>this</b>.labelStyle = &quot;width:&quot;+<b>this</b>.labelWidth+&quot;px;&quot;;
<b>this</b>.elementStyle = &quot;padding-left:&quot;+((<b>this</b>.labelWidth+(<b>typeof</b> this.labelPad == 'number' ? <b>this</b>.labelPad : 5))+'px')+&quot;;&quot;;
}
<b>if</b>(this.labelAlign == 'top'){
<b>this</b>.labelStyle = &quot;width:auto;&quot;;
<b>this</b>.elementStyle = &quot;padding-left:0;&quot;;
}
}
<b>var</b> stack = <b>this</b>.stack;
<b>var</b> slen = stack.length;
<b>if</b>(slen &gt; 0){
<b>if</b>(!<b>this</b>.fieldTpl){
<b>var</b> t = <b>new</b> Ext.Template(
'&lt;div class=&quot;x-form-item {5}&quot;&gt;',
'&lt;label <b>for</b>=&quot;{0}&quot; style=&quot;{2}&quot;&gt;{1}{4}&lt;/label&gt;',
'&lt;div class=&quot;x-form-element&quot; id=&quot;x-form-el-{0}&quot; style=&quot;{3}&quot;&gt;',
'&lt;/div&gt;',
'&lt;/div&gt;&lt;div class=&quot;x-form-clear-left&quot;&gt;&lt;/div&gt;'
);
t.disableFormats = true;
t.compile();
Ext.form.Layout.prototype.fieldTpl = t;
}
<b>for</b>(var i = 0; i &lt; 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 &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
</body></html>