Extjs-components-form

提供：Dev Guides
移動先:案内、検索

Ext.js-フォーム

ほとんどのWebアプリケーションでは、フォームはログインフォーム/フィードバックフォームなどのユーザーから情報を取得するための最も重要なウィジェットであり、将来の参照のために値をデータベースに保存できます。 この目的にはフォームウィジェットが使用されます。

フォームを作成する前に、xTypeについて知っておく必要があります。 

*xType* は、Ext JS UIコンポーネントのタイプを定義します。これは、コンポーネントのレンダリング中に決定されます。 たとえば、要素はtextFieldとしてxTypeを持つテキストボックスにすることも、要素にNumeric xTypeを持つ数値のみを持つこともできます。

さまざまなタイプのxType

テキストフィールド

この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>

上記のプログラムは、次の結果を生成します-

「https://www.finddevguides.com/index.php?title=Extjs-components-form&oldid=27242」から取得
Powered by MediaWiki