Ext JS の味見 - 3

ExtJS

「今回はアコーディオンの例。レイアウト系は今回で終わり。」
Ext JS をインストールせずに、手っ取り早く味見するシリーズも 3 回目。なんとなくレイアウト方法のパターンが見えてきたんぢゃないだろうか? 今回はあえて、前回の Border Layout のコードを流用することで、そのあたりを強調してみた。"左部" でも、"南部エリア" でもないけど、あえて中身はそのままで、"region" などの不要なプロパティを削除しただけなので、パッと見て前回とほとんど同じのなのが分かるハズ。

幸い、"上"、"中"、"下" が合ってるので、Accordion の例としても分かり難いってことはなさそうだしね。

<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 sample3() {
    new Ext.Panel({
      layout:     'accordion',    // Accordion Layout の指定
      height:     300,
      width:      300,
      layoutConfig: {             // レイアウト用の設定
        animate:    true          // 開閉時のアニメーションを有効
      },
      renderTo:       'foo3',     // 表示する html のタグの id
      items: [{                   // アコーディオンのアイテムの配列。
        title:        '上部',
        html:         '北部エリア'
      }, {
        title:        '左部', 
        html:         '西部エリア'
      }, {
        title:        '中央',
        html:         '中央エリア'
      }, {
        title:        '右部',
        html:         '東部エリア'
      }, {
        title:        '下部',
        html:         '南部エリア'
      }]
    });
  }
  
  Ext.onReady(function() {
    sample3();
  });

  </script>
</head>
<body style="margin:5mm;">
  <h1>Ext JS の味見 - 3</h1>
  <h2>- Accordion Layout -</h2>
  <br />
  <div id="foo3"></div>
</body>

</html>

いつものごとく、コードをコピペして html として保存すれば簡単に確認できる。実行するとこんな感じ。