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」