Ext JS表单Ext.form.FormPanel

1、表单

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

看下面的代码：

 1 Ext.onReady(function() {
 2     Ext.QuickTips.init();
 3 
 4     var bd = Ext.getBody();
 5 
 6     /*
 7      * ================  Simple form  =======================
 8      */
 9     bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
10
11     var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
12 
13     var simple = Ext.widget({
14         xtype: 'form',
15         layout: 'form',
16         collapsible: true,//折叠
17         id: 'simpleForm',
18         url: 'save-form.php',//将会通过AJAX请求提交到此URL
19         frame: true,//在此，这个属性就很重要了，如果不为true，你会看到下面的button和panel看起来是分开的
20         title: 'Simple Form',
21         bodyPadding: '5 5 0',
22         width: 350,
23         fieldDefaults: {
24             msgTarget: 'side',
25             //指定表单中字段标签的宽度
26             labelWidth: 75
27             //labelAlign来指定字段标签的对齐方式
28         },
29         defaultType: 'textfield',//    Ext.form.TextField （文本框）
30         items: [{
31             fieldLabel: 'First Name',
32             afterLabelTextTpl: required,
33             name: 'first',
34             allowBlank: false
35         },{
36             fieldLabel: 'Last Name',
37             afterLabelTextTpl: required,
38             name: 'last',
39             allowBlank: false
40         },{
41             fieldLabel: 'Company',
42             name: 'company'
43         }, {
44             fieldLabel: 'Email',
45             afterLabelTextTpl: required,
46             name: 'email',
47             allowBlank: false,
48             vtype:'email'
49         }, {
50             fieldLabel: 'DOB',
51             name: 'dob',
52             xtype: 'datefield'//    Ext.form.DateField （日期控件）
53         }, {
54             fieldLabel: 'Age',
55             name: 'age',
56             xtype: 'numberfield',//    Ext.form.NumberField （只能输入数字的文本框）
57             minValue: 0,
58             maxValue: 100
59         }, {
60             xtype: 'timefield',//    Ext.form.TextField （文本框）
61             fieldLabel: 'Time',
62             name: 'time',
63             minValue: '8:00am',
64             maxValue: '6:00pm'
65         }],
66 
67         buttons: [{
68             //保存
69             text: 'Save',
70             handler: function() {
71                 this.up('form').getForm().isValid();
72             }
73         },{
74             //重置
75             text: 'Cancel',
76             handler: function() {
77                 this.up('form').getForm().reset();
78             }
79         }]
80     });
81 
82     simple.render(document.body);
83 });

 

 效果图：

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。

1             xtype: 'htmleditor',
2             name: 'bio',
3             fieldLabel: 'Biography',
4             height: 200,
5             anchor: '100%'

 效果图：

4、可选面板

 1 Ext.onReady(function() {
 2     Ext.QuickTips.init();
 3 
 4     var bd = Ext.getBody();
 5 
 6  bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});
 7 
 8     var tabs = Ext.widget({
 9         xtype: 'form',
10         id: 'tabForm',
11         width: 350,
12         border: false,
13         bodyBorder: false,
14         fieldDefaults: {
15             labelWidth: 75,
16             msgTarget: 'side'
17         },
18         items: {
19             xtype:'tabpanel',
20             activeTab: 0,
21             defaults:{
22                 bodyPadding: 10,
23                 layout: 'anchor'
24             },
25 
26             items:[{
27                 title:'Personal Details',
28                 defaultType: 'textfield',
29                 defaults: {
30                     anchor: '100%'
31                 },
32                 items: [{
33                     fieldLabel: 'First Name',
34                     name: 'first',
35                     afterLabelTextTpl: required,
36                     allowBlank: false,
37                     value: 'Ed'
38                 },{
39                     fieldLabel: 'Last Name',
40                     afterLabelTextTpl: required,
41                     allowBlank: false,
42                     name: 'last',
43                     value: 'Spencer'
44                 },{
45                     fieldLabel: 'Company',
46                     name: 'company',
47                     value: 'Ext JS'
48                 }, {
49                     fieldLabel: 'Email',
50                     afterLabelTextTpl: required,
51                     allowBlank: false,
52                     name: 'email',
53                     vtype:'email'
54                 }]
55             },{
56                 title: 'Phone Numbers',
57                 defaultType: 'textfield',
58                 defaults: {
59                     anchor: '100%'
60                 },
61                 items: [{
62                     fieldLabel: 'Home',
63                     name: 'home',
64                     value: '(888) 555-1212'
65                 },{
66                     fieldLabel: 'Business',
67                     name: 'business'
68                 },{
69                     fieldLabel: 'Mobile',
70                     name: 'mobile'
71                 },{
72                     fieldLabel: 'Fax',
73                     name: 'fax'
74                 }]
75             }]
76         },
77 
78         buttons: [{
79             text: 'Save',
80             handler: function() {
81                 this.up('form').getForm().isValid();
82             }
83         },{
84             text: 'Cancel',
85             handler: function() {
86                 this.up('form').getForm().reset();
87             }
88         }]
89     });
90 
91     tabs.render(document.body);
92 });

 

 效果图：

