Archive for 11 月, 2009
Twitter Weekly Updates for 2009-11-29
野村 亮之
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-28
野村 亮之
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に就任。
第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とモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS勉強会@名古屋Live View
本日11月27日18：30よりExtJS勉強会＠名古屋を開催します。
前回は、Twitterを利用したのですが、今回はそれに加えてUStreamでライブビューをしようかと考えています。
諸般の事情で失敗してもご容赦くださいｗ
野村 亮之
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入門 タブパネルを閉じるときのイベント
タブパネルを閉じるときのイベントは少しややこしいので、簡単にまとめておきます。
以下のようなコードを使って、イベントの発火の順番をfirebugのコンソールに出力します。
要firefox + firebugです。
・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=utf-8" />
<title>ExtJS名古屋勉強会 タブパネルのイベント</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="tabpanel_event.js"></script>
</head>
<body>
<div class="body">
</div>
</body>
</html>
・javascript
Read the rest of this entry »
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS小ネタ集 アナログ時計のUIで時刻を入力
ExtJSの小ネタの紹介です。
アナログ時計のインターフェース
時刻選択のフォームをアナログ時計のインターフェースにするサンプルを見つけました。
http://www.ajaxupdates.com/ext-js-time-picker-script/
ここのJSの時刻ピッカーをExtJSに入れてみたという感じです。
http://www.nogray.com/time_picker.php
使い勝手は微妙ですが、無駄にインターフェースをリッチにしたいときなどに、使えるかもしれません。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
フォーカスが当たっていないExt.grid.GridPanelをキー操作で選択させる方法
業務アプリケーションには欠かせないキー操作ですが、focus()メソッドではどうにもならない場合があるので、掲載しておきます。
Ext.KeyNavを使うと、tabとかのオーバーライドができます。
で、その中でもfocus()メソッドでは次のフォーカスが当たらないPanelもありますので、いか参考にしてください。
1. To focus the grid.
After rendering the grid
grid.getSelectionModel().selectFirstRow();
grid.getView().focusEl.focus();
情報元はこちら：
Hasten Technologies Pvt Ltd
世の中何でも載っているもんだなぁ。
野村 亮之
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プラグイン紹介 垂直方向のタブパネル
垂直方向のタブパネルを作るプラグイン
https://www.yui-ext.com/forum/showthread.php?t=26257（注.証明書が切れているので警告がでます。)
ExtJS基本機能では水平方向のタブパネルしか、作れませんがプラグインで垂直方向にもタブを設置できます。
使い方
使い方は簡単です。作者のページもしくはフォーラムからプラグインのJSファイルをダウンロードして設置します。
今回はこのポストで修正されているものを使いました。
https://www.yui-ext.com/forum/showthread.php?p=408789#post408789
単純に純正のExt.TabPanelの代わりに、Ext.ux.TabPanelを使うだけです。純正のExt.TabPanleのコンフィグと同じtabPositionのコンフィグにleftもしくはrightを設定するだけです。
ExtJS純正のExt.TabPanelクラスではタブの位置をパネルの上部（top）か下部(bottom)にしか指定できませんでしたが、このプラグインで左右にもタブを配置することができます。
水平タブパネルプラグイン Ext.ux.TabPanel
垂直方向のタブパネルのサンプル
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
なるほどそういう考え方もありますよね
ExtJapanエースの小堤さんのポストです。
http://code.xenophy.com/?p=834
たしかに、計算してみればそうですよね。
でも目先の10万円をトレーニングに使うのは、結構勇気がいるんですよねー（特に中小企業にとって）。
皆さんはどうでしょうか?
野村 亮之
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入門9 パネル・クラスのコンフィグについて
Ext.Panelクラスは、タブパネルやグリッドパネルのスーパークラスです。
Ext.Panelのよく使うコンフィグについてまとめておきます。
全てのコンフィグ・オプションはAPI ドキュメントを参照してください。
Ext.Panel – Ext 3.0 – API Documentation 日本語版
http://extdocs.xenophy.com/?class=Ext.Panel
Read the rest of this entry »
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
