tvheadend/vendor/ext-3.4.1/docs/source/Form.html
Adam Sutton bafcfff42d webui: restructure webui/extjs source files
I want to keep the 3rd-party packages away from the main source
where possible.
2013-06-03 17:11:01 +01:00

372 lines
16 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-form-FormPanel-method-constructor'><span id='Ext-form-FormPanel'>/**
</span></span> * @class Ext.form.FormPanel
* @extends Ext.Panel
* &lt;p&gt;Standard form container.&lt;/p&gt;
*
* &lt;p&gt;&lt;b&gt;&lt;u&gt;Layout&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
* &lt;p&gt;By default, FormPanel is configured with &lt;tt&gt;layout:'form'&lt;/tt&gt; to use an {@link Ext.layout.FormLayout}
* layout manager, which styles and renders fields and labels correctly. When nesting additional Containers
* within a FormPanel, you should ensure that any descendant Containers which host input Fields use the
* {@link Ext.layout.FormLayout} layout manager.&lt;/p&gt;
*
* &lt;p&gt;&lt;b&gt;&lt;u&gt;BasicForm&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
* &lt;p&gt;Although &lt;b&gt;not listed&lt;/b&gt; as configuration options of FormPanel, the FormPanel class accepts all
* of the config options required to configure its internal {@link Ext.form.BasicForm} for:
* &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
* &lt;li&gt;{@link Ext.form.BasicForm#fileUpload file uploads}&lt;/li&gt;
* &lt;li&gt;functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form&lt;/li&gt;
* &lt;/ul&gt;&lt;/div&gt;
*
* &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: If subclassing FormPanel, any configuration options for the BasicForm must be applied to
* the &lt;tt&gt;&lt;b&gt;initialConfig&lt;/b&gt;&lt;/tt&gt; property of the FormPanel. Applying {@link Ext.form.BasicForm BasicForm}
* configuration settings to &lt;b&gt;&lt;tt&gt;this&lt;/tt&gt;&lt;/b&gt; will &lt;b&gt;not&lt;/b&gt; affect the BasicForm's configuration.&lt;/p&gt;
*
* &lt;p&gt;&lt;b&gt;&lt;u&gt;Form Validation&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
* &lt;p&gt;For information on form validation see the following:&lt;/p&gt;
* &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
* &lt;li&gt;{@link Ext.form.TextField}&lt;/li&gt;
* &lt;li&gt;{@link Ext.form.VTypes}&lt;/li&gt;
* &lt;li&gt;{@link Ext.form.BasicForm#doAction BasicForm.doAction &lt;b&gt;clientValidation&lt;/b&gt; notes}&lt;/li&gt;
* &lt;li&gt;&lt;tt&gt;{@link Ext.form.FormPanel#monitorValid monitorValid}&lt;/tt&gt;&lt;/li&gt;
* &lt;/ul&gt;&lt;/div&gt;
*
* &lt;p&gt;&lt;b&gt;&lt;u&gt;Form Submission&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
* &lt;p&gt;By default, Ext Forms are submitted through Ajax, using {@link Ext.form.Action}. To enable normal browser
* submission of the {@link Ext.form.BasicForm BasicForm} contained in this FormPanel, see the
* &lt;tt&gt;&lt;b&gt;{@link Ext.form.BasicForm#standardSubmit standardSubmit}&lt;/b&gt;&lt;/tt&gt; option.&lt;/p&gt;
*
* @constructor
* @param {Object} config Configuration options
* @xtype form
*/
Ext.FormPanel = Ext.extend(Ext.Panel, {
<span id='Ext-form-FormPanel-cfg-formId'> /**
</span> * @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
*/
<span id='Ext-form-FormPanel-cfg-hideLabels'> /**
</span> * @cfg {Boolean} hideLabels
* &lt;p&gt;&lt;tt&gt;true&lt;/tt&gt; to hide field labels by default (sets &lt;tt&gt;display:none&lt;/tt&gt;). Defaults to
* &lt;tt&gt;false&lt;/tt&gt;.&lt;/p&gt;
* &lt;p&gt;Also see {@link Ext.Component}.&lt;tt&gt;{@link Ext.Component#hideLabel hideLabel}&lt;/tt&gt;.
*/
<span id='Ext-form-FormPanel-cfg-labelPad'> /**
</span> * @cfg {Number} labelPad
* The default padding in pixels for field labels (defaults to &lt;tt&gt;5&lt;/tt&gt;). &lt;tt&gt;labelPad&lt;/tt&gt; only
* applies if &lt;tt&gt;{@link #labelWidth}&lt;/tt&gt; is also specified, otherwise it will be ignored.
*/
<span id='Ext-form-FormPanel-cfg-labelSeparator'> /**
</span> * @cfg {String} labelSeparator
* See {@link Ext.Component}.&lt;tt&gt;{@link Ext.Component#labelSeparator labelSeparator}&lt;/tt&gt;
*/
<span id='Ext-form-FormPanel-cfg-labelWidth'> /**
</span> * @cfg {Number} labelWidth The width of labels in pixels. This property cascades to child containers
* and can be overridden on any child container (e.g., a fieldset can specify a different &lt;tt&gt;labelWidth&lt;/tt&gt;
* for its fields) (defaults to &lt;tt&gt;100&lt;/tt&gt;).
*/
<span id='Ext-form-FormPanel-cfg-itemCls'> /**
</span> * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
*/
<span id='Ext-form-FormPanel-cfg-buttons'> /**
</span> * @cfg {Array} buttons
* An array of {@link Ext.Button}s or {@link Ext.Button} configs used to add buttons to the footer of this FormPanel.&lt;br&gt;
* &lt;p&gt;Buttons in the footer of a FormPanel may be configured with the option &lt;tt&gt;formBind: true&lt;/tt&gt;. This causes
* the form's {@link #monitorValid valid state monitor task} to enable/disable those Buttons depending on
* the form's valid/invalid state.&lt;/p&gt;
*/
<span id='Ext-form-FormPanel-cfg-minButtonWidth'> /**
</span> * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to &lt;tt&gt;75&lt;/tt&gt;).
*/
minButtonWidth : 75,
<span id='Ext-form-FormPanel-cfg-labelAlign'> /**
</span> * @cfg {String} labelAlign The label alignment value used for the &lt;tt&gt;text-align&lt;/tt&gt; specification
* for the &lt;b&gt;container&lt;/b&gt;. Valid values are &lt;tt&gt;&quot;left&lt;/tt&gt;&quot;, &lt;tt&gt;&quot;top&quot;&lt;/tt&gt; or &lt;tt&gt;&quot;right&quot;&lt;/tt&gt;
* (defaults to &lt;tt&gt;&quot;left&quot;&lt;/tt&gt;). This property cascades to child &lt;b&gt;containers&lt;/b&gt; and can be
* overridden on any child &lt;b&gt;container&lt;/b&gt; (e.g., a fieldset can specify a different &lt;tt&gt;labelAlign&lt;/tt&gt;
* for its fields).
*/
labelAlign : 'left',
<span id='Ext-form-FormPanel-cfg-monitorValid'> /**
</span> * @cfg {Boolean} monitorValid If &lt;tt&gt;true&lt;/tt&gt;, the form monitors its valid state &lt;b&gt;client-side&lt;/b&gt; and
* regularly fires the {@link #clientvalidation} event passing that state.&lt;br&gt;
* &lt;p&gt;When monitoring valid state, the FormPanel enables/disables any of its configured
* {@link #buttons} which have been configured with &lt;code&gt;formBind: true&lt;/code&gt; depending
* on whether the {@link Ext.form.BasicForm#isValid form is valid} or not. Defaults to &lt;tt&gt;false&lt;/tt&gt;&lt;/p&gt;
*/
monitorValid : false,
<span id='Ext-form-FormPanel-cfg-monitorPoll'> /**
</span> * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
*/
monitorPoll : 200,
<span id='Ext-form-FormPanel-cfg-layout'> /**
</span> * @cfg {String} layout Defaults to &lt;tt&gt;'form'&lt;/tt&gt;. Normally this configuration property should not be altered.
* For additional details see {@link Ext.layout.FormLayout} and {@link Ext.Container#layout Ext.Container.layout}.
*/
layout : 'form',
<span id='Ext-form-FormPanel-method-initComponent'> // private
</span> initComponent : function(){
this.form = this.createForm();
Ext.FormPanel.superclass.initComponent.call(this);
this.bodyCfg = {
tag: 'form',
cls: this.baseCls + '-body',
method : this.method || 'POST',
id : this.formId || Ext.id()
};
if(this.fileUpload) {
this.bodyCfg.enctype = 'multipart/form-data';
}
this.initItems();
this.addEvents(
<span id='Ext-form-FormPanel-event-clientvalidation'> /**
</span> * @event clientvalidation
* If the monitorValid config option is true, this event fires repetitively to notify of valid state
* @param {Ext.form.FormPanel} this
* @param {Boolean} valid true if the form has passed client-side validation
*/
'clientvalidation'
);
this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);
},
<span id='Ext-form-FormPanel-method-createForm'> // private
</span> createForm : function(){
var config = Ext.applyIf({listeners: {}}, this.initialConfig);
return new Ext.form.BasicForm(null, config);
},
<span id='Ext-form-FormPanel-method-initFields'> // private
</span> initFields : function(){
var f = this.form;
var formPanel = this;
var fn = function(c){
if(formPanel.isField(c)){
f.add(c);
}else if(c.findBy &amp;&amp; c != formPanel){
formPanel.applySettings(c);
//each check required for check/radio groups.
if(c.items &amp;&amp; c.items.each){
c.items.each(fn, this);
}
}
};
this.items.each(fn, this);
},
<span id='Ext-form-FormPanel-method-applySettings'> // private
</span> applySettings: function(c){
var ct = c.ownerCt;
Ext.applyIf(c, {
labelAlign: ct.labelAlign,
labelWidth: ct.labelWidth,
itemCls: ct.itemCls
});
},
<span id='Ext-form-FormPanel-method-getLayoutTarget'> // private
</span> getLayoutTarget : function(){
return this.form.el;
},
<span id='Ext-form-FormPanel-method-getForm'> /**
</span> * Provides access to the {@link Ext.form.BasicForm Form} which this Panel contains.
* @return {Ext.form.BasicForm} The {@link Ext.form.BasicForm Form} which this Panel contains.
*/
getForm : function(){
return this.form;
},
<span id='Ext-form-FormPanel-method-onRender'> // private
</span> onRender : function(ct, position){
this.initFields();
Ext.FormPanel.superclass.onRender.call(this, ct, position);
this.form.initEl(this.body);
},
<span id='Ext-form-FormPanel-method-beforeDestroy'> // private
</span> beforeDestroy : function(){
this.stopMonitoring();
this.form.destroy(true);
Ext.FormPanel.superclass.beforeDestroy.call(this);
},
<span id='Ext-form-FormPanel-method-isField'> // Determine if a Component is usable as a form Field.
</span> isField : function(c) {
return !!c.setValue &amp;&amp; !!c.getValue &amp;&amp; !!c.markInvalid &amp;&amp; !!c.clearInvalid;
},
<span id='Ext-form-FormPanel-method-initEvents'> // private
</span> initEvents : function(){
Ext.FormPanel.superclass.initEvents.call(this);
// Listeners are required here to catch bubbling events from children.
this.on({
scope: this,
add: this.onAddEvent,
remove: this.onRemoveEvent
});
if(this.monitorValid){ // initialize after render
this.startMonitoring();
}
},
<span id='Ext-form-FormPanel-method-onAdd'> // private
</span> onAdd: function(c){
Ext.FormPanel.superclass.onAdd.call(this, c);
this.processAdd(c);
},
<span id='Ext-form-FormPanel-method-onAddEvent'> // private
</span> onAddEvent: function(ct, c){
if(ct !== this){
this.processAdd(c);
}
},
<span id='Ext-form-FormPanel-method-processAdd'> // private
</span> processAdd : function(c){
// If a single form Field, add it
if(this.isField(c)){
this.form.add(c);
// If a Container, add any Fields it might contain
}else if(c.findBy){
this.applySettings(c);
this.form.add.apply(this.form, c.findBy(this.isField));
}
},
<span id='Ext-form-FormPanel-method-onRemove'> // private
</span> onRemove: function(c){
Ext.FormPanel.superclass.onRemove.call(this, c);
this.processRemove(c);
},
<span id='Ext-form-FormPanel-method-onRemoveEvent'> onRemoveEvent: function(ct, c){
</span> if(ct !== this){
this.processRemove(c);
}
},
<span id='Ext-form-FormPanel-method-processRemove'> // private
</span> processRemove: function(c){
if(!this.destroying){
// If a single form Field, remove it
if(this.isField(c)){
this.form.remove(c);
// If a Container, its already destroyed by the time it gets here. Remove any references to destroyed fields.
}else if (c.findBy){
Ext.each(c.findBy(this.isField), this.form.remove, this.form);
/*
* This isn't the most efficient way of getting rid of the items, however it's the most
* correct, which in this case is most important.
*/
this.form.cleanDestroyed();
}
}
},
<span id='Ext-form-FormPanel-method-startMonitoring'> /**
</span> * Starts monitoring of the valid state of this form. Usually this is done by passing the config
* option &quot;monitorValid&quot;
*/
startMonitoring : function(){
if(!this.validTask){
this.validTask = new Ext.util.TaskRunner();
this.validTask.start({
run : this.bindHandler,
interval : this.monitorPoll || 200,
scope: this
});
}
},
<span id='Ext-form-FormPanel-method-stopMonitoring'> /**
</span> * Stops monitoring of the valid state of this form
*/
stopMonitoring : function(){
if(this.validTask){
this.validTask.stopAll();
this.validTask = null;
}
},
<span id='Ext-form-FormPanel-method-load'> /**
</span> * This is a proxy for the underlying BasicForm's {@link Ext.form.BasicForm#load} call.
* @param {Object} options The options to pass to the action (see {@link Ext.form.BasicForm#doAction} for details)
*/
load : function(){
this.form.load.apply(this.form, arguments);
},
<span id='Ext-form-FormPanel-method-onDisable'> // private
</span> onDisable : function(){
Ext.FormPanel.superclass.onDisable.call(this);
if(this.form){
this.form.items.each(function(){
this.disable();
});
}
},
<span id='Ext-form-FormPanel-method-onEnable'> // private
</span> onEnable : function(){
Ext.FormPanel.superclass.onEnable.call(this);
if(this.form){
this.form.items.each(function(){
this.enable();
});
}
},
<span id='Ext-form-FormPanel-method-bindHandler'> // private
</span> bindHandler : function(){
var valid = true;
this.form.items.each(function(f){
if(!f.isValid(true)){
valid = false;
return false;
}
});
if(this.fbar){
var fitems = this.fbar.items.items;
for(var i = 0, len = fitems.length; i &lt; len; i++){
var btn = fitems[i];
if(btn.formBind === true &amp;&amp; btn.disabled === valid){
btn.setDisabled(!valid);
}
}
}
this.fireEvent('clientvalidation', this, valid);
}
});
Ext.reg('form', Ext.FormPanel);
Ext.form.FormPanel = Ext.FormPanel;
</pre>
</body>
</html>