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

株式会社sus4 開発チーム

タグ ‘業務ウェブアプリケーションTips’ 一覧

ExJS入門30 Twitter Search APIを使ったグリッドパネル

with 3 comments

このエントリーを含むはてなブックマークはてなブックマーク - ExJS入門30 Twitter Search APIを使ったグリッドパネル この記事をクリップ!Livedoorクリップ - ExJS入門30 Twitter Search APIを使ったグリッドパネル Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 newsing it! この記事をChoix! Googleブックマークに追加 Bookmark this on Delicious Digg This

前回はJSONPを使ってYouTubeの情報をグリッドに表示するサンプルを紹介しました。今回も外部APIの利用第2弾ということにして、Twitter APIを使ってTwitterのアップデートをグリッドに読み込んでみます。

Twitter Search APIを利用したグリッド

Twitter Search APIを利用したグリッド


今回はJSONPを使ったAPIの利用に加えて、グリッドを自動更新するためのExt.TaskMgrクラスを使ったサンプルコードの紹介になります。
前回のチュートリアルがお済でない方はこちらからどうぞ
ExJS入門29 JSONPを使ってYouTube Data APIをグリッドパネルに読み込む

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

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

ExtJS -3.0 日本語APIドキュメント – Ext.data.DataProxyクラス
http://extdocs.xenophy.com/?class=Ext.data.DataProxy

ExtJS -3.0 日本語APIドキュメント – Ext.data.ScriptTagProxyクラス
http://extdocs.xenophy.com/?class=Ext.data.ScriptTagProxy

Read the rest of this entry »

  • Share/Bookmark

佐竹 裕行

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

ExJS入門29 JSONPを使ってYouTube Data APIをグリッドパネルに読み込む

with one comment

このエントリーを含むはてなブックマークはてなブックマーク - ExJS入門29 JSONPを使ってYouTube Data APIをグリッドパネルに読み込む この記事をクリップ!Livedoorクリップ - ExJS入門29 JSONPを使ってYouTube Data APIをグリッドパネルに読み込む Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 newsing it! この記事をChoix! Googleブックマークに追加 Bookmark this on Delicious Digg This

今回もグリッドパネルです。今回はJSONPを使ってYouTube Data APIを呼び出して、グリッドに表示するサンプルコードになります。
JSONPを使うことで別ドメインのAPIをJavascriptで呼び出すことができます。Google Data APIはJSONPにも対応しているため、利用が簡単です。

JSONPでYouTube Data APIを利用

JSONPでYouTube Data APIを利用

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

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

ExtJS -3.0 日本語APIドキュメント – Ext.data.ScriptTagProxyクラス
http://extdocs.xenophy.com/?class=Ext.data.ScriptTagProxy

Read the rest of this entry »

  • Share/Bookmark

佐竹 裕行

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

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

without comments

このエントリーを含むはてなブックマークはてなブックマーク - ExtJS入門24 エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更) この記事をクリップ!Livedoorクリップ - ExtJS入門24 エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更) Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 newsing it! この記事をChoix! Googleブックマークに追加 Bookmark this on Delicious Digg This

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

エディタブル・グリッド

エディタブル・グリッド

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

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

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

Read the rest of this entry »

  • Share/Bookmark

佐竹 裕行

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

ExtJS入門 ExtJSのフォームについて(基本編)

with 5 comments

このエントリーを含むはてなブックマークはてなブックマーク - ExtJS入門 ExtJSのフォームについて(基本編) この記事をクリップ!Livedoorクリップ - ExtJS入門 ExtJSのフォームについて(基本編) Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 newsing it! この記事をChoix! Googleブックマークに追加 Bookmark this on Delicious Digg This

前回までグリッドについてのサンプルを紹介してきましたが、今回はグリッドを少しはなれてExtJSのフォームについて簡単に紹介をします。

フォームの値を取得

フォームの値を取得

前回のサンプルでグリッドに項目を追加する際に、おまけで紹介した、任意の値を追加する処理にExtJSのフォームがでてきました。ユーザーに何かしらの入力を促す際、フォームは重要になってきます。グリッドに入力を追加するだけでなく、既存の値を変更する場合もフォームで入力させるのが一般的です。今回はExtJSのフォームのなかでも基本中の基本の部分を簡単に紹介します。

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

ExtJS -3.0 日本語APIドキュメント – Ext.form.Fieldクラス
http://extdocs.xenophy.com/?class=Ext.form.Field

ExtJS -3.0 日本語APIドキュメント – Ext.form.TextFieldクラス
http://extdocs.xenophy.com/?class=Ext.form.TextField

ExtJS -3.0 日本語APIドキュメント – Ext.form.NumberFieldクラス
http://extdocs.xenophy.com/?class=Ext.form.NumberField

ExtJS -3.0 日本語APIドキュメント – Ext.form.DateFieldクラス
http://extdocs.xenophy.com/?class=Ext.form.DateField

ExtJS -3.0 日本語APIドキュメント – Ext.form.VTypesクラス
http://extdocs.xenophy.com/?class=Ext.form.VTypes

Read the rest of this entry »

  • Share/Bookmark

佐竹 裕行

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

ExtJS入門23 グリッドへの項目の追加と削除

with 5 comments

このエントリーを含むはてなブックマークはてなブックマーク - ExtJS入門23 グリッドへの項目の追加と削除 この記事をクリップ!Livedoorクリップ - ExtJS入門23 グリッドへの項目の追加と削除 Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 newsing it! この記事をChoix! Googleブックマークに追加 Bookmark this on Delicious Digg This

