レイアウト

ExtJS

もっともよく使用されるレイアウト Ext.Viewport のサンプル。

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">

<title>ボーダーレイアウト</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-gray.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<style type="text/css">
</style>

<script type="text/javascript">
Ext.onReady(function(){
	var viewport = new Ext.Viewport({
        layout:'border',
        items:[
            {
                region:'north',
                contentEl: 'north',
                height:32
            },{
                region:'east',
                title: 'East Side',
                collapsible: true,
                split:true,
                width: 225,
                minSize: 175,
                maxSize: 400
            },{
                region:'south',
                title:'South',
                contentEl: 'south',
                collapsible: true,
                split:true,
                height: 100,
                minSize: 100,
                maxSize: 200
            },{
                region:'west',
                title:'West',
                contentEl: 'west',
                collapsible: true,
                split:true,
                width: 200,
                minSize: 175,
                maxSize: 400
            },{
                region:'center',
                title: 'center',
                contentEl: 'center',
				autoScroll:true
            }
         ]
    });
});
</script>
</head>
<body>
	<div id="north">
	    <p>North</p>
	</div>
	<div id="east">
	</div>
	<div id="south">
	</div>
	<div id="west">
	</div>
	<div id="center">
	</div>
</body>
</html>

レイアウトは north east south west center の五つで構成されてる。JavaScriptでレイアウトを記述しコンテンツは body 配下の div タグに書けばよい。