Extjs学习笔记(11)-表单

xType:

组件名	注释
textfield	文本域
displayfield	显示字段
textarea	多行文本域
datefield	日期字段
button	按钮
fieldcontainer radiofield	单选框
fieldcontainer checkboxfield	复选框
hiddenfield	隐藏域
numberfield	数字域
spinnerfield	螺旋桨
timefield	时间字段
combobox	组合框
filefield	文件

<!DOCTYPE html>
<html>
    <head>
        <link
            href="./ext-6.0.0-gpl/ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css"
            rel="stylesheet"
        />
        <script src="./ext-6.0.0-gpl/ext-6.0.0/build/ext-all.js"></script>
        <script type="text/javascript">
          Ext.onReady(function() {
            Ext.create('Ext.form.Panel', {
              id: 'newForm',
              renderTo: 'formID',
              border: true,
              width: 600,
              items: [{
                xtype: 'textfield', //文本域
                fieldLabel: 'Text Field'
              },{
                xtype: 'displayfield', //显示字段
                fieldLabel: 'Display Field'
              },{
                xtype: 'textarea', //多行文本域
                fieldLabel: 'Text Area'
              },{
                xtype: 'datefield', //日期字段
                fieldLabel: 'Date Field'
              },{
                xtype: 'button', //按钮
                text: 'Button'
              },{
                xtype: 'fieldcontainer', //单选框
                fieldLabel: 'Radio field',
                defaultType: 'radiofield',
                defaults: {
                  flex: 1
                },
                layout: 'hbox',
                items: [{
                  boxLabel: 'A',
                  inputValue: 'a',
                  id: 'radio1'
                },{
                  boxLabel: 'B',
                  inputValue: 'b',
                  id: 'radio2'
                },{
                  boxLabel: 'C',
                  inputValue: 'c',
                  id: 'radio3'
                }]
              },{
                xtype: 'fieldcontainer', //复选框
                fieldLabel: 'check Box field',
                defaultType: 'checkboxfield', //全部字母小写
                items: [{
                  boxLabel: 'html',
                  inputValue: 'html',
                  id: 'checkbox1'
                },{
                  boxLabel: 'css',
                  inputValue: 'css',
                  id: 'checkbox2'
                },{
                  boxLabel: 'javascript',
                  inputValue: 'javascript',
                  id: 'checkbox3'
                }
                ]
              },{
                xtype: 'hiddenfield', //隐藏域
                name: 'hidden field',
                value: 'value from hidden field'
              },{
                xtype: 'numberfield', //数字域
                anchor: '100%',
                fieldLabel: 'Number Field',
                maxValue: 99,
                minValue: 0
              },{
                xtype: 'spinnerfield', //螺旋桨
                fieldLabel: 'Spinner Field',
                step: 6,
                onSpinUp: function() {
                  var me = this
                  if (!me.readOnly) {
                    var val = me.step
                    if (me.getValue() !== '') {
                      val = parseInt(me.getValue().slice(0, -5))
                    }
                    me.setValue((val + me.step) + ' Pack')
                  }
                },
                onSpinDown: function() {
                  var me = this 
                  if (!me.readOnly) {
                    if (me.getValue() !== '') {
                      val = parseInt(me.getValue().slice(0, -5))
                    }
                    me.setValue((val - me.step) + ' Pack')
                  }
                }
              },{
                xtype: 'timefield', //时间字段
                fieldLabel: 'Time Field',
                minValue: '6:00 AM',
                maxValue: '8:00 PM',
                increment: 30,
                anchor: '100%'
              },{
                xtype: 'combobox', //组合框
               fieldLabel: 'Combo Box',
               store: Ext.create('Ext.data.Store', {
                        fields: ['abbr', 'name'],
                        data: [{
                           'abbr': 'HTML',
                           'name': 'HTML'
                        },{
                           'abbr': 'CSS',
                           'name': 'CSS'
                        },{
                           'abbr': 'JS',
                           'name': 'JavaScript'
                        }]
                     }),
               valueField: 'abbr',
               displayField: 'name'
              },{
                xtype: 'filefield', //文件
                fieldLabel: 'File Field',
                labelWidth: 50,
                msgTarget: 'side',
                allowBlank: false,
                anchor: '100%',
                buttonText: 'selet file...'
              }]

            })
          })
        </script>
    </head>
    <body>
        <div id="formID"></div>
    </body>
</html>

运行结果：

Extjs学习笔记(11)-表单

零号

引用和评论

vue3报错：只能有一个根元素【已解决】

CSS团队协作规范

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

100个React最佳实践小技巧

CSS 现在终于支持高度 auto 过渡动画了

开发插件集合

Extjs学习笔记(11)-表单

零号

引用和评论

vue3报错： 只能有一个根元素 【已解决】

CSS团队协作规范

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

100个React最佳实践小技巧

CSS 现在终于支持高度 auto 过渡动画了

开发插件集合

vue3报错：只能有一个根元素【已解决】