今回は空っぽのグリッドに対して、新規項目の追加とグリッドの項目の削除を行うサンプルを紹介します。
ローカルのデータを取り扱います。(サーバーサイドのプログラムを使ってグリッドのデータを取得している場合は、サーバー上のデータを削除する必要があります。)

追加と削除

追加と削除


グリッドのデータはストアで管理されています。グリッドは常にストアの状況を把握しています。ストアの情報に変化があった場合は即座にグリッドに反映されます。グリッドへの項目の追加と削除はグリッドのストアへの項目の追加と削除を行っているといえます。

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

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

ExtJS -3.0 日本語APIドキュメント – Ext.grid.GridViewクラス
http://extdocs.xenophy.com/?class=Ext.grid.GridView

Read the rest of this entry »

  • Share/Bookmark

佐竹 裕行

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

ExtJS入門22 グリッドのイベント処理(ダブルクリック、右クリック)

with 3 comments

このエントリーを含むはてなブックマークはてなブックマーク - ExtJS入門22 グリッドのイベント処理(ダブルクリック、右クリック) この記事をクリップ!Livedoorクリップ - ExtJS入門22 グリッドのイベント処理(ダブルクリック、右クリック) Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 newsing it! この記事をChoix! Googleブックマークに追加 Bookmark this on Delicious Digg This

前回はツールバーでグリッドの情報を取得し、ポップアップで表示しました。今回はグリッドのダブルクリックと右クリックのイベントで詳細を表示する処理を実行します。

グリッドのダブルクリックと右クリック(コンテクストメニュー)で処理を実装することで、より直感的なグリッドの操作が可能になります。
サンプルは前回のExJS入門21 グリッド・セレクション・モデルをベースにイベントの処理を追加しています。

右クリックメニュー

右クリックメニュー

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

リファレンスはこちらから
今回はExt.menu.Menuクラスを右クリックに仕込んでいます。

ExtJS -3.0 日本語APIドキュメント – Ext.grid.GridPanelクラス
http://extdocs.xenophy.com/?class=Ext.grid.GridPanel

ExtJS -3.0 日本語APIドキュメント – Ext.menu.Menuクラス
http://extdocs.xenophy.com/?class=Ext.menu.Menu

Read the rest of this entry »

  • Share/Bookmark

佐竹 裕行

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

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

with 4 comments

このエントリーを含むはてなブックマークはてなブックマーク - ExJS入門21 グリッド・セレクション・モデル この記事をクリップ!Livedoorクリップ - ExJS入門21 グリッド・セレクション・モデル Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 newsing it! この記事をChoix! Googleブックマークに追加 Bookmark this on Delicious Digg This

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

セレクションモデル

セレクションモデル

Read the rest of this entry »

  • Share/Bookmark

佐竹 裕行

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

ExtJS入門20 グリッドにフィルタリング機能を追加する

with 3 comments

このエントリーを含むはてなブックマークはてなブックマーク - ExtJS入門20 グリッドにフィルタリング機能を追加する この記事をクリップ!Livedoorクリップ - ExtJS入門20 グリッドにフィルタリング機能を追加する Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 newsing it! この記事をChoix! Googleブックマークに追加 Bookmark this on Delicious Digg This

引き続きGridPanel関連のサンプルの紹介です。
今回はグリッドに表示されている一覧から特定のデータをフィルタリングして表示する方法をご紹介します。

フィルタリング

フィルタリング

グリッドのデータはストアによって管理されています。グリッドの一覧からフィルタリングして特定の情報だけを表示したい場合は、大きく二つの方法があります。
一つはstoreクラスのfilterメソッドを使ってフィルタリングを行う方法。もう一つはstoreがロードしているデータをフィルタリングされたデータに更新する、つまりサーバーサイドでフィルタリングを行ってstoreを更新する方法があります。
今回はこの2つの機能を同時に持ったグリッドパネルのサンプルになります。

グリッドパネルについてはこちらもご覧下さい。

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

Read the rest of this entry »

  • Share/Bookmark

佐竹 裕行

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

ExtJS入門 DomHelperの使い方3 位置指定の追加と削除

without comments

このエントリーを含むはてなブックマークはてなブックマーク - ExtJS入門 DomHelperの使い方3 位置指定の追加と削除 この記事をクリップ!Livedoorクリップ - ExtJS入門 DomHelperの使い方3 位置指定の追加と削除 Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 newsing it! この記事をChoix! Googleブックマークに追加 Bookmark this on Delicious Digg This

DomHelperで要素を追加するの追加項目です。
DomHelperで要素の追加を行うときappendでは対象の要素の子の要素として要素を追加しましたが、insertBefore,insertAfterでは対象の要素の前後に要素を追加します。
今回はあえてパネルを使わずにやってみます。

DomHelperについてはこちらにサンプルがあります。

Read the rest of this entry »

  • Share/Bookmark

佐竹 裕行

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

ExtJS入門18 グリッド レンダラーを使ってデザインを変える

with 6 comments

このエントリーを含むはてなブックマークはてなブックマーク - ExtJS入門18 グリッド レンダラーを使ってデザインを変える この記事をクリップ!Livedoorクリップ - ExtJS入門18 グリッド レンダラーを使ってデザインを変える Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 newsing it! この記事をChoix! Googleブックマークに追加 Bookmark this on Delicious Digg This

グリッドのデザインを変更するための機能として、レンダラー機能があります。
レンダラーを使うと、グリッドに設定する値を調整したり、デザインを変更することができます。

レンダラーはカラムごとに設定します。そのためカラムモデルで各カラム設定に追加します。

前回のグリッドのサンプルを使って、レンダラーを使ってデザインを変更してみます。
Read the rest of this entry »

  • Share/Bookmark

佐竹 裕行

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

Get Adobe Flash playerPlugin by wpburn.com wordpress themes