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.