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官网的例子，记录下来，方便自己查看。