www.gusucode.com > 一个基于extjs的强大聊天插件源码程序 > 一个基于extjs的强大聊天插件/extjame/ext-jame/js/ext2/source/widgets/form/Form.js
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
/**
* @class Ext.form.FormPanel
* @extends Ext.Panel
* Standard form container.
* <p><b>Although they are not listed, this class also accepts all the config options required to configure its internal {@link Ext.form.BasicForm}</b></p>
* <br><br>
* FormPanel uses a {@link Ext.layout.FormLayout} internally, and that is required for fields and labels to work correctly
* within the FormPanel's layout. To nest additional layout styles within a FormPanel, you should nest additional Panels
* or other containers that can provide additional layout functionality. <b>You should not override FormPanel's layout.</b>
* <br><br>
* By default, Ext Forms are submitted through Ajax, using {@link Ext.form.Action}.
* To enable normal browser submission of the Ext Form contained in this FormPanel,
* override the Form's onSubmit, and submit methods:<br><br><pre><code>
var myForm = new Ext.form.FormPanel({
onSubmit: Ext.emptyFn,
submit: function() {
this.getForm().getEl().dom.submit();
}
});</code></pre><br>
* @constructor
* @param {Object} config Configuration options
*/
Ext.FormPanel = Ext.extend(Ext.Panel, {
/**
* @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
*/
/**
* @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
*/
/**
* @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
*/
/**
* @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
*/
buttonAlign:'center',
/**
* @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
*/
minButtonWidth:75,
/**
* @cfg {String} labelAlign Valid values are "left," "top" and "right" (defaults to "left").
* This property cascades to child containers if not set.
*/
labelAlign:'left',
/**
* @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
* fires a looping event with that state. This is required to bind buttons to the valid
* state using the config value formBind:true on the button.
*/
monitorValid : false,
/**
* @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
*/
monitorPoll : 200,
/**
* @cfg {String} layout @hide
*/
layout: 'form',
// private
initComponent :function(){
this.form = this.createForm();
Ext.FormPanel.superclass.initComponent.call(this);
this.addEvents(
/**
* @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']);
},
// private
createForm: function(){
delete this.initialConfig.listeners;
return new Ext.form.BasicForm(null, this.initialConfig);
},
// private
initFields : function(){
var f = this.form;
var formPanel = this;
var fn = function(c){
if(c.doLayout && c != formPanel){
Ext.applyIf(c, {
labelAlign: c.ownerCt.labelAlign,
labelWidth: c.ownerCt.labelWidth,
itemCls: c.ownerCt.itemCls
});
if(c.items){
c.items.each(fn);
}
}else if(c.isFormField){
f.add(c);
}
}
this.items.each(fn);
},
// private
getLayoutTarget : function(){
return this.form.el;
},
/**
* 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;
},
// private
onRender : function(ct, position){
this.initFields();
Ext.FormPanel.superclass.onRender.call(this, ct, position);
var o = {
tag: 'form',
method : this.method || 'POST',
id : this.formId || Ext.id()
};
if(this.fileUpload) {
o.enctype = 'multipart/form-data';
}
this.form.initEl(this.body.createChild(o));
},
// private
beforeDestroy: function(){
Ext.FormPanel.superclass.beforeDestroy.call(this);
Ext.destroy(this.form);
},
// private
initEvents : function(){
Ext.FormPanel.superclass.initEvents.call(this);
this.items.on('remove', this.onRemove, this);
this.items.on('add', this.onAdd, this);
if(this.monitorValid){ // initialize after render
this.startMonitoring();
}
},
// private
onAdd : function(ct, c) {
if (c.isFormField) {
this.form.add(c);
}
},
// private
onRemove : function(c) {
if (c.isFormField) {
Ext.destroy(c.container.up('.x-form-item'));
this.form.remove(c);
}
},
/**
* Starts monitoring of the valid state of this form. Usually this is done by passing the config
* option "monitorValid"
*/
startMonitoring : function(){
if(!this.bound){
this.bound = true;
Ext.TaskMgr.start({
run : this.bindHandler,
interval : this.monitorPoll || 200,
scope: this
});
}
},
/**
* Stops monitoring of the valid state of this form
*/
stopMonitoring : function(){
this.bound = false;
},
/**
* 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);
},
// private
onDisable : function(){
Ext.FormPanel.superclass.onDisable.call(this);
if(this.form){
this.form.items.each(function(){
this.disable();
});
}
},
// private
onEnable : function(){
Ext.FormPanel.superclass.onEnable.call(this);
if(this.form){
this.form.items.each(function(){
this.enable();
});
}
},
// private
bindHandler : function(){
if(!this.bound){
return false; // stops binding
}
var valid = true;
this.form.items.each(function(f){
if(!f.isValid(true)){
valid = false;
return false;
}
});
if(this.buttons){
for(var i = 0, len = this.buttons.length; i < len; i++){
var btn = this.buttons[i];
if(btn.formBind === true && btn.disabled === valid){
btn.setDisabled(!valid);
}
}
}
this.fireEvent('clientvalidation', this, valid);
}
});
Ext.reg('form', Ext.FormPanel);
Ext.form.FormPanel = Ext.FormPanel;