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>
0 件のコメント:
コメントを投稿