2008年2月21日木曜日

ExtJS2.0で既存のHTMLを使う

ExtJSは色んなサンプルがあるが、どれもjavascriptからComponentを作成するものが多い。逆に、このスタイルはWicketと組み合わせれば、Wicketの弱点であるPOHP(言い過ぎ)を存在しなくする事が可能なのでは?と思ったりもするが。WicketでもどぅせServer側でComponentのTreeを構築するんだから、HTMLは勝手に描画しろよ!とか思っちゃいますよね。Swingぽく、paint()とかの中にタグ情報を全部埋め込んでうまいことやってくれ!と。ExtJSなんて、Componentを全部javascriptで書いてしまうこともできるわけで、Wicketもそれに近い事やるんだから。 愚痴は置いといて、HTMLありきの状態でExtJSを使うメモ。メモする必要が無いくらい簡単。サンプルとしてはBorderLayoutを使うサンプルとする。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext-2.0.1/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext-2.0.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0.1/ext-all.js"></script>
<script type="text/javascript" src="ext-2.0.1/source/locale/ext-lang-ja.js"></script>
<script type="text/javascript">
var doLayout = function() {
  var viewport = new Ext.Viewport({
    layout:'border',
    items: [{
      id: 'headerpanel', contentEl: 'h1',
      region: 'north'
    }, {
      id: 'westpanel', title: 'West Panel', contentEl: 'west1',
      region: 'west',
      width: 100, minSize: 100, maxSize: 200,
      collapsible: true, split: true
    }, {
      id: 'southpanel', title: 'South Panel', contentEl: 'south1',
      region: 'south',
      height: 100, minSize: 100, maxSize: 200,
      collapsible: true, split: true
    }, {
      id: 'centerpanel', title: 'Main Content', contentEl: 'center1',
      region:'center',
    }]
  });
  return viewport;
}
Ext.onReady(function() {
  var viewport = doLayout();
});
</script>
<title>TestExtjs</title>
</head>
<body>
<h1 id="h1">HTMLありきでExtjsを使ってみる。</h1>
<div id="west1">ここが西のdiv。</div>
<div id="south1">ここは南のdivです。</div>
<div id="center1">ここが中央のdivだ。</div>
</body>
</html>

コメントを投稿