FC2ブログ

サラリーマンのすらすらIT日記

IT関連を中心とした日々を綴ります。
--/--/--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2010/01/27

ExtJS-フレームを作る

ITProの記事に「分割されたWebページを作るには、いくつファイルを作らないといけない?」というのがありました。

答えは「ページをn分割するなら、n+1個のファイルが必要」です。詳しくは上記サイトの説明をみてください。

Ext JSでは「viewport」というのがあって、フレームを作ることができます。コードとその実行画面はこんな感じです。

new Ext.Viewport({
layout: 'border',
title: 'Viewport',
id: 'myViewport',
items: [{
region: 'north',
id: 'northPane',
title: 'north',
height: 120,
html: '<b>ここは北です。</b>'
},{
region: 'west',
id: 'westPane',
title: 'west',
width: 120,
html: '<b>ここは西です。</b>'
},{
region: 'center',
id: 'centerPane',
title: 'center',
html: '<b>ここは中央です。</b>',
items: [{
xtype: 'tbbutton',
width: 100,
text: 'OK'
}]
},{
region: 'east',
id: 'eastPane',
title: 'east',
width: 120,
html: '<b>ここは東です。</b>'
},{
region: 'south',
id: 'southPane',
title: 'south',
height: 100,
html: '<b>ここは南です。</b>'
}],
renderTo: Ext.getBody()
});


図をクリックすると拡大します。

上下左右をそれぞれnorth,south,west,east、中央をcenterとしてregionを記述します。north,south,west,eastは省略可能で、centerは必ず指定しなければいけません。例えば横2分割の画面ならwest,centerだけ指定すればOK。

このviewportはネスティング(入れ子)もできます。つまりcenterの中にnorth,south,west,east,centerを作ったりすることができるということです。

Ext JSだと1ファイルでできてしまいます。

スポンサーサイト

コメント

コメントの投稿

  • URL
  • コメント
  • パスワード
  • 秘密
  • 管理者にだけ表示を許可する

トラックバック

トラックバックURL:http://sookibizviz.blog81.fc2.com/tb.php/356-1a123fee

■  カレンダー

06 | 2019/07 | 08
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -

■  プロフィール

sookibizviz

Author:sookibizviz
仕事の内容やソフトの紹介を交えながら、日々の悪戦苦闘を綴っていきます。

■  最新記事

■  最新コメント

■  最新トラックバック

■  月別アーカイブ

■  カテゴリ

未分類 (64)
BizViz (24)
IT (1119)
計量 (76)
環境 (26)
数学 (181)
ニュース (46)
本 (187)
音楽 (113)
囲碁 (5)
将棋 (26)
ブログ (14)
日記 (19)

■  FC2カウンター

■  検索フォーム

■  RSSリンクの表示

■  QRコード

QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。