これはどのようにExtJs4にビューポートを作成する方法を示すために単純な例です。
ビューポートは、文書の本文に自分自身をレンダリングし、ブラウザビューポートのサイズに自動的にサイズ自体は、ウィンドウのサイズ変更を管理します。 専用ページで作成したビューポートがあるかもしれません。
ビューポートのスクロールを提供していませんので、自動スクロールconfigを使用して、必要に応じてビューポート内の子パネルがスクロールするために提供する必要があります。
Ext JSのパネル·コンポーネントとは異なり、ビューポートtbarオプションがありません。 だから、あなたはビューにツールバーコンポーネントをアタッチすることはできません。 最善の解決策は、ツールバーには、アプリケーションの北の領域を変換することです。
<！DOCTYPE HTML PUBLIC " - / / W3C / / DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE> ExtJS4ビューポート例</ TITLE> <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.2a/resources/css/ext-all.css" />全トラックcharset="utf-8" src="http://cdn.sencha.io/ext-4.0.2a/ext-all.js"> </ SCRIPT>の<script>内線。アプリケーション（{名： "ビューポート"、打ち上げ：関数（）{Ext.create（ 'Ext.container.Viewport'、{レイアウト： 'ボーダー'、アイテム：[{地域： '北'、国境：falseの場合、高さ：24、tbar：[{テキスト： "新規"、メニュー：[{テキスト： "新規追加X '、ハンドラ：関数（）{/は/メニュー項目Ext.Msg.alert"新しいXを追加 "するハンドラを追加する（ '警告'、 '！新しいX項目を追加します'）;}}、{テキスト： "新Yを追加しますが、 '}]}、{テキスト：'リフレッシュ '}、{テキスト：'ツール '}、' - > '、 {テキスト： 'オプション'、iconCls： 'options_icon'、メニュー：[{テキスト： 'ユーザー情報'}、{テキスト： '設定'}、{テキスト： "スイッチのテーマ '}]}、{テキスト：'ヘルプ ' }、 ' - '、{テキスト： 'ログアウト'}]}、{地域： '西'、/ /折りたたみ：真、スプリット：trueの場合は、タイトル： 'ナビゲーション'、幅：150 / /はTreePanelまたはAccordionLayoutを使用することができますのナビゲーションアイテム}、{地域： '南'、高さ：26、/ * BBAR：[/ /下のバー{xtypeを： 'ボタン'、テキスト： 'ボタン1'}] * / dockedItems：[{xtypeを： 'ツールバー'、ドック：'底 '、アイテム：[{xtypeを： "ボタン"、テキスト：'表示の警告をクリア（＆C） "、ハンドラ：関数（）{varのSB = Ext.getCmp（ 'BASIC-ステータスバー'）; sb.setStatus （{テキスト： "おっと！"、iconCls： 'X-STATUS-エラー'、明確にはtrue / /自動クリア設定した間隔の後に}）;}}、{xtypeを： "ボタン"、テキスト： 'ビジー状態表示 " 、ハンドラ：関数（）{varのSB = Ext.getCmp（ 'BASIC-ステータスバー'）; / /何か処理であることを示すためにステータスバーを設定します。sb.showBusy（）;}}、{xtypeを： 'ボタン'、テキスト： 'クリアステータス'、ハンドラ：関数（）{varのSB = Ext.getCmp（ 'BASIC-ステータスバー'）; / /一度に完了sb.clearStatus（）;}}、 ' - '、 'プレーンテキスト']} ]}、{地域： '東'、タイトル： "東アジアパネル"、折りたたみ：真、スプリット：trueの場合、幅：150}、{地域： '中央'、xtypeを： 'タブパネル'、/ /タブパネル自体がタイトルを持っていませんactivetabに：trueの場合、アイテム：デフォルトの自動スクロールでアクティブ0、/ /最初のタブ}]}）;}} {表題： "デフォルトタブ"は、html '最初のタブ\' sの内容その他 "が動的に追加されることがあります。} ）</ SCRIPT> </ HEAD> <BODY> </ BODY> </ HTML> 
