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」
