第3回ExtJS勉強会＠名古屋 11/27 Ext.Panelからはじめるコンポーネントの基礎
Ext.Panelからはじめるコンポーネントの基礎
ExtJS勉強会＠名古屋 11/27 ExtJS初心者ユーザー向けセッションの資料になります。
第3回ExtJS勉強会＠名古屋についてはこちらへ
第3回extjs勉強会＠名古屋（11月）を開催します
1.パネルを作る。
とりあえず簡単なパネルを作ってみます。
・HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>ExtJS名古屋勉強会 パネルサンプル シンプル</title>
<link rel="stylesheet" type="text/css" href="../js/ext/resources/css/ext-all.css" />
<!--Loading Ext JS--->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<!--Loading myApp.js--->
<script type="text/javascript" src="panel_sample.js"></script>
</head>
<body>
<div id="panel-target"></div>
</body>
</html>
idがpanel-targetというdiv要素を一つ記述しておきます。javascript側でこのdivにパネルを配置します。
・Javascript
Ext.onReady(function(){
new Ext.Panel({
renderTo:'panel-target',
title:'シンプルなパネル',
bodyStyle:'padding:50px;text-align:center;',
html:'<h1>パネルができました。</h1>'
})
});
これだけでパネルができあがります。
・実行結果
シンプルなパネル
Ext.Panelクラスを使って新しいパネルを生成します。生成するパネルに初期の設定として様々なコンフィグオブションを指定することができます。
このサンプルで設定しているコンフィグオプションはたった４つだけです。
renderToで指定したdiv要素にパネルをレンダリングしています。対象となるdiv要素のidを文字列で指定します。またrenderTo:Ext.getBody()とするとbody要素にレンダリングをすることもできます。
titleに文字列を設定するとパネルの上部にタイトルバーを配置して、その文字を指定できます。
htmlはパネル内の要素です。htmlを文字列で直接記述しています。ここではh1要素を一つ置いています。
bodyStyleはパネルの内側に指定するスタイルです。無くてもよいですが、ここではパネルの要素であるh1の見た目を少しよくするために設置しています。
またパネルにレイアウトと子となるパネルを設定することで、viewportのように複数のパネルを並べることができます。
Javascript側を変更します。
・javascript
Ext.onReady(function(){
var centerPanel = new Ext.Panel({
region:'center',
title:'シンプルなパネル',
bodyStyle:'padding:50px;text-align:center;',
html:'<h1>中央パネルができました。</h1>'
});
var southPanel = new Ext.Panel({
region:'south',
title:'シンプルなパネル',
bodyStyle:'padding:50px;text-align:center;',
html:'<h1>南パネルができました。</h1>'
});
//親となるパネル
var panel = new Ext.Panel({
renderTo:'panel-target',//レンダリング先
layout:'border',//レイアウトを設定する
height:500,//高さの設定が必要
title:'親パネル',
items:[
centerPanel,
southPanel
]
});
});
・実行結果
パネルのレイアウト
layoutコンフィグを使うとパネルにもViewportと同じようにレイアウトを設定できます。
viewportについては前回の勉強会の資料が参考になります。
http://extjs.blog.sus4.co.jp/2009/10/21/extjs-tutorial-3/
３つのパネルを作り、そのうち１つを親のパネルとして残りの２つを配置しています。ボーダーレイアウトを指定しているので、コンフィグオプションにregionを追加しています。renderToは親パネルにだけ設定します。
親パネルの変更点はlayoutコンフィグの他にはhtmlを直接記述していた代わりに、itemsとしてパネルを設定しています。
2.xtypeを使ってパネルを作る
http://extjs.blog.sus4.co.jp/2009/11/11/extjs-tutorial5/
xtypeの使い方について解説します。
3.Ext.Panelクラスについて
http://extjs.blog.sus4.co.jp/2009/11/12/extjs-tutorial6/
Ext.Panelクラスについてもう少し詳しく見ていきます。
4.タブパネルを作る
http://extjs.blog.sus4.co.jp/2009/11/13/extjs-tutorial7/
パネルを組み合わせてタブパネルを作っていきます。
おまけ
パネルのコンフィグについて
http://extjs.blog.sus4.co.jp/2009/11/17/extjs-tutorial9/
パネルを生成するときに設定する初期値について、もう少し詳しく載せています。
Ext.TabPanelについてもう少し詳しく
http://extjs.blog.sus4.co.jp/2009/11/13/extjs-tutorial8/
タブパネルの色々な作り方
タブを閉じるときイベント
http://extjs.blog.sus4.co.jp/2009/11/24/ext-tutorial-tabpanel-closeevent/
タブを閉じるときのイベントでの注意点
垂直方向にタブを作るアドオンの紹介
http://extjs.blog.sus4.co.jp/2009/11/18/extjsプラグイン紹介-垂直方向のタブパネル/
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] 第3回ExtJS勉強会＠名古屋 11/27 Ext.Panelからはじめるコンポーネントの基礎 [...]
第5回ExtJS勉強会＠名古屋 2/25 パネル内のエレメントを作成する | ExtJSで楽しくRIA業務アプリ開発
25 2 月 10 at 3:18 PM