タグ ‘勉強会まとめ’ 一覧
Sencha Touch 入門:Sencha Touchのはじめかた（Ext JS & Sencha Touch勉強会7月＠東京）のサンプルコード
2010/7/25のExt JS & Sencha Touch勉強会7月＠東京でのsus4 佐竹の担当箇所のSencha Touch入門篇で使うサンプルコードをjsdo.itで公開しました。
明日の勉強会では、PCのブラウザでも動作するサンプルばかりですので、jsdo.it上でも動作を確認できます。
また簡単なサンプルばかりですので、forkしていただいて実際に手を動かしてももらうとより理解が深まると思います。
勉強会では持ち時間的に２,３つしか紹介できないと思います。
勉強会のアジェンダはこちらです。
Sencha Touch 入門: Ext JS & Sencha Touch勉強会7月＠東京(2010/7/25 )のアジェンダ
Sencha Touchのはじめかたサンプルコード
Sencha Hello, World!
Hello, World! – jsdo.it – share JavaScript, HTML5 and CSS
Read the rest of this entry »
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
第5回ExtJS勉強会＠名古屋 2/25 パネル内のエレメントを作成する
第4回ExtJS勉強会＠名古屋のチュートリアルセクション用の資料用のまとめです。
前回までのセッションでパネルを作るところまで行きました。今回はそのパネルの中に表示するHTML要素を生成するためのクラスを中心に扱います。クラスとしては以下の3つが中心になります。
Ext.XTemplateではHTMLをテンプレートと記述して、パネルに設定します。
Ext.DomHelperではDOMの追加や削除を行います。
Ext.DataView,ListViewはストアの内容をパネルに配置する簡単な方法を紹介します。
前回までのセッションのまとめはこちらです。
第2回ExtJS勉強会＠名古屋 勉強会Ext.onReadyからはじめるExtJSのまとめ
第3回ExtJS勉強会＠名古屋 11/27 Ext.Panelからはじめるコンポーネントの基礎
各チュートリアル記事へのリンク
・ExtJS入門10 Ext.XTemplateを使う
http://extjs.blog.sus4.co.jp/2009/12/03/extjs-tutorial10/
・ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う
http://extjs.blog.sus4.co.jp/2009/12/04/extjs-tutorial11/
・ExtJS入門13 Ext.DomHelperの使い方
http://extjs.blog.sus4.co.jp/2010/01/14/extjs-tutorial13-domhelper1/
・ExtJS入門14 DomHelperの使い方2
http://extjs.blog.sus4.co.jp/2010/01/14/extjs-tutorial14-domhelper2/
・ExtJS入門14 DomHelperの使い方3
http://extjs.blog.sus4.co.jp/2010/02/25/extjs-domhelper-insert-remove/
・ExtJS入門15 DataViewの使い方
http://extjs.blog.sus4.co.jp/2010/01/26/extjs-tutrorial15/
・ExtJS入門16 ListViewの使い方
http://extjs.blog.sus4.co.jp/2010/01/27/extjs-tutorial16/
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
第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とモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
勉強会Ext.onReadyからはじめるExtJSのまとめ
ブログを使って説明していましたが、ブログだと投稿日の降順に記事が並ぶので、どの記事を見ているか探すのが難しかったと思います。
次回からはこんな感じで、その日やることをまとめておきます。
1.ExtJS入門1 開発環境を整える
ExtJSを開発できる環境を作る。ブラウザ選び、ExtJSライブラリのダウンロード
2.ExtJS入門2 Ext JSでHello, Worldを作ってみる
ExtJSを動かしてみる。実際にコードを書いてExtJSを使ってみる。Ext.onReady()を使う。
3.ExtJS入門3 Viewportを使う
ExtJSのViewportという機能を使ってみる。fitとborderレイアウトを使ってViewportを作る。
また分かりにくかった点やご意見・ご感想がありましたら、このブログのコメントをくださるとありがたいです。たくさんのコメントお待ちしています。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
