ビジネスExtJS | ExtJSで楽しくRIA業務アプリ開発

タグ ‘ビジネスExtJS’ 一覧

ExtJS入門24　エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)

without comments

はてなブックマーク - ExtJS入門24　エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)

Livedoorクリップ - ExtJS入門24　エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)

今回はエディタブル・グリッド(エディター・グリッド)の紹介です。エディタブルとエディターはどっちの方が正しいのかわかりませんが。クラス名はエディター･グリッドなのですが、ここではエディタブル・グリッドで統一します。
エディタブル・グリッドはグリッドの内容をグリッド上で直接編集する機能です。一般的にはカラムのダブルクリックで編集することが多いと思います。今回は以前紹介したグリッドへの追加と削除をベースにエディタブル・グリッドに変更します。

エディタブル･グリッド

ExtJS　フォームの基本とExtJS入門23を先にご覧下さい。

グリッドパネル関連の過去の記事はこちらからです。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.grid.EditorGridPanelクラス
http://extdocs.xenophy.com/?class=Ext.grid.EditorGridPanel

Read the rest of this entry »

佐竹裕行

1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。

Written by 佐竹裕行

4 月 23rd, 2010 at 11:38 am

Posted in ExtJSチュートリアルｓｕｓ４版, ExtJS勉強会＠名古屋資料

Tagged with Ext.grid.EditorGridPanel, ExtJS, grid, JavaScript, JsonStore, php, TextField, Tips, UI, エディタブル・グリッド, エディター, サンプル, チュートリアル, ビジネスExtJS, 業務ウェブアプリケーションTips

ExJS入門21　グリッド・セレクション・モデル

with 4 comments

グリッド関連4回目は、セレクションモデルを設定して、行の選択状態を取得する簡単なサンプルです。
ExtJSのグリッドの様々なセレクションモデルを設定して、行の選択の仕方を指定します。今回は一番基本となる、単一の行を選択するセレクションモデルを設定して、その行の情報を取り出すようにします。以前に紹介したグリッドのサンプルではセレクションモデルが明示的に設定されていないためグリッドのデフォルトのセレクションモデルが自動的に設定されていました。実際に試してもらうと分かりやすいのですが、Ctrlもしくはcommandキーを押しながらクリックすると複数選択ができます。
今回のサンプルではセレクションモデルを独自に設定して、一行だけを選択するようにします。

セレクションモデル

Read the rest of this entry »

佐竹裕行

Written by 佐竹裕行

4 月 16th, 2010 at 11:45 am

Posted in ExtJSチュートリアルｓｕｓ４版, ExtJS勉強会＠名古屋資料

Tagged with Ext.XTemplate, ExtJS, grid, GridPanel, JavaScript, JSON, JsonStore, php, Store, Tips, サンプル, チュートリアル, ビジネスExtJS, 業務ウェブアプリケーションTips

第5回ExtJS勉強会＠名古屋 2/25　パネル内のエレメントを作成する

with 2 comments

はてなブックマーク - 第5回ExtJS勉強会＠名古屋 2/25　パネル内のエレメントを作成する

Livedoorクリップ - 第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/

佐竹裕行

Written by 佐竹裕行

1 月 28th, 2010 at 11:48 am

Posted in ExtJSチュートリアルｓｕｓ４版, ExtJS勉強会＠名古屋資料, 未分類

Tagged with チュートリアル, ビジネスExtJS, 勉強会, 勉強会まとめ

第4回ExtJS勉強会＠名古屋（2010年1月）を開催します

without comments

はてなブックマーク - 第4回ExtJS勉強会＠名古屋（2010年1月）を開催します

Livedoorクリップ - 第4回ExtJS勉強会＠名古屋（2010年1月）を開催します

ExtJSユーザーの皆様、あけましておめでとうございます。
2009年12月は、名古屋の勉強会を開催しませんでしたので、2ヶ月間あいてしまいましたが、2010年1月28日（木）に第4回ExtJS名古屋勉強会を開催します。
今回は、株式会社ニューキャストさんのご好意により、セミナールームを借りて開催することになりました。

ExtJS3.1もリリースされ、ますます注目度が増すExtJSを名古屋から盛り上げて行きましょう。

詳細情報については、ExtJSウェブサイトをご覧下さい。

野村亮之

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に就任。

Written by 野村亮之

1 月 12th, 2010 at 12:40 am

Posted in ExtJS勉強会＠名古屋のお知らせ

Tagged with ExtJS, お知らせ, ビジネスExtJS, 勉強会

ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う

without comments

はてなブックマーク - ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う

Livedoorクリップ - 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でデータの設定して、パネルの要素に設定しています。

佐竹裕行

Written by 佐竹裕行

12 月 4th, 2009 at 12:05 pm

Posted in ExtJSチュートリアルｓｕｓ４版, ExtJS勉強会＠名古屋資料, 未分類

Tagged with ExtJS, JavaScript, Tips, サンプル, チュートリアル, ビジネスExtJS, 勉強会

ExtJSのことを話す上での基礎用語について – Part1

without comments

はてなブックマーク - ExtJSのことを話す上での基礎用語について – Part1

Livedoorクリップ - ExtJSのことを話す上での基礎用語について – Part1

