Ext.js - 表单

上一页
下一页

在大多数 Web 应用程序中，表单是最重要的窗口小部件，用于从用户那里获取信息，例如登录表单/反馈表单，以便可以将值保存到数据库以供将来参考。表单窗口小部件用于此目的。

在创建表单之前，我们应该了解 xTypes。

xType 定义了 Ext JS UI 组件的类型，它在组件渲染期间确定。例如，元素可以是文本框，我们将其 xType 设置为 textField，或者元素只能具有数值，我们将其 xType 设置为 Numeric。

不同类型的 xType

TEXTFIELD

此 xType 用于表示文本字段，用户可以在其中输入值。Ext JS 中文本字段的类为“Ext.Form.Field.Text”。

{ 	
   xtype: 'textfield',
   fieldLabel: 'Text field'  
}

文本区域

这用于表示文本区域。Ext JS 中此类的类为“Ext.form.field.TextArea”。

{
   xtype: 'textarea',
   fieldLabel: 'Text Area'
}

显示字段

这用于表示显示文本字段。Ext JS 中此类的类为“Ext.form.Label”。

{
   xtype: 'displayfield',
   fieldLabel: 'Display Field''
}

日期字段

这用于表示日期字段，该字段具有日期选择器以选择日期。Ext JS 中此类的类为“Ext.form.field.Date”。

{
   xtype: 'datefield',
   fieldLabel: 'Date picker'
}

按钮

这用于表示按钮。Ext JS 中此类的类为“Ext.button.Button”。

{
   xtype: 'button', 
   text : 'Button'
}

单选字段

这用于表示单选字段，我们可以在所有单选按钮中选择一个，或者可以自定义为一次选择多个。Ext JS 中此类的类为“Ext.form.field.Radio”。

{
   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'
   }]
}

复选框字段

这用于表示复选框字段，我们可以在其中一次选择多个值。Ext JS 中此类的类为“Ext.form.field.Checkbox”。

{
   xtype: 'fieldcontainer',
   fieldLabel: 'Check Box Field',
   defaultType: 'checkboxfield',
   items: [{
      boxLabel  : 'HTML',
      inputValue: 'html',
      id        : 'checkbox1'
   },{
      boxLabel  : 'CSS',
      inputValue: 'css',
      checked   : true,
      id        : 'checkbox2'
   },{
      boxLabel  : 'JavaScript',
      inputValue: 'js',
      id        : 'checkbox3'
   }]
}

组合框

这用于表示组合框。组合框包含项目列表。Ext JS 中此类的类为“Ext.form.field.ComboBox”。

{
   xtype : 'combobox',
   fieldLabel: 'Combo box',
   store: store,
   valueField: 'name'
}

// store for drop down values
var store = Ext.create('Ext.data.Store', {
   id : 'statesid',
   fields: ['abbr', 'name'],
   data : [
      {"abbr":"HTML", "name":"HTML"},
      {"abbr":"CSS", "name":"CSS"},
      {"abbr":"JS", "name":"JavaScript"}
   ]
});

时间字段

这用于表示时间字段，其中可以预定义最大和最小时间值。Ext JS 中此类的类为“Ext.form.field.Time”。

{
   xtype: 'timefield',
   fieldLabel: 'Time field',
   minValue: '6:00 AM',
   maxValue: '8:00 PM',
   increment: 30,
   anchor: '100%'
}

文件字段

这用于表示文件上传字段，我们可以在其中浏览和上传文件。Ext JS 中此类的类为“Ext.form.field.File”。

{
   xtype: 'filefield',
   fieldLabel: 'File field',
   labelWidth: 50,
   msgTarget: 'side',
   allowBlank: false,
   anchor: '100%',
   buttonText: 'Select File...'
}

微调器

这用于表示微调器字段，其中列表可以旋转和添加。Ext JS 中此类的类为“Ext.form.field.Spinner”。

{ 
   xtype: 'spinnerfield',
   fieldLabel: 'Spinner field'
}

数字字段

这用于表示数字字段，其中可以预定义最大值和最小值。Ext JS 中此类的类为“Ext.form.field.Number”。

{
   xtype: 'numberfield',
   anchor: '100%',
   fieldLabel: 'Numeric field',
   maxValue: 99,
   minValue: 0
}

隐藏字段

顾名思义，此 xtype 用于隐藏值。

{
   xtype: 'hiddenfield',
   value: 'value from hidden field'
}

表单面板的语法

以下是创建表单的简单语法。

Ext.create('Ext.form.Panel');

示例

以下是一个简单的示例，显示了包含所有 xType 的表单。

实时演示 
<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/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 picker'
               },{
                  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',
                     checked: true,
                     id: 'checkbox2'
                  },{
                     boxLabel: 'JavaScript',
                     inputValue: 'js',
                     id: 'checkbox3'
                  }]
               },{
                  xtype: 'hiddenfield',
                  name: 'hidden field ',
                  value: 'value from hidden field'
               },{
                  xtype: 'numberfield',
                  anchor: '100%',
                  fieldLabel: 'Numeric Field',
                  maxValue: 99,
                  minValue: 0
               },{
                  xtype: 'spinnerfield',
                  fieldLabel: 'Spinner Field',
                  step: 6,
                  
                  // override onSpinUp (using step isn't necessary)
                  onSpinUp: function() {
                     var me = this;
                     
                     if (!me.readOnly) {
                        var val = me.step;    // set the default value to the step value
                        if(me.getValue() !== '') {
                           val = parseInt(me.getValue().slice(0, -5));   // gets rid of " Pack"
                        }                          
                        me.setValue((val + me.step) + ' Pack');
                     }
                  },
                  // override onSpinDown
                  onSpinDown: function() {
                     var me = this;
                     if (!me.readOnly) {
                        if(me.getValue() !== '') {
                           val = parseInt(me.getValue().slice(0, -5));   // gets rid of " Pack"
                        }            
                        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: 'Select File...'
               }]
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "formId"></div>
   </body>
</html>

以上程序将产生以下结果：

extjs_components.htm
打印页面
上一页
下一页
广告

© . All rights reserved.