Ext JS の味見 - 1

ExtJS

「Ext JS をインストールせずに、簡単に体験してみる。」
まだ、Ext JS を使ったプログラミングを知らない人を対象に、少しばかり味見をしてもらう連載企画をやってみる試み。簡単にコードを読めるサイズで、Ext JS のパワーを少しずつ伝えて行ければ…と思っている。

まずは、タブパネルの紹介。実際に動作するコードなので、コピペしてファイルに保存すれば、動作を確認できる。

<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 sample1() {
    new Ext.TabPanel({
      height:     300,          // パネルの高さ
      width:      300,          // パネルの幅
      activeItem: 0,            // 最初に有効なタブ
      renderTo:   'foo',        // 表示する html のタグの id
      items: [{                 // タブアイテムの配列
        title:    'タブ 1',     // 最初のタブの見出し
        html:     '最初のタブ'   // タブ内のコンテンツ
      }, {
        title:    'タブ 2',     // 二つ目のタブの見出し
        html:     '二つめのタブ'  // 二つ目のコンテンツ
      }]
    });
  }
  
  Ext.onReady(function() {
    sample1();
  });

  </script>
</head>
<body style="margin:5mm;">
  <h1>Ext JS の味見 - 1</h1>
  <br />
  <div id="foo"></div>
</body>

</html>