ExtJSを話題にするうえで、覚えておくべきいくつかの知識があります。
技術者対営業、営業対エンドユーザー、技術者対エンドユーザーなど、ビジネスを進めていく上でいろいろな場面が考えられるとおもいますが、共通の言葉を作っておくと話が早い場合もあります。

今回は、まとめて紹介していきます。
どちらかというと、営業向けの言葉説明なので、技術者には物足りない内容かもしれないです。

1.RIA

リッチインターネットアプリケーション。3年か4年前から盛んに言われるようになって来た言葉です。それまでのHTMLベースのウェブアプリケーションに対して、よりネイティブアプリケーションっぽい動きをするWebアプリケーションの総称でよいと思います。
このRIAを実現する技術としては、Flash、FlexなどのFlashプラグインを利用するアプリケーション、Sliverlightプラグインを利用するアプリケーションと、Ajaxを利用するJavaScriptベースのアプリケーションが代表的なものとなります。
ウェブ上で、リッチな体験を提供するというのが言葉の中に含まれる定義ですね。

僕が業務系RIAを説明するときは、今まで当たり前にできていた業務をウェブアプリに置き換えても、当たり前に同じことができることですと伝えます。

2.Ajax

先ほどの説明に出てきましたが、Ajaxというのは、JavaScriptに関しての言葉です。
Wikiの説明ですと

Ajax（エイジャックス、アジャックス）は、ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。

という感じになります。
今までのHTMLベースのウェブアプリケーションは、情報を送信するのに、ページ全体を書き換える必要がありましたが、このAjax技術を使うと、ページ内でいつでもサーバへの通信が可能で、ページ内の一部を動的に変更することができます。
これが、ネイティブアプリケーションっぽくウェブアプリケーションを振舞わせることができる核の技術です。

3.ライブラリとフレームワーク

前にお話をしているときに、フレームワークとライブラリの違いってなんですかと聞かれたことがあるので、、、

Wikiによるフレームワークの説明：

Web アプリケーションフレームワーク（英: Web Application Framework）は、動的なウェブサイト、Webアプリケーション、Webサービスの開発をサポートするために設計されたアプリケーションフレームワークである。フレームワークの目的は、Web 開発で用いられる共通した作業に伴う労力を軽減することである。たとえば、多数のフレームワークがデータベースへのアクセスのためのライブラリや、テンプレーティングフレームワーク、セッション管理を提供し、コードの再利用を促進させるものもある。

Wikiによるライブラリの説明：

ライブラリは、汎用性の高い複数のプログラムを、再利用可能な形でひとまとまりにしたものである。一般にライブラリは、それ単体ではプログラムとして動作させることはできないので実行ファイルではない。ライブラリは他のプログラムに何らかの機能を提供するコードの集まりと言うことができる。ソースコードの場合と、オブジェクトコード、あるいは専用の形式を用いる場合とがある。たとえば、UNIXのライブラリはオブジェクトコードをarと呼ばれるアーカイバでひとまとめにして利用する。

んー、これだとなかなかわかりにくいですね。

近年登場してきているJavaScriptを快適に書くためのライブラリ・フレームワークを上げてみると、

Prototypeは、昔JavaScriptライブラリといわれていたような気がしたのですが、いつの間にかフレームワークになっています。
jQueryは、WikiではJavaScriptライブラリといわれていますね。
ちょっと毛色が違いますが、YUIはUIライブラリといっていますね。
Dojoは最近、Core, digit, DojoXに分かれてるみたいですね。3つあわせると、フレームワークとよばれるっぽいですね。

どちらかというと、スクリプトを書くときにサポートしてくれる機能が寄り集まったものをライブラリといい、アプリケーション自体をそれで完結できるもの（JavaScriptの場合は、クライアントサイドのコード全体をまかなえると考えれば適当かもしれません）をフレームワークといっているようです。

ちょうど、ExtJSでいうと、ExtCoreに関しては、ライブラリといったほうがよさそうで、ExtJSはフレームワークといえそうですね。

なんだかまとまりのない感じになってしまいましたが、とりあえず簡単に3つ紹介してみました。次回は、JavaScriptに関する言葉をもう少し解説していきます。

野村亮之

Written by 野村亮之

10 月 17th, 2009 at 9:01 pm

Posted in ExtJS営業向け知識集

Tagged with ExtJS, チュートリアル, ビジネスExtJS, 営業向け

ExtJSで楽しくRIA業務アプリ開発

タグ ‘ビジネスExtJS’ 一覧

ExtJS入門24　エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)

佐竹裕行

ExJS入門21　グリッド・セレクション・モデル

佐竹裕行

第5回ExtJS勉強会＠名古屋 2/25　パネル内のエレメントを作成する

佐竹裕行

第4回ExtJS勉強会＠名古屋（2010年1月）を開催します

野村亮之

ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う

佐竹裕行

ExtJSのことを話す上での基礎用語について – Part1

1.RIA

2.Ajax

3.ライブラリとフレームワーク

野村亮之

ExtJS名古屋勉強会チュートリアル

カテゴリー

タグ

ExtJS勉強会＠名古屋からのお知らせ

My Twitter Followers

2012年2 月
月	火	水	木	金	土	日
« 6 月
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29