Ext JS の味見 - 4

ExtJS

「レイアウトだけぢゃなく、フォームも強力。」
レイアウト系の次は、フォームのサンプル。フォームはかなり高機能なのだが、簡単にコードを読めるサイズが味見企画のポリシーなので、今回はかなり軽めにとどめる。それでも、カレンダー入力や、数値入力が簡単に実現できることで、Ext JS のパワーの片鱗が垣間見えるんぢゃないかな?。

それから、今まではパネルプロパティの "renderTo" を使っていたが、今回は "render" メソッドを使ってみた。サンプル程度の規模では違いはないのが、"render" を使うことで、任意の箇所でレンダリングを行うこともできるのだ。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <!-- CacheFly を使って、Ext JS を読み込む -->
  <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
  <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>

  <script type="text/javascript">

  function sample4() {
    var panel = new Ext.form.FormPanel({
      title:      'TestForm',
      height:     180,
      width:      300,
      frame:      true,    // 青いフレームが着く。false だと背景が白くなる。
      items: [                 // フォーム内の項目の配列
        {xtype: 'textfield',    name: 'name',     fieldLabel: '氏名'},
        {xtype: 'datefield',    name: 'birthday', fieldLabel: '誕生日'},
        {xtype: 'numberfield',  name: 'family',   fieldLabel: '家族人数'}
      ],
      buttons: [
        {text: '送信'}
      ]
    });

    return panel;
  }
  
  Ext.onReady(function() {
    var panel = sample4();
    panel.render('foo4');      // ここでレンダリングされる。
  });

  </script>
</head>
<body style="margin:5mm;">
  <h1>Ext JS の味見 - 4</h1>
  <h2>- フォーム -</h2>
  <br />
  <div id="foo4"></div>
</body>

</html>

実際に動かしてみると、こんな感じになる。