Ext JS表单Ext.form.FormPanel

1、表单对于传统的b/s应用来说，数据录入元素是放在表单<form>标签里面的。而对于ExtJS应用来说，则可以直接使用FormPanel控件来存放表单中的元素。FormPanel继承自Panel，在Panel的基础上提供与表单相关的各种特性，比如可以指定表单提交的url、指定表单提交方式、是否是二进制提交等；另外FormPanel固定使用form布局，前面关于布局一节中的内容我们说过，form布局也就是专门用于组织包含输入元素的布局。看下面的代码：

Ext.onReady(function() {
Ext.QuickTips.init();

var bd = Ext.getBody();

/*
* ================  Simple form  =======================
*/
bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
10
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

var simple = Ext.widget({
xtype: 'form',
layout: 'form',
collapsible: true,//折叠
id: 'simpleForm',
url: 'save-form.php',//将会通过AJAX请求提交到此URL
frame: true,//在此，这个属性就很重要了，如果不为true，你会看到下面的button和panel看起来是分开的

title: 'Simple Form',
bodyPadding: '5 5 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
//指定表单中字段标签的宽度
labelWidth: 75
//labelAlign来指定字段标签的对齐方式
},
defaultType: 'textfield',//    Ext.form.TextField （文本框）
items: [{
fieldLabel: 'First Name',
afterLabelTextTpl: required,
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
name: 'last',
allowBlank: false
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
afterLabelTextTpl: required,
name: 'email',
allowBlank: false,
vtype:'email'
}, {
fieldLabel: 'DOB',
name: 'dob',
xtype: 'datefield'//    Ext.form.DateField （日期控件）
}, {
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',//    Ext.form.NumberField （只能输入数字的文本框）
minValue: 0,
maxValue: 100
}, {
xtype: 'timefield',//    Ext.form.TextField （文本框）
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}],

buttons: [{
//保存
text: 'Save',
handler: function() {
this.up('form').getForm().isValid();
}
},{
//重置
text: 'Cancel',
handler: function() {
this.up('form').getForm().reset();
}
}]
});

simple.render(document.body);
});

效果图：2、复选框

Ext.onReady(function() {
Ext.QuickTips.init();

var bd = Ext.getBody();

bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});

var fsf = Ext.widget({
xtype: 'form',
id: 'fieldSetForm',
collapsible: true,//折叠
url: 'save-form.php',
frame: true,
title: 'Simple Form with FieldSets',
bodyPadding: '5 5 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaults: {
anchor: '100%'
},

items: [{
xtype:'fieldset',
checkboxToggle:true,//关键参数，其他和以前的一样，使得选择复选框后，内容显示出来，否则不显示，默认为false，不显示复选框
title: 'User Information',
defaultType: 'textfield',
collapsed: true,
layout: 'anchor',
defaults: {
anchor: '100%'
},
items :[{
fieldLabel: 'First Name',
afterLabelTextTpl: required,
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
afterLabelTextTpl: required,
name: 'email',
vtype:'email'
}]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,//折叠
defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

fsf.render(document.body);
});

效果图：

3、HTML编辑组件
xtype: 'htmleditor',

提供一个轻量的HTML编辑器组件。一些工具栏特性不被Safari浏览器支持，在必要的时候会自动的隐藏。这些不支持的特性在配置项的适当地方会有提示。这个编辑器的工具栏按钮的提示条被定义在buttonTips属性里，但是它们默认是无效的， 除非全局的Ext.tip.QuickTipManager 属性是 已经初始化的.编辑器作为一个敏感组件，不能被用在那些可以使用标准表单项的地方。 将编辑器放到一个display属性被设置为'none'的元素中时，在Safari和Firefox下面会出现问题，因为它们在重新加载默认iframe的时候存在bug。

             xtype: 'htmleditor',
name: 'bio',
fieldLabel: 'Biography',
height: 200,
anchor: '100%'

效果图：4、可选面板

 Ext.onReady(function() {
Ext.QuickTips.init();var bd = Ext.getBody();bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});var tabs = Ext.widget({
xtype: 'form',
id: 'tabForm',
width: 350,
border: false,
bodyBorder: false,
fieldDefaults: {
labelWidth: 75,
msgTarget: 'side'
},
items: {
xtype:'tabpanel',
activeTab: 0,
defaults:{
bodyPadding: 10,
layout: 'anchor'
},items:[{
title:'Personal Details',
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'First Name',
name: 'first',
afterLabelTextTpl: required,
allowBlank: false,
value: 'Ed'
},{
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
allowBlank: false,
name: 'last',
value: 'Spencer'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
afterLabelTextTpl: required,
allowBlank: false,
name: 'email',
vtype:'email'
}]
},{
title: 'Phone Numbers',
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}]
},buttons: [{
text: 'Save',
handler: function() {
this.up('form').getForm().isValid();
}
},{
text: 'Cancel',
handler: function() {
this.up('form').getForm().reset();
}
}]
});tabs.render(document.body);
});

效果图：5、综合应用代码如下：

 Ext.onReady(function() {
Ext.QuickTips.init();var bd = Ext.getBody();bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});var tab2 = Ext.widget({
title: 'Inner Tabs',
xtype: 'form',
id: 'innerTabsForm',
collapsible: true,
bodyPadding: 5,
width: 600,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
anchor: '100%'
},items: [{
xtype: 'container',
layout:'hbox',
items:[{
xtype: 'container',
flex: 1,
border:false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
afterLabelTextTpl: required,
allowBlank: false,
name: 'first',
anchor:'95%'
}, {
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
xtype: 'container',
flex: 1,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
allowBlank: false,
name: 'last',
anchor:'95%'
},{
fieldLabel: 'Email',
afterLabelTextTpl: required,
allowBlank: false,
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{
bodyPadding: 10
},
items:[{
title:'Personal Details',
defaults: {
width: 230
},
defaultType: 'textfield',items: [{
fieldLabel: 'First Name',
name: 'first',
value: 'Jamie'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Avins'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
defaults: {
width: 230
},
defaultType: 'textfield',items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
},{
cls: 'x-plain',
title: 'Biography',
layout: 'fit',
items: {
xtype: 'htmleditor',
name: 'bio2',
fieldLabel: 'Biography'
}
}]
}],buttons: [{
text: 'Save',
handler: function() {
this.up('form').getForm().isValid();
}
},{
text: 'Cancel',
handler: function() {
this.up('form').getForm().reset();
}
}]
});tab2.render(document.body);
});

效果图：以上均是Ext JS官网的例子，记录下来，方便自己查看。