Ext JS の味見 - 6 編集

ExtJS

「ボタンをいろいろ。」
Ext JS が用意している標準的なボタンの紹介。名前と、ボタンを押した時の処理を渡すだけの簡単実装。

bbar, tbar のところは、ボタンかどうか分かり難いので、実際に開発する時はアイコンを付けることになる。extjs.com に用意されてるサンプルは、ほとんど (すべて?) アイコンが付いてるところから見て、アイコンを付ける前提でデザインされてるのだろう。

では、早速ソースコードを。

<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 sample6() {
    // ボタンを押された時の処理
    var func = function(btn, evt) {
      Ext.Msg.alert('Message', '"' + btn.text + '" が押されました');
    };
  
    var panel = new Ext.Panel({
      title:      'TestPanel',
      height:     300,
      width:      300,
      tbar: [                             // 上部のツールバー
        {text: 'ボタン1', handler: func},
        {text: 'ボタン2', handler: func}
      ],
      bbar: [                             // 下部のツールバー
        {text: 'ボタン3', handler: func},
        {text: 'ボタン4', handler: func},
        '->',                             // 以後のボタンを右寄せ
        {text: 'ボタン5', handler: func, enableToggle: true} // トグルボタンも可能
      ],
      buttons: [                          // ボタンの配列
        {text: 'ボタン6', handler: func},
        {text: 'ボタン7', handler: func}
      ],
      buttonAlign:  'center'          // ボタンをセンタリング
    });

    return panel;
  }
  
  Ext.onReady(function() {
    var panel = sample6();
    panel.render('foo6');
  });

  </script>
</head>
<body style="margin:5mm;">
  <h1>Ext JS の味見 - 6</h1>
  <h2>- ボタン類のサンプル -</h2>
  <br />
  <div id="foo6"></div>
</body>

</html>

今回の動作画面は下図の通り。今回は、モーダルダイアログが出ているところの画像なので、ダイアログ以外のところにはマスクがかかってる。このあたりも Ext JS が自動的にやってくれる。