Archive for 12 月, 2009
ExtJS3.1がリリースされました
少し時間があいてしまいましたが、ExtJS3.1がリリースされましたのでお知らせします。
IEでのメモリリーク問題のさらなる改善と、新しいコンポーネントがいくつか追加されています。
詳しくは、ExtJS3.1の紹介を御覧下さい。
野村 亮之
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プラグイン紹介 タグ入力に最適なSuperBoxSelectプラグイン
ExtJS プラグイン紹介 SuperBoxSelect
SuperBoxSelectプラグインは、タグセレクトボックスのFormFieldを作るpluginです。
ComboBoxのようにタグをドロップダウン、メニューで項目セレクトして、いくつも追加できます。
入手先はExt本家のフォーラムからどうぞ、ExtJS2.xも現状のExtJS3.ｘでも動くようです。
3.0.1では問題なく動作しました。
使い方
・HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJSプラグイン superselectboxのサンプル</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--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>
<!--Ext JS Plugins-->
<script type="text/javascript" src="../js/plugin/superboxselect/SuperBoxSelect.js"></script>
<link rel="stylesheet" href="../js/plugin/superboxselect/superboxselect.css" type="text/css" />
<!--my App JS-->
<script type="text/javascript" src="superboxselect_sample.js"></script>
</head>
<body>
<h1 style="background-color:#BDD3EF;">SuperBoxSelectのサンプル</h1>
<div id="tag-form"></div>
</body>
</html>
・Javascript
Ext.onReady(function(){
//ダミーのデータ
var tagData = {
tag:[
{tag_name:'お知らせ',tag_id:1},
{tag_name:'サンプル',tag_id:2},
{tag_name:'チュートリアル',tag_id:3},
{tag_name:'トレーニング',tag_id:4},
{tag_name:'ビジネスExtJS',tag_id:5},
{tag_name:'プラグイン',tag_id:6},
{tag_name:'勉強会',tag_id:7},
{tag_name:'営業向け',tag_id:8},
{tag_name:'業務ウェブアプリケーションTips',tag_id:9},
{tag_name:'業務システム',tag_id:10},
{tag_name:'ExtJS',tag_id:11},
{tag_name:'ExtJSアプリの紹介',tag_id:12},
{tag_name:'ExtJS情報',tag_id:13},
{tag_name:'JavaScript',tag_id:14},
{tag_name:'JSON',tag_id:15},
{tag_name:'Tips',tag_id:16},
{tag_name:'XML',tag_id:17}
]
};
//ダミーのストア
var tagStore = new Ext.data.JsonStore({
data:tagData,
root:'tag',
fields:[
{name:'tag_name'},
{name:'tag_id'}
]
});
var tagForm = new Ext.form.FormPanel({
id:'f2Form',
renderTo: 'tag-form',
title:'SuperBoxSelectを使ったタグフォームのサンプル',
autoHeight: true,
bodyStyle: 'padding:50px;',
width: 700,
items: [{
//SuperBoxSelectのフォームを生成,xtypeはsuperboxselect
xtype:'superboxselect',
id:'superbox_form',
allowAddNewData: true,
fieldLabel: 'Tags',
emptyText: 'タグを入力して[ENTER]もしくはリストから選択',
resizable: true,
name: 'tags',
anchor:'100%',
store: tagStore,
mode: 'local',
displayField: 'tag_name',
valueField: 'tag_id',
listeners: {
beforeadditem: function(bs,v){
//beforeadditemイベントでfalseを返すとタグの追加をキャンセルできます。
//return false;
},
additem: function(bs,v){
//console.log('additem:', v);
},
beforeremoveitem: function(bs,v){
//beforeremoveイベントでfalseを返すとタグの削除をキャンセルできます。
//return false;
},
removeitem: function(bs,v){
//console.log('removeitem:', v);
},
newitem: function(bs,v){
v = v.slice(0,1).toUpperCase() + v.slice(1).toLowerCase();
var newObj = {
tag_id: v,
tag_name: v
};
bs.addItem(newObj);
}
}
}]
});
});
・実行結果
SuperBoxSelectのサンプル
日本語でも動く動いているようです。
新規のテキストを入力するときは、そのまま入力してENTERで登録されます。
キー入力してサジェッション項目をフィルタリングすることもできます。既に追加済みの項目は表示しないようになっています。
使い方はプラグインを読み込めばxtypeをsuperboxselectと指定するだけです。CSSファイルと画像ファイルも読み込まないと表示がうまく行かないので注意が必要です。
データソースは通常のコンボボックスのようにstoreが使えるので、コンボボックスを作るの同じように設定します(displayFieldなど)。
開発者のサンプルサイトを見れば使い方は一目瞭然です。細かいメソッド等については、作者のサイトを御覧下さい。
イベントも用意されていて、additem,beforeadditem,beforeremoveitem,removeitemがあります。beforeのつくイベントではreturn にfalseを返すと追加・削除がキャンセルできます。
値のセットの仕方も、カンマ区切りの文字列でもオブジェクトでも指定可能でよく出来ています。
ただしそのままの状態ではカンマを入力して自動的に分割はしてくれずカンマも含めた文字列として登録されます。
beforeadditemでカンマを検出して、別途addItemすればなんとかなりそうです。
日本語もそれなりに上手く動きます。日本語でのリストの絞込みも可能です。ただし変換前の入力文字が後ろに回り込んでしまったりします。
見た目も動作感も良いので、タグを入力させるフォームを作るときにおすすめのプラグインです。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJSで作ったFlashみたいなアプリ Ajax Animator
Ajax AnimatorというExtJSで作ったFlashのようなアニメーション作成アプリを見つけました。
http://antimatter15.com/
Ajax Animator
Ajax Animatorのデモは以下のリンクから
Ajax Animator - http://antimatter15.com/ajaxanimator/build/
Flashのようにパラパラ漫画風のアニメーションを作成できます。
まだまだベータ版ということで色々挙動がおかしい部分が多々ありますが、とても面白いアプリになりそうです。
基本的な使い方はFlashとよく似ていて、左のツールからペンや四角ツールを選んでキャンバスに配置してアニメーションのコマを一枚ずつ書いていきます。キャンバス下のpreviewタブを開くことでアニメーションの再生ができます。モーショントゥイーンのようなものはありません。下のタブのもう一つのAnimationタブでは、サンプルアニメーションを見ることができます。
またJSでマクロを書くこともできるようなので、ExtJSでprocessing.jsのように使えるようになるかも知れません。
書き出しはうまくいきませんが、SWFやアニメーションGIFに加えProcessing(p5),Silver Light,Java FXでできるようになるみたいです。また独自ファイルはファイルをテキストで保存できます(拡張子無し)。独自の保存ファイルの中身を見てみるとJavascriptのオブジェクトをテキストに書き出して保存していました。試しに
Processing形式(.pde)で書き出して、Processingで実行してみました。(winのp5では開くこともできませんが、Macのp5なら多少動きます)
Ajax Animator からProcessingに書き出し
Google Waveのガジェットとしても開発しているそうで、夢が広がります。
さらに驚くべきことは、開発者は14歳（自称）だそうです。本当に14歳なら恐ろしいことです。
vXJSというJSライブラリやwikiなんかも開発しているそうです。天才少年ドゥギー・ハウザーのようです。
http://code.google.com/p/vxjs/
14歳ということは1995年で、Windows95と同期ですね。時間のあるときにもう少し詳しく中を見てみようと思います。モチベーションをあげてもうえるのと同時に、分けのわかない焦りを感じさせてくれるExtJSのアプリの例でした。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門12 Ext.XTemplateでfor,ifを使う
Ext.XTemplateではテンプレート内でforやifを設定して、テンプレートを処理することができます。条件分岐の処理をテンプレート内に記述して、apply()でデータを渡すだけです。
Ext.XTemplateについてのその他の記事
ExtJS入門10 Ext.XTemplateを使う
ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う
Ext.XTemplateクラス – Ext 3.0 – API Documentation 日本語版
http://extdocs.xenophy.com/?class=Ext.XTemplate
・HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS名古屋勉強会 xtemplateの使い方(for,ifを使う)</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--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>
<!--my App JS-->
<script type="text/javascript" src="xtemplate2.js"></script>
</head>
<body>
<h1 style="background-color:#BDD3EF;">for,ifを使ったXTemplate</h1>
<div id="js-tpl"></div>
</body>
</html>
・Javascript
Ext.onReady(function(){
//ダミーのデータ
var data = {
name:'株式会社sus4',
url:'http://www.sus4.co.jp',
//この配列をループで読み出す
array:[
{key:'C',value:'Major'},
{key:'D',value:'Minor'},
{key:'E',value:'7'},
{key:'F',value:'Minor7'},
{key:'G',value:'dim'},
{key:'A',value:'aug'},
{key:'B',value:'add'}
]
};
/**
* テンプレート
*/
var jsTpl = new Ext.XTemplate(
//ここは普通に{}でセットする
'<a href="{url}">{name}</a>',
'<table>',
'<tpl for="array">',
'<tr>',
//数字と比較
'<tpl if="value == 7">',
'<th>{key}</th>',
'<td style="color:red;"><b>{value}</b></td>',
'</tpl>',
//文字列と比較。比較する文字列をエスケープ下シングルクォートで囲む
'<tpl if="key == \'C\'">',
'<th style="color:orange;"><b>{key}</b></th>',
'<td>{value}</td>',
'</tpl>',
//elseの代わりのif分岐
'<tpl if="key != \'C\' &amp;amp;&amp;amp; value != 7">',
'<th>{key}</th>',
'<td>{value}</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>'
);
//JSに描いたテンプレートを使用
var jsTplHtml = jsTpl.apply(data);
new Ext.Panel({
renderTo:'js-tpl',
title:'XTemplateパネル(for,ifを使用中)',
bodyStyle:'padding:20px;',
html:jsTplHtml
});
});
・実行結果
Ext.XTemaplate （for,ifをつかう）
テンプレートを記述するさいに
・for
forの場合、ループする対象のデータを指定します。記述の方法は
サンプルの場合は’array’という要素をforのターゲットにしているので’
var data = {
somedata:{
data:
[
{
name:'株式会社sus4',
url:'http://www.sus4.co.jp',
},
{
name:'yahoo',
url:'http://www.yahoo.com',
},
{
name:'google',
url:'http://www.google.com',
}
]
}
};
/**
* テンプレート ルートを配列としてみる
*/
var jsTpl = new Ext.XTemplate(
//ここは普通に{}でセットする
'<table>',
'<tpl for=".">',
'<tr>',
'<tpl>',
'<th>{name}</th>',
'<td>{url}</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>'
);
/**
* テンプレート
* ドットでデータの場所を指定
*/
var jsTpl2 = new Ext.XTemplate(
//ここは普通に{}でセットする
'<table>',
'<tpl for="somedata.data">',
'<tr>',
'<tpl>',
'<th>{name}</th>',
'<td>{url}</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>'
);
var jsTplHtml = jsTpl.apply(data.somedata.data);
var jsTplHtml2 = jsTpl2.apply(data);
・if
if文の記述の仕方は、
数字を比較する場合は
elseはありません。ifで反対の条件を指定して代用します。「&&、||」など基本的な比較演算子は使えます。詳しくはAPIドキュメントのXTemplateのXTemplateの項目を開くと載っています。
Ext.XTemplateでfor,ifをうまく使えば、テーブルの作成などにが楽になります。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う
前回はExt.XTemplateクラスのfromメソッドでHTML内のファイルをテンプレートに使いましたが、今回はJavascriptのファイル内にテンプレートを書く方法を紹介します。
前回の記事
ExtJS入門10 Ext.XTemplateを使う
Ext.XTemplateクラス – Ext 3.0 – API Documentation 日本語版
http://extdocs.xenophy.com/?class=Ext.XTemplate
・HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS名古屋勉強会 xtemplateの使い方(Javascript内のテンプレート)</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--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>
<!--my App JS-->
<script type="text/javascript" src="xtemplate-new.js"></script>
</head>
<body>
<h1 style="background-color:#BDD3EF;">JS内のテンプレートを使ったXTempalte</h1>
<div id="tpl-target">
</div>
</body>
</html>
・Javascript
Ext.onReady(function(){
var data = {
name:'株式会社sus4',
url:'http://www.sus4.co.jp',
};
/**
* テンプレート
* 中括弧でdataオブジェクトのプロパティ名を指定する。
* js内の文字列でテンプレートを指定する場合は,
* new Ext.XTemplate(テンプレート文字列)とする。newしないとエラーになります。
* カンマで区切ることで複数行に渡ってテンプレート文字列を書くことができます。
* 最後にカンマがつくとエラーになります。
*/
var tpl = new Ext.XTemplate(
'<h2>リンクを作る</h2>',
'<a href="{url}">{name}</a>',
'<h2>テーブルを作る</h2>',
'<table>',
'<tr>',
'<th style="padding:3px;">{name}:</th><td>{url}</td>',
'</tr>',
'</table>'
);
//htmlファイルに作った要素のIDを指定
var tplHtml = tpl.apply(data);
var panel = new Ext.Panel({
renderTo:'tpl-target',
title:'テンプレートを使ったパネル',
bodyStyle:'padding:20px',
html:tplHtml
});
});
・実行結果
Ext.XTemplateでJS内にテンプレートを書く
Ext.XTemplateのテンプレートはJavascript内に記述しています。
var tpl = new Ext.XTemplate(
'<h2>リンクを作る</h2>',
'<a href="{url}">{name}</a>',
'<h2>テーブルを作る</h2>',
'<table>',
'<tr>',
'<th style="padding:3px;">{name}:</th><td>{url}</td>',
'</tr>',
'</table>'
);
文字列でテンプレートとなるHTMLを記述しています。テンプレート文字列が長くなって改行する場合は一旦文字列を区切って「,」(カンマ)で新しい文字列を連結して書いていきます。
例：
new Ext.XTemplate( '文字列', ’文字列’ );
文字列を区切らずそのまま改行するとエラーになります。連結した最後の文字列のあとにカンマがついてもダメです。
データの設定する箇所は「{}」(中括弧)でデータオブジェクトのプロパティ名を指定します。
HTMLファイルにテンプレートを記述する、Ext.XTemplate.from()ではnewしていませんでしたが、JSファイル内に文字列としてテンプレートを記述して使う場合はnewしなければいけません。Ext.XTemaplate.from()メソッドを使うとHTMLに描いた文字列からテンプレートオブジェクトを生成して返しているためnewしなくても良かったのですが、今回は自分できちんとnewして文字列からテンプレートオブジェクトを生成します。
あとはExt.XTemplate.fromと同じようにapplyでデータの設定して、パネルの要素に設定しています。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門10 Ext.XTemplateを使う
ExtJSでパネル内にHTMLを作成したいときに便利なのがExt.TemplateとExt.XTemplateです。
今回はExt.XTemplateのExt.XTemplat.fromとoverwriteを使って、テンプレートで作ったエレメントをパネル内に配置するサンプルを紹介します。
Ext.XTemplateクラス – Ext 3.0 – API Documentation 日本語版
http://extdocs.xenophy.com/?class=Ext.XTemplate
・HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS名古屋勉強会 xtemplateの使い方(from,overwriteを使う)</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--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>
<script type="text/javascript" src="xtemplate.js"></script>
</head>
<body>
<div class="body">
</div>
<div style="display: none;">
<div id="sampleTpl">
<table>
<tr>
<td>{a_value}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
・Javascript
Ext.onReady(function(){
var data = {
a_value:'テンプレートの初期値を設定します。'
};
//htmlファイルに作った要素のIDを指定
var panelTpl = Ext.XTemplate.from('sampleTpl');
var panelHtml = panelTpl.apply(data);
var panel = new Ext.Panel({
renderTo:Ext.getBody(),
title:'テンプレートを使ったパネル',
bodyStyle:'padding:20px',
html:panelHtml,
tbar:[
{
text:'テンプレート書き換え',
handler:function(){
//アップデートした時間をつける
var dt = new Date();
var newData = {
a_value:dt.format('A g:i s秒に上書きしました')
};
//テンプレートの上書き
panelTpl.overwrite(panel.body,newData);
}
}
]
});
});
・実行結果
Ext.XTemplateを使う
テンプレートを使ってエレメントを生成
Ext.XTemplateを使うとHTMLファイルに記述した要素をテンプレートとして読み込むことができます。Ext.XTemplate.from(’要素のID’)という形で指定することでテンプレートとして読み込まれます。
ここでは簡単なテーブルをテンプレートとなる要素にしています。
<div style="display: none;">
<div id="sampleTpl">
<table>
<tr>
<td>{a_value}</td>
</tr>
</table>
</div>
</div>
テンプレートを記述した部分全体を表示しないように”display:none”のdivで囲っておきます。HTMLに記述したテンプレートをfromで使う場合、HTMLに書かれた部分が書き換わるのではなく、テンプレートとして読み込まれているだけなので画面の最背面に描画されてたままです。非表示にしておかないとパネルの下にテンプレートが見えてしまいます。
要素の書き換え箇所を「{,}」(中括弧)で設定します。ここでは{a_value}としています。Javascript側では、テンプレートにセットするデータを用意してapplyメソッドでセットしています。データはオブジェクトの形で渡します。
テンプレートの上書き
テンプレートの上書きにはoverwriteメソッドを使います。新しいデータを用意して、overwirteで指定した要素を書き換えます。panel.bodyとしてパネルのbody要素を書き換えています。
ここでは書き換えたときの時間を表示するためにDateクラスを使っています。Dateクラスのインスタンスにformatメソッドを渡して、日付のフォーマットを指定します。この指定の方法はPHPのdate関数と同じような書式を渡します。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
