Archive for 11 月, 2009
オライリー「JavaScript第5版」読書会のお知らせ
次回（第3回）ExtJS勉強会でコードリーディングを担当していただく岩田さん（メガネラボ）から、JavaScript第5版の読書会のお知らせをいただきましたので、ポストします。
概要は以下のようになります。
11月21日（土）13時より，吹上ホール 第10会議室で行うことになりました。
詳細は，以下をご参照ください．
■名古屋のJavaScript勉強会「DeLLa.JS」のGoogleグループ
http://groups.google.com/group/dellajs/web/della-js-javascript5-12■参加登録はこちらから
http://atnd.org/events/2134
というわけで、ExtJSでもJavaScriptのコードリーディングを始めていますが、もっとJavaScriptについて知りたいという方はぜひご参加ください。
野村 亮之
2004年 名古屋市立大学芸術工学部在学中に株式会社sus4を設立・取締役に就任（現職）。2005年同大学を卒業。
デザイン視点でのウェブサービスの在り方をアプローチの基本として、さまざまなウェブサービス構築に従事。
2006年8月日本初のオンライン動画編集サービスClipCast(http://clipcast.jp/)を開始。2009年7月OTSベース動画解析サービスVideoAnalytics(http://video-analytics.jp/)を開始。
2009年8月Ext Japan LLCにてSenior Software Architectに就任。
Twitter Weekly Updates for 2009-11-15
- 11月27日（金）に第3回の勉強会を開催しますのでそろそろ来られる方は参加表明お願いします(Twitter上でも可能です)http://bit.ly/4vVLiA #extjs_nagoya #
Powered by Twitter Tools
野村 亮之
2004年 名古屋市立大学芸術工学部在学中に株式会社sus4を設立・取締役に就任（現職）。2005年同大学を卒業。
デザイン視点でのウェブサービスの在り方をアプローチの基本として、さまざまなウェブサービス構築に従事。
2006年8月日本初のオンライン動画編集サービスClipCast(http://clipcast.jp/)を開始。2009年7月OTSベース動画解析サービスVideoAnalytics(http://video-analytics.jp/)を開始。
2009年8月Ext Japan LLCにてSenior Software Architectに就任。
Twitter Updates for 2009-11-14
- 11月27日（金）に第3回の勉強会を開催しますのでそろそろ来られる方は参加表明お願いします(Twitter上でも可能です)http://bit.ly/4vVLiA #extjs_nagoya #
Powered by Twitter Tools
野村 亮之
2004年 名古屋市立大学芸術工学部在学中に株式会社sus4を設立・取締役に就任（現職）。2005年同大学を卒業。
デザイン視点でのウェブサービスの在り方をアプローチの基本として、さまざまなウェブサービス構築に従事。
2006年8月日本初のオンライン動画編集サービスClipCast(http://clipcast.jp/)を開始。2009年7月OTSベース動画解析サービスVideoAnalytics(http://video-analytics.jp/)を開始。
2009年8月Ext Japan LLCにてSenior Software Architectに就任。
Twitter Updates for 2009-11-14
- 11月27日（金）に第3回の勉強会を開催しますのでそろそろ来られる方は参加表明お願いします(Twitter上でも可能です)http://bit.ly/4vVLiA #extjs_nagoya #
Powered by Twitter Tools
野村 亮之
2004年 名古屋市立大学芸術工学部在学中に株式会社sus4を設立・取締役に就任（現職）。2005年同大学を卒業。
デザイン視点でのウェブサービスの在り方をアプローチの基本として、さまざまなウェブサービス構築に従事。
2006年8月日本初のオンライン動画編集サービスClipCast(http://clipcast.jp/)を開始。2009年7月OTSベース動画解析サービスVideoAnalytics(http://video-analytics.jp/)を開始。
2009年8月Ext Japan LLCにてSenior Software Architectに就任。
ExtJS入門8 Ext.Panelについて2
Ext.Panelについての基本は前回やったので、今回はもう少し発展したパネル作り方を取り上げてみます。
前回の記事はこちら
ExtJS入門7 Ext.TabPanelでタブパネルを作る
http://extjs.blog.sus4.co.jp/2009/11/13/extjs-tutorial7/
autoTabsを使ってパネルを作る。
パネルのコンフィグでオートコンフィグを指定すると、htmlに記述したエレメントをExtJSのタブパネルにできます。
まず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名古屋勉強会 タブパネルサンプル xtabでタブを作る</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="tab_panel_xtab.js"></script>
</head>
<body>
<h1>1.autoTabsを使う</h1>
<div id="my-tabs">
<div class="x-tab" title="Tab 1">これがタブになる1</div>
<div class="x-tab" title="Tab 2">これがタブになる2</div>
</div>
<br />
<h1>2.divを入れ子にした場合</h1>
<div id="my-tabs2">
<div class="x-tab" title="入れ子のDIV">
<div class="x-tab" title="Tab 3">これがタブになる3</div>
<div class="x-tab" title="Tab 4">これがタブになる4</div>
</div>
<div class="x-tab" title="他のタブ">他のタブ</div>
<div>ただのdivはそのまま表示される</div>
</div>
<br />
<h1>3.これはダメ</h1>
<p>autoTabsはレンダリングするDIVの要素のx-tabをタブにするので,x-tabに指定していてもdivの外にいるとダメ</p>
<div id="my-tabs3"></div>
<div class="x-tab" title="Tab NG1">divから出ているとダメ</div>
<div class="x-tab" title="Tab NG2">これも出てるからダメ</div>
</body>
</html>
div要素のクラスに”x-tab”とあります。この要素がタブパネルになります。”x-tab”は”イーエックスティ・タブ”の略だと思います。
ここでは3種類の書き方を試しています。それぞれのタブパネルは指定のidのdivにレンダリングされます。
Javascript側は以下のようになります
Ext.onReady(function(){
var tabs1 = new Ext.TabPanel({
applyTo: 'my-tabs',
activeTab: 0,
deferredRender: false,
autoTabs: true
});
var tabs2 = new Ext.TabPanel({
applyTo: 'my-tabs2',
activeTab: 0,
deferredRender: false,
autoTabs: true
});
var tabs3 = new Ext.TabPanel({
applyTo: 'my-tabs3',
activeTab: 0,
deferredRender: false,
autoTabs: true
});
});
autoTabsを使ったタブパネル
実行結果
contentElを使ってパネルを作る。
autoTabsを使った場合は、htmlの要素にあらかじめ”x-tab”というクラスを指定しなければ行けませんでした。contentElでは、既存の要素を指定してExtJSのタブパネルの要素とします。ターゲットになるエレメントのidは好きなものでかまいません。
<!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名古屋勉強会 タブパネルサンプル contentElでタブを作る</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="tab_panel_nonemarkup.js"></script>
</head>
<body>
<h1>autoTabsを使う</h1>
<div id="my-tabs">
<div id="tab1" class="x-hide-display">タブ1</div>
<div id="tab2" class="x-hide-display">タブ2</div>
</div>
<h1>divを入れ子にした場合</h1>
<div id="my-tabs2">
<div class="x-tab" title="入れ子のDIV">
<div id="tab3" class="x-hide-display">タブ3</div>
<div id="tab4" class="x-hide-display">タブ4</div>
</div>
<div id="tab5">
他のタブ 要素のclassに"x-hide-display"を指定しないと、起動時に丸見えになる。
</div>
</div>
</body>
</html>
Javascript側
Ext.onReady(function(){
var tabs1 = new Ext.TabPanel({
renderTo: 'my-tabs',
activeTab: 0,
items:[
{contentEl:'tab1', title:'Tab 1'},
{contentEl:'tab2', title:'Tab 2'}
]
});
var tabs2 = new Ext.TabPanel({
renderTo: 'my-tabs2',
activeTab: 0,
items:[
{contentEl:'tab3', title:'Tab 3'},
{contentEl:'tab4', title:'Tab 4'},
{contentEl:'tab5', title:'Other'}
]
});
});
実行結果
contentElを使ったExt.TabPanelの作成
contentElを使って構築している場合は、表示されるべきパネル以外のエレメントは構築された段階では非表示にしなっていないと行けません。サンプルではExtJS付属のCSSを使って非表示にしています。手動でdisplay:noneを設定してもかまいません。x-hide-displayを設定しておくと、タブ選択時の非表示から表示への切り替えはExtJSが行ってくれます。autoTabsではExt.TabPanelクラスの機能で、contentElはExt.Panelの機能を使っています。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門7 Ext.TabPanelでタブパネルを作る
Ext.Panelを使うと、ExtJSの画面構成の基礎となるプレーンなパネルを生成することができました、ExtJSで用意されているウィジットには様々な機能を持ったパネルクラスが用意されています。今回はExt.TabPanelクラスを取り上げます。
ExtJS入門8 Ext.Panelについて2 autoTabsとcontentElを使ってタブパネルを作る。
http://extjs.blog.sus4.co.jp/2009/11/13/extjs-tutorial8/
Ext.TabPanel
ExtJS -3.0 日本語APIドキュメント – Ext.TabPanel
http://extdocs.xenophy.com/?class=Ext.TabPanel
継承は以下のように行われています
Observable > Component > BoxComponent > Container > Panel > TabPanel
Ext.TabPanelパネルのサブクラスの一つです。パネルの機能をそのまま使うことができます。
タブパネルはタブを使って、複数の切り替え可能なパネルを生成します。
基本的にはViewportとそのitemsのような形で、複数のパネルを設定していきます。APIドキュメントでは次のように解説しています。
タブ内のComponentは、単純なPanelクラス、またはそれを継承したクラスです。
要するにパネルであれば何でもタブに入れることができるということです。
Viewportとパネルの作り方さえ分かっていれば、タブパネルは簡単です。まず単純な２つのタブを持つタブパネルを作ります。
Ext.onReady(function(){
//タブを作る itemsの以下のパネルはxtypeで指定すると遅延レンダリングができる。
var tabs = new Ext.TabPanel({
activeTab: 0,
items: [
{
title: 'タブパネル1',
html: '<h1>１つ目のタブパネル</h1>'
},{
title: 'タブパネル2',
html: '<h1>2つ目のタブパネル</h1>'
}
]
});
//タブパネルをビューポートに配置する
var viewport = new Ext.Viewport({
id:'viewport',
layout:'fit',
items: tabs
});
});
シンプルなタブパネル
コードを見るとExt.TabPanelのコンフィグはほとんどViewportやExt.Panelのレイアウトの場合と同じです。イメージ的にはタブというレイアウトが自動的に設定されているパネルのような感じです。itemsにはパネルをxtypeで指定しています。activeTabコンフィグはタブパネル起動時にどのパネルを表示するかを指定します。デフォルトではfalseが設定されているので、activeTabを指定しなかった場合はどのタブも選択されず真っ白なパネルが表示されてしまいます。基本的にactiveTabを0にしておけば、起動時に一番左のタブが選択されます。activeTabsはパネルのidを文字列で指定することもできます。
タブパネルではxtypeによる遅延レンダリングが重要です。タブ表示では画面に見えるタブパネルは一つだけで、その他は見えません。遅延レンダリングを利用しない場合はタブパネル起動時にすべてのタブパネルが一気に生成されます。どこかのパネルで処理を手間取ると全体に影響がでてしまいます。タブパネルの子となる要素ではxtypeを使うべきです。
ちなみにxtypeを使わない場合はこうなります。
Ext.onReady(function(){
var tabs = new Ext.TabPanel({
activeTab: 0,
items: [
new Ext.Panel({
title: 'タブパネル1',
html: '<h1>１つ目のタブパネル</h1>'
}),
new Ext.Panel({
title: 'タブパネル2',
html: '<h1>2つ目のタブパネル</h1>'
})
]
});
//タブパネルをビューポートに配置すると
var viewport = new Ext.Viewport({
id:'viewport',
layout:'fit',
items: tabs
});
});
またタブパネル自体をxtypeで指定して生成することができます。APIドキュメントのここに書いています。
Ext.TabPanelのxtype
下のサンプルではViewportのitemsにxtypeでタブパネルを指定しています。
Ext.onReady(function(){
var viewport = new Ext.Viewport({
id:'viewport',
layout:'fit',
items:
{
id:'tabs',
xtype:'tabpanel',
activeTab: 'firstTab',
defaults:{
bodyStyle:'padding:50px;text-align:center;'
},
items: [
{
id:'firstTab',
title: 'タブパネル1',
html: '<h1>１つ目のタブパネル</h1>'
},{
id:'secondTab',
title: 'タブパネル2',
html: '<h1>2つ目のタブパネル</h1>'
}
]
}
});
});
タブパネルの主なコンフィグ・オプションの設定
コンフィグの設定はほぼExt.Panelクラスと同じです。以下にタブパネル独自のコンフィグを挙げておきます。
・タブの位置を変更する。
tabPosition:文字列で指定。topまたはbottomのみ設定可能
・タブバーの背景を透明にする
plain : true/false,
・タブのサイズを設定
resizeTabs: true/false
resizeTabs: true/false
minTabWidth: 数値で指定
tabWidth: 数値で指定
itemsの中のパネルに設定できるコンフィグ
・タブの閉じるボタン(×ボタン)を追加する
closable: true/false
色々なタブのコンフィグを使ってみたサンプルが以下になります。使いたい設定をコメントを外せば使えます。
Ext.onReady(function(){
var viewport = new Ext.Viewport({
id:'viewport',
layout:'fit',
items:
{
id:'tabs',
xtype:'tabpanel',
//起動時に選択されるタブ 数値(タブの位置)もしくは文字列(id)で指定。
activeTab: 0,
//タブバーの背景を透明に
//plain : true,
//タブのサイズを設定 自動的にタブストリップの幅に合わせる
//resizeTabs:true,
/*
resizeTabs:true,
minTabWidth:50,
tabWidth:300,
*/
//tabMargin:100,
//tabPosition:'bottom',
//タブのスクロール設定 bottomの時は使えない。
enableTabScroll : true,
//タブスクロールのアニメーション
animScroll : true,
defaults:{
bodyStyle:'padding:50px;text-align:center;'
},
items: [
{
id:'firstTab',
title: 'タブパネル1',
//パネルごとのオプション
//閉じるボタンをつける
closable: true,
html: '<h1>１つ目のタブパネル</h1>'
},{
id:'secondTab',
title: 'タブパネル2',
layout:'border',
items:[
{
title:'Center Panel',
region:'center',
html:'ボーダーレイアウトのパネル'
},{
title:'North Panel',
region:'north',
html:'ボーダーレイアウトの上パネル'
},{
title:'South Panel',
region:'south',
html:'ボーダーレイアウトの下パネル'
},{
title:'East Panel',
region:'east',
html:'ボーダーレイアウトの右パネル'
},{
title:'West Panel',
region:'west',
html:'ボーダーレイアウトの左パネル'
}
]
},{
title: 'タブ・・・・・・・・・・・・・・・パネル',
closable: true,
html: '<h1>その他タブパネル</h1>'
},{
title: 'タブ・・・・・・・・・・・・・・・パネル',
closable: true,
html: '<h1>その他タブパネル</h1>'
},{
title: 'タブ・・・・・・・・・・・・・・・パネル',
closable: true,
html: '<h1>その他タブパネル</h1>'
},{
title: 'タブ・・・・・・・・・・・・・・・パネル',
closable: true,
html: '<h1>その他タブパネル</h1>'
}
]
}
});
});
タブのスクロールを設定時
タブパネルは特殊なレイアウトを持ったパネルと考えるとよいと思います。最初はパネルで作ってたのだけど、後から機能を追加しないといけないのにパネルを置く場所無いという場合も、大きな変更を加えずにタブパネル化ができるので便利です。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門6 Ext.Panelクラスについて
今回はExt.Panelクラスについてです。Ext.PanelクラスはExtJSの開発では、ユーザーの目に見える部分を構築する要素になります。
パネルクラスは以下のように継承されています。
Observable
Component
BoxComponent
Container
Panel
APIドキュメントでExt.Panelクラスを開くと、こんな感じで定義されています。
Ext.Panelクラス
パッケージ: Ext
定義ファイル: Panel.js
クラス: Ext.Panel
サブクラス: ButtonGroup, TabPanel, Tip, Window, FieldSet, FormPanel, GridPanel, TreePanel
継承元: Container
xtype: panel
http://extdocs.xenophy.com/?class=Ext.Panel
パネルはContainerのサブクラスでxtypeはpanelとして定義されています。またサブクラスにはTabPanelやGridPanelがあります。
さらにこう書かれています。
パネルは、特定の機能性を持つコンテナと、アプリケーション指向のユーザインタフェースのための完全な構造的基礎となる構造的コンポーネントです。
パネルは、継承元である Ext.Container のプロパティによって、レイアウトで配置することができ、そして子コンポーネントを含むことができます。
パネルクラスはExtJSのUIを含める目に見える部分を構成する単位になります。パネルごとに機能を持たせそれをブラウザ上に配置することで複数の機能を持った画面を構成できます。
またViewportのitemsに指定するように、パネルは他のコンポーネントの中にレイアウトで配置することができ、さらに子のコンポーネントも同じように持つことができる(Ext.PanelがExt.Containerのサブクラス)ということになります。つまりパネルはViewportでやったのと同じようにレイアウトを設定して、さらに細かく画面を分割できるということです。
実際のところパネルクラスで使う機能の多くはその上位クラスであるContainerやComponentで実装されています。いきなりComponentクラス等の上位クラスを使うには、ハードルが高いので、パネルクラスをスタート地点にしてContainer、BocComponentと理解していく方が見通しがよいと思います。
まず簡単なサンプルで実際にパネルを作ってみます。
Ext.onReady(function(){
var centerPanel = new Ext.Panel({
id:'centerPanel',
region:'center',
title:'Center Panel',
bodyStyle:'padding:50px;text-align:center;',
html:'<h1>パネル</h1>',
margins:'3 3 3 3'
})
var viewport = new Ext.Viewport({
layout:'border',
items:[
centerPanel,
{
id:'southPanel',
region:'south',
xtype:'panel',
title:'South Panel',
bodyStyle:'padding:50px;text-align:center;',
html:'<h1>下パネル</h1>',
margins:'3 3 3 3'
}
]
});
});
ここでは2つの作り方でパネルを生成しています。centerPanelでは new Ext.Panelでパネルを作り、Viewportに渡しています。下パネルはオブジェクトリテラルのxtypeでパネルを生成しています。xtypeでpanelをわざわざ指定していますが、xtypeのデフォルトはpanelなので省略しても大丈夫です。この2つの生成の違いはこちらで解説しています。
ExtJS入門5 xtypeを使ってパネルを作る。
次にViewportに２つのパネルを配置して、さらに各パネル内をボーダーレイアウトにしてみます。せっかくなのでxtypeを使って書いていきます。new Ext.Panel()と書き換えても見た目は同じなります。
Ext.onReady(function(){
new Ext.Viewport({
id:"viewport",
layout:'column',
listeners:{
resize:function(){
//画面にフィットさせる
var left = Ext.getCmp('leftPanel');
left.setHeight(Ext.getCmp('viewport').getHeight());
var right = Ext.getCmp('rightPanel');
right.setHeight(Ext.getCmp('viewport').getHeight());
}
},
items:[ //viewportの子アイテム
{
id:'leftPanel',
title:'Left Panel',
columnWidth: .5,
layout:'border',
items:[ // 左のパネルの子アイテム xtype = panel
{
id:'leftCenter',
title:'左の真ん中',
region:'center',
html:"左真ん中"
},
{
id:'leftNorth',
title:'左の上',
region:'north',
html:"左真ん上"
},
{
id:'leftSouth',
title:'左の下',
region:'south',
html:"左真ん下"
},
{
id:'leftEast',
title:'左の右',
region:'east',
html:"左真ん右"
},
{
id:'leftWest',
title:'左の左',
region:'west',
html:"左真ん左"
}
]
},
{ //ここからが右のパネル xtype = panel
id:'rightPanel',
title:'Right Panel',
columnWidth: .5,
layout:'border',
items:[ // 右のパネルの子アイテ�
{
id:'rightCenter',
title:'右の真ん中',
region:'center',
html:"右の真ん中"
},
{
id:'rightNorth',
title:'右の上',
region:'north',
html:"右の上"
},
{
id:'rightSouth',
title:'右の下',
region:'south',
html:"右の下"
},
{
id:'rightEast',
title:'右の右',
region:'east',
html:'右の右'
},
{
id:'rightWest',
title:'右の左',
region:'west',
html:'右の左'
}
]
}
]
});
});
Viewportの設定と同じようにパネルにもlayoutを設定して、子となるパネル(leftPanel,rightPanel)をitemsに指定しています。ただボーダーレイアウトの中にボーダーレイアウトを入れると各パネルの範囲が小さくなるのであまりおすすめはできませんね。普通はタブ + 複数のボーダーやグリッド + アコーディオンで複数のパネルのように入れ子にしていきます。
Ext.Panelは一番プレーンなパネルを生成します。上のサンプルではhtmlに設定した文字を配置しているだけです。Firebugで要素を見ると、Ext.Panelは
<div class="x-panel-body">〜</div>
を作成するだけです。Ext.Panelクラスのサブクラス、例えばグリッドパネルなどはもっと複雑なDOMを構築します。
Viewportのコンフィグに付いているlistenersコンフィグでは、Viewportのイベントに対応した処理を設定できます。ここではViewportのResizeイベントをキャッチしています。Resizeイベントの処理は、子となるleftPanelとrightPanelのリサイズを行っています。このイベント処理を書かないと左右のパネルの高さがきちんと設定されません。イベントやExt.getCmpについてはまた別の機会に詳しく紹介します。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
10月28日（水）に第2回ExtJS勉強会を名古屋で開催しました
10月28日（水）に第2回ExtJS勉強会を名古屋で開催しました。
今回も前回に引き続き、スピーカーをあわせて30名程のExtJSユーザーが参加しました。
次回は、11月27日（金）に開催をしますので、ExtJSに興味のある方はぜひご参加ください。
また、名古屋や東海圏のユーザー事例・活用事例などの発表も随時お待ちしておりますので、勉強会で発表したいという方は、aki@extjs.co.jpまでご連絡ください。
セッション内容：
1．ユーザー事例紹介（株式会社ニューキャスト 川原正隆氏）
エンドユーザー向けに提供している組版アプリケーションを例としてExtJSの優位性を説明していただきました。
2. Ext.onReadyからはじめるExtJS（株式会社sus4 佐竹裕行）
手軽に始められるセッションとして、今回から開始しました。まずは、ExtJSのはじめの一歩であるExt.onReadyからViewportの使用方法までを解説しました。
チュートリアルの内容：
3．ExtJSコードリーディングリレー（株式会社ニューキャスト 山本剛氏）
ExtJSのソースコードを見ながら、JavaScriptについて学ぶセッションを東京に先駆けて実施しました。
ExtJSのコードは、JavaScriptのTipsやうまい書き方などが見つけられる貴重なコード群です。その読み方を山本さんに解説してもらいました。次回からは、参加していただいた方に毎回読んでいっていただく形をとっていきます。
野村 亮之
2004年 名古屋市立大学芸術工学部在学中に株式会社sus4を設立・取締役に就任（現職）。2005年同大学を卒業。
デザイン視点でのウェブサービスの在り方をアプローチの基本として、さまざまなウェブサービス構築に従事。
2006年8月日本初のオンライン動画編集サービスClipCast(http://clipcast.jp/)を開始。2009年7月OTSベース動画解析サービスVideoAnalytics(http://video-analytics.jp/)を開始。
2009年8月Ext Japan LLCにてSenior Software Architectに就任。
ExtJS入門5 xtypeを使ってパネルを作る。
xtypeでパネルのタイプを定義する
ViewportのitemsのようにExt.Componentのサブクラス(Ext.Panelなど)を与えるときに、インスタンスを直接渡すのではなく、オブジェクト・リテラルを記述して渡すことができます。
オブジェクトリテラルについてはこちらで詳しく解説されています。
http://builder.japan.zdnet.com/sp/javascript-kickstart-2007/story/0,3800083428,20365303,00.htm
ECMAScriptにおける「オブジェクトリテラル」と言う書式に基づいています。「オブジェクトリテラル」は、次のように定義されています。
「{ }」（中括弧）で囲み、中にプロパティをカンマ区切りで複数記述できる。
プロパティは、「プロパティ名 : 値」と言う形式で記述する。
プロパティ名は、識別子／文字列／数値。
値は、代入式の右辺と成り得る式。
ExtJSでコードを少し書いている人にはおなじみの書式ですね。「{}」でかこって、キーと値を設定していくやり方です。
パネルをオブジェクトリテラルで作る場合の基本的な書式はExt.Panelを作るのと同じで。
{
id:'newPanel',
xtype:'panel',
title:'New Panel',
html:'<p>パラグラフ</p>',
}
上のコードで生成されるパネルは下のようにパネルを作るのとほぼ同じ結果になります。
new Ext.Panel({
id:'newPanel',
title:'New Panel',
html:'<p>パラグラフ</p>',
});
xtypeに’panel’を指定しています、これでExt.Panelを生成します。
自分でつくったクラスを使う場合は、xtypeに登録してからでなければxtypeで指定できない。Ext.regを使って登録します。ただしどんな名前でも登録できるので、既にxtypeとして登録してある名前を指定しないように注意。
デフォルトで定義ずみxtypeの一覧
ExtJSのAPIリファレンスのExt.Componentのページへ行くと、定義済みのxtypeの一覧が載っています。
http://extdocs.xenophy.com/?class=Ext.Component
またExt.ComponentのサブクラスのAPIリファレンスへ行くと,そのクラスのxtypeが何か表示されています。
遅延レンダリング(Lazy-Renderer)
xtypeでコンポーネントを作りたいパネルを指定するとオブジェクトリテラルを使ってパネルが生成できました。見た目上はnew Ext.Panel({〜})とほとんどかわらないように見えます。xtypeを使う最大のメリットは遅延レンダリング(Lazy-Renderer)を使うことができるという点です。
オブジェクトリテラルがセットされた時点ではnewされません（インスタンス化されない）。描画が必要になった時に初めてインスタンス化されます。
xtypeでタブパネルを指定するサンプル。
new Ext.Viewport({
layout:'border',
renderTo:Ext.getBody(),
items:[
{
region:'center',
title:'Center Panel',
html:'<p>Center Panel</p>',
bodyStyle:'padding:100px',
minSize:200,
},{
region:'west',
xtype:'tabpanel',
items:[
{
title:'tab1',
html:'タブパネル1'
},{
title:'tab2',
html:'タブパネル2'
}
],
height:90,
width:200,
minSize:200,
maxSize:400,
split:true
}
]
});
ここではwestのコンポーネントにタブパネルを設定しています。タブパネルはさらに子となるパネルを必要とするので、その設定にもオブジェクトリテラルでExt.Panelを設定しています。(xtypeが省略されている場合はExt.Panelとして生成されます)。
通常タブパネルやアコーディオンレイアウトの場合はオブジェクトリテラルでxtypeを指定して、遅延レンダリングを有効にするのが常套手段です。
画面に見えていないパネルは、表示されるときに初めてレンダリングされます。簡単なアプリケーションの場合は遅延レンダリングの効果をあまり実感することはありませんが、AJAXを使ったパネルや画像、Flashを内部に読み込んでいるコンポーネントを使うようになると遅延レンダリングは必須になると思います。またidコンフィグを適切に付けておくことで、Ext.getCmpでオブジェクトリテラルを使って作ったコンポーネントを簡単に指定できますし、デバッグ時にFirebugでも分かりやすくなるので、なるべくidは付けておいたほうがいいと思います。
xtypeを適切に使って、見た目もコードもスマートなアプリを作るように心がけたいです。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS tips ブックマークレットでExtJSを読み込む
このブログに載っているサンプルコードや、簡単なコードをチェックする際に、わざわざHTMLファイルを用意して、ExtJSの読み込むコードを埋め込んで、Java Scriptを書くのは少し面倒くさかったりします。そんなときに使える小技にブックマークレットとFirebugの合わせ技があります。
ExtJSライブラリをブックマークレットで読み込んで、FirebugのコンソールにExtJSのコードを書いていくことができます。
元ネタはここです。
http://extjswordpress.net/extjs-apps-as-bookmarklets/
上記のリンク先からのコードをブックマークして使います。
下にそのコードを見やすく改行したのを展開してみました。
javascript:
var ss=document.createElement('link');
ss.setAttribute('rel','stylesheet');
ss.setAttribute('type','text/css');
ss.setAttribute('href','http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css');
document.getElementsByTagName('head')[0].appendChild(ss);
void(ss);
var core=document.createElement('script');
core.setAttribute('src','http://extjs.cachefly.net/builds/ext-cdn-8.js');
document.body.appendChild(core);
core.onload=function(){Ext.Msg.alert('Ext',%20'ExtJS%20is%20loaded!');};
core.onload=function(){Ext.Msg.alert('Ext',%20'ExtJS%20is%20loaded!');};
void(core);
前半はExtJSのCSSを読み込んでいて、後半はライブラリを読み込んでいます。どちらもextjs.cachefly.netのものを使っています。
最後のところでcore.onloadで２回ExtJSのアラートを読んでいるのがよくわかりません。試しに外したものでやってみましたが、普通に動きました。Firefoxで試したので、ひょっとしたら別のブラウザのためのハックかもしれません。
適当なページ(JSを使っていないページが良い)でブックマークレットをクリックするとExtJSのアラートが出て、ExtJSのライブラリの読み込みが完了します。
あとはFirebugのコンソールに好きなコードを書いて実行または⌘+Returnで実行できます。
元ページによっては多少背景が変だったり、エラーが出たりするのはどうしようものないので、実行に適したページを探しておくといいかもしれません。
実際にFirebugでコードを実行してみるとこんな感じです。
ちなみに元ネタのブログは以前紹介した。ExtizeMeと同じとこ(http://extjswordpress.net)です。世界には色々変な人がいますね。
このsus4 ExtJSブログのサンプルをちょろっと実行したい場合に試しに使ってみてください。
ExtJSのコードを試すための、ちょっとしたtipsでした。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