5、综合应用

代码如下：

  1 Ext.onReady(function() {
  2     Ext.QuickTips.init();
  3 
  4     var bd = Ext.getBody();
  5  
  6 bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
  7 
  8     var tab2 = Ext.widget({
  9         title: 'Inner Tabs',
 10         xtype: 'form',
 11         id: 'innerTabsForm',
 12         collapsible: true,
 13         bodyPadding: 5,
 14         width: 600,
 15         fieldDefaults: {
 16             labelAlign: 'top',
 17             msgTarget: 'side'
 18         },
 19         defaults: {
 20             anchor: '100%'
 21         },
 22 
 23         items: [{
 24             xtype: 'container',
 25             layout:'hbox',
 26             items:[{
 27                 xtype: 'container',
 28                 flex: 1,
 29                 border:false,
 30                 layout: 'anchor',
 31                 defaultType: 'textfield',
 32                 items: [{
 33                     fieldLabel: 'First Name',
 34                     afterLabelTextTpl: required,
 35                     allowBlank: false,
 36                     name: 'first',
 37                     anchor:'95%'
 38                 }, {
 39                     fieldLabel: 'Company',
 40                     name: 'company',
 41                     anchor:'95%'
 42                 }]
 43             },{
 44                 xtype: 'container',
 45                 flex: 1,
 46                 layout: 'anchor',
 47                 defaultType: 'textfield',
 48                 items: [{
 49                     fieldLabel: 'Last Name',
 50                     afterLabelTextTpl: required,
 51                     allowBlank: false,
 52                     name: 'last',
 53                     anchor:'95%'
 54                 },{
 55                     fieldLabel: 'Email',
 56                     afterLabelTextTpl: required,
 57                     allowBlank: false,
 58                     name: 'email',
 59                     vtype:'email',
 60                     anchor:'95%'
 61                 }]
 62             }]
 63         },{
 64             xtype:'tabpanel',
 65             plain:true,
 66             activeTab: 0,
 67             height:235,
 68             defaults:{
 69                 bodyPadding: 10
 70             },
 71             items:[{
 72                 title:'Personal Details',
 73                 defaults: {
 74                     width: 230
 75                 },
 76                 defaultType: 'textfield',
 77 
 78                 items: [{
 79                     fieldLabel: 'First Name',
 80                     name: 'first',
 81                     value: 'Jamie'
 82                 },{
 83                     fieldLabel: 'Last Name',
 84                     name: 'last',
 85                     value: 'Avins'
 86                 },{
 87                     fieldLabel: 'Company',
 88                     name: 'company',
 89                     value: 'Ext JS'
 90                 }, {
 91                     fieldLabel: 'Email',
 92                     name: 'email',
 93                     vtype:'email'
 94                 }]
 95             },{
 96                 title:'Phone Numbers',
 97                 defaults: {
 98                     width: 230
 99                 },
100                 defaultType: 'textfield',
101 
102                 items: [{
103                     fieldLabel: 'Home',
104                     name: 'home',
105                     value: '(888) 555-1212'
106                 },{
107                     fieldLabel: 'Business',
108                     name: 'business'
109                 },{
110                     fieldLabel: 'Mobile',
111                     name: 'mobile'
112                 },{
113                     fieldLabel: 'Fax',
114                     name: 'fax'
115                 }]
116             },{
117                 cls: 'x-plain',
118                 title: 'Biography',
119                 layout: 'fit',
120                 items: {
121                     xtype: 'htmleditor',
122                     name: 'bio2',
123                     fieldLabel: 'Biography'
124                 }
125             }]
126         }],
127 
128         buttons: [{
129             text: 'Save',
130             handler: function() {
131                 this.up('form').getForm().isValid();
132             }
133         },{
134             text: 'Cancel',
135             handler: function() {
136                 this.up('form').getForm().reset();
137             }
138         }]
139     });
140 
141     tab2.render(document.body);
142 });

 

效果图：

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

转载于:https://www.cnblogs.com/Darlin356230410/p/4940404.html