Ext JS の味見 - 2

ExtJS

「今回は、パネル内を分割してみる。」
Border Layout を使って、領域分割するサンプル。プロパティの設定だけで、領域の拡大縮小や、折畳みもできる。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 sample2() {
    new Ext.Panel({
      layout:     'border',
      height:     300,
      width:      300,
      renderTo:       'foo2',     // 表示する html のタグの id
      items: [{                   // 各領域に表示するパネルの配列
        region:       'north',    // 領域の指定
        split:        true,       // 領域の拡大縮小を可能にする
        title:        '上部',
        html:         '北部エリア'
      }, {
        region:       'west',   // 領域の指定
        title:        '左部', 
        html:         '西部エリア'
      }, {
        region:       'center', // 領域の指定。センターだけは必須。
        title:        '中央',
        html:         '中央エリア'
      }, {
        region:       'east',   // 領域の指定
        split:        true,     // 領域の拡大縮小を可能にする
        collapsible:  true,     // 折りたたみを可能にする
        title:        '右部',
        html:         '東部エリア'
      }, {
        region:       'south',  // 領域の指定
        title:        '下部',
        html:         '南部エリア'
      }]
    });
  }
  
  Ext.onReady(function() {
    sample2();
  });

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

</html>

動かすと、こんな感じ。