JavaScript

ExtJSでViewportを使用しないでLayoutする方法です。

前にも記載したのですが、Viewportはお手軽に使える一方、画面を乗っ取ってしまうので
画面の一部のコンポーネントとして組み込むことが出来ません。

Panelのみでサンプルを作成してみました。

Ext.onReady(function() {

Ext.get(document.body).update('<div id="test1"></div>');
new Ext.Panel({
	id: 'hoge',
	//styleを'viewport'に
    defaultType: 'viewport',
	//render先は
    renderTo: 'test1',
	//frameで枠を表示
	frame: true,
	//タイトル設定
	title: 'test1 title',
	//widthの設定
	//width: 400,
	width: '100%',
	height: 600,
	//autoHeight: true,
	//ウィンドウリサイズイベントを監視し内容を再描画する
	//「width: '100%'」対応
	monitorResize: true,
	//layout方法は「border」
	layout: 'border',
	//子要素に対し標準設定
	defaults: {
				xtype: 'panel',
				autoScroll: true, 
				minSize: 30,
				maxSize: 100,
				//パネルの開閉
				collapsible: true,
				frame: true
				},
	items: [{
		//regionでこのパネルは「north」=上へ
		region: 'north',
		//ヘッダー表示
		header: true,
		height: 50,
		//split表示On
		split: true,
	    html: 'hoge HTML north'
	},{
		//regionでこのパネルは「west」=左へ
		region: 'west',
		width: 50,
		//split表示On
		split: true,
	    html: 'hoge HTML west'
	},{
		//regionでこのパネルは「east」=右へ
		region: 'east',
		//タイトルを設定すると自動的にヘッダー表示がOnになる
		title: 'east title',
		width: 50,
		//split表示On
		split: true,
	    html: 'hoge HTML east'
	},{
		//regionでこのパネルは「south」=下へ
		region: 'south',
		width: 50,
		//split表示On
		split: false,
	    html: '<p>hoge HTML south　「split: false」</p>'
	},{
		//regionでこのパネルは上「center」メイン画面
		region: 'center',
	    html: 'hoge HTML center'
	}]			
});

});

また、親、子ともframeをfalseにすると丸みが無くなり、標準？表示になります。
「frame: false」

themeの設定では初めに「ext-all.css」を設定しその後に「xtheme-gray.css」などを
設定すれば変えられます。
　

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

標準では「gray」が入っており、ExtJSのExtensionsのページでも入手できます。

ExtJSにてお手軽にStyleを設定する方法

・「baseCls: 'x-plain'」
スタイルシート内の'x-plain'を使用する

・「defaultType: 'textfield'」
ExtJSで予め決められているComponentMgr　Typeによって大雑把に決める

予断だが、Styleの編集はもちろん他にも出来るタイミングはある
また、最終的にはcssを直接編集することでほとんどのLayoutを修正できる。

ExtJSにはTemplateも用意されておりExtensionsでRegstすればDownload可能！

Elementに対して各役割を覚書

・「renderTo: hoge」
id=hogeのElementに対して描画する

・「contentEl: hoge」
id=hogeのElement内容を使用して描画する

・「id: 'hoge'」
Elementのidを設定、付けなければExtJSにて自動生成

既存や新規のdivに対しExtJS.Componentに変えるには

「renderTo: ‘test’」とElementを指定して新規にComponentを生成する

以下サンプル

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'My HTML content'
});