ExtJSで楽しくRIA業務アプリ開発 » 勉強会まとめ http://extjs.blog.sus4.co.jp 株式会社sus4 開発チーム Wed, 01 Jun 2011 09:32:58 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Sencha Touch 入門:Sencha Touchのはじめかた（Ext JS & Sencha Touch勉強会7月＠東京）のサンプルコード http://extjs.blog.sus4.co.jp/2010/07/27/sencha-studygroup-tokyo20100728/ http://extjs.blog.sus4.co.jp/2010/07/27/sencha-studygroup-tokyo20100728/#comments Tue, 27 Jul 2010 12:27:19 +0000 佐竹 裕行 http://extjs.blog.sus4.co.jp/?p=736 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


Sencha Hello, World! + tbar

Hello, World + tbar – jsdo.it – share JavaScript, HTML5 and CSS

Sencha Touch Complex Docked Items
Sencha Touch Complex Docked Items – jsdo.it – share JavaScript, HTML5 and CSS

Sencha Carousel (Edit)

Sencha Carousel (Edit) – jsdo.it – share JavaScript, HTML5 and CSS

Share/Bookmark]]> http://extjs.blog.sus4.co.jp/2010/07/27/sencha-studygroup-tokyo20100728/feed/ 0 第5回ExtJS勉強会＠名古屋 2/25　パネル内のエレメントを作成する http://extjs.blog.sus4.co.jp/2010/01/28/extjs-tutorial-summary3/ http://extjs.blog.sus4.co.jp/2010/01/28/extjs-tutorial-summary3/#comments Thu, 28 Jan 2010 02:48:13 +0000 佐竹 裕行 http://extjs.blog.sus4.co.jp/?p=414 第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/

Share/Bookmark]]> http://extjs.blog.sus4.co.jp/2010/01/28/extjs-tutorial-summary3/feed/ 2 第3回ExtJS勉強会＠名古屋 11/27　Ext.Panelからはじめるコンポーネントの基礎 http://extjs.blog.sus4.co.jp/2009/11/27/extjs-studysession2/ http://extjs.blog.sus4.co.jp/2009/11/27/extjs-studysession2/#comments Fri, 27 Nov 2009 06:50:02 +0000 佐竹 裕行 http://extjs.blog.sus4.co.jp/?p=281 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プラグイン紹介-垂直方向のタブパネル/

Share/Bookmark]]> http://extjs.blog.sus4.co.jp/2009/11/27/extjs-studysession2/feed/ 1 勉強会Ext.onReadyからはじめるExtJSのまとめ http://extjs.blog.sus4.co.jp/2009/10/29/%e5%8b%89%e5%bc%b7%e4%bc%9aext-onready%e3%81%8b%e3%82%89%e3%81%af%e3%81%98%e3%82%81%e3%82%8bextjs%e3%81%ae%e3%81%be%e3%81%a8%e3%82%81/ http://extjs.blog.sus4.co.jp/2009/10/29/%e5%8b%89%e5%bc%b7%e4%bc%9aext-onready%e3%81%8b%e3%82%89%e3%81%af%e3%81%98%e3%82%81%e3%82%8bextjs%e3%81%ae%e3%81%be%e3%81%a8%e3%82%81/#comments Thu, 29 Oct 2009 01:37:07 +0000 佐竹 裕行 http://extjs.blog.sus4.co.jp/?p=124
昨日の勉強会の私のセッションは改善の必要がありますね。次回はもっと分かりやすく進められるようにがんばります。

ブログを使って説明していましたが、ブログだと投稿日の降順に記事が並ぶので、どの記事を見ているか探すのが難しかったと思います。
次回からはこんな感じで、その日やることをまとめておきます。

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を作る。

また分かりにくかった点やご意見・ご感想がありましたら、このブログのコメントをくださるとありがたいです。たくさんのコメントお待ちしています。

Share/Bookmark]]> http://extjs.blog.sus4.co.jp/2009/10/29/%e5%8b%89%e5%bc%b7%e4%bc%9aext-onready%e3%81%8b%e3%82%89%e3%81%af%e3%81%98%e3%82%81%e3%82%8bextjs%e3%81%ae%e3%81%be%e3%81%a8%e3%82%81/feed/ 1