サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
大そうじへの備え
extjs.blog.sus4.co.jp
Sencha TouchとPhone Gapを使って、ハイブリッドアプリを作っているときに、 Android2.1, 2.1updateでフォームがおかしくなる現象に遭遇しました。 OS: Android 2.1 JS: Sencha Touch 1.1 現象には以下のようないくつかの種類があります。 画面遷移後もフォームが画面の上に残る 次の画面遷移してもフォームが残る フォーカスしたあとにスクロールするとフォームがずれる スクロールでフォームがずれる これらの根本的な原因はAndroidがフィールドの入力の際にinputフィールドとは別に入力フィールドが画面の上に表示して入力を実装していることのようです。 Android端末では、WebView上のテキストフィールドやパスワードフィールドは、ネイティブ側で上書きされているタメです。 Android 2.1系ではこのWebT
Ext.XTemplateではテンプレート内でforやifを設定して、テンプレートを処理することができます。条件分岐の処理をテンプレート内に記述して、apply()でデータを渡すだけです。 Ext.XTemplateについてのその他の記事 ExtJS入門10 Ext.XTemplateを使う ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う 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名古屋勉強会 xtem
前回はツールバーでグリッドの情報を取得し、ポップアップで表示しました。今回はグリッドのダブルクリックと右クリックのイベントで詳細を表示する処理を実行します。 グリッドのダブルクリックと右クリック（コンテクストメニュー）で処理を実装することで、より直感的なグリッドの操作が可能になります。 サンプルは前回のExJS入門21 グリッド・セレクション・モデルをベースにイベントの処理を追加しています。 グリッドパネル関連の過去の記事はこちらからです。 ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編 ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18 グリッド レンダラーを使ってデザインを変える ExtJS入門19 グリッドにページング機能を追加する ExtJS入門20 グリッドにフィルタリング機能を追加する ExtJS入門21 グリッド・セレクション・モ
タブパネルを閉じるときのイベントは少しややこしいので、簡単にまとめておきます。 以下のようなコードを使って、イベントの発火の順番を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
xtypeでパネルのタイプを定義する ViewportのitemsのようにExt.Componentのサブクラス(Ext.Panelなど)を与えるときに、インスタンスを直接渡すのではなく、オブジェクト・リテラルを記述して渡すことができます。 オブジェクトリテラルについてはこちらで詳しく解説されています。 http://builder.japan.zdnet.com/sp/javascript-kickstart-2007/story/0,3800083428,20365303,00.htm ECMAScriptにおける「オブジェクトリテラル」と言う書式に基づいています。「オブジェクトリテラル」は、次のように定義されています。 「{ }」（中括弧）で囲み、中にプロパティをカンマ区切りで複数記述できる。 プロパティは、「プロパティ名 : 値」と言う形式で記述する。 プロパティ名は、識
業務アプリケーションには欠かせないキー操作ですが、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年同大学を卒
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 – sh
今回はExtJSのフォームのエラー表示の便利な方法を紹介します。一般的なwebアプリの場合、FormPanelからフィールドの値をサーバーに送信後サーバーサイドで値のチェックが実行されます。その際にエラーが見つかった場合にそれをフィールドへ通知する便利な方法がExtJSでは用意されています。 ポストした後、サーバーのチェックが行われエラーの結果がJSONで返ってくるフォームパネルのサンプルです。 フォーム関連の過去の記事はこちらからです。 ExtJS入門 ExtJSのフォームについて（基本編） ExtJS入門32 フォームパネルとフィールド(基本編) ExtJS入門33 Columnレイアウトのフォー ExtJS入門34 ComboBoxの基本 ExtJS入門35 Tableレイアウトのフォーム ExtJS入門36 HTMLの標準フォームにExtJSのフィールドを設置する リファレンスは
フォーム関連の過去の記事はこちらからです。 ExtJS入門 ExtJSのフォームについて（基本編） ExtJS入門32 フォームパネルとフィールド(基本編) ExtJS入門33 Columnレイアウトのフォー ExtJS入門34 ComboBoxの基本 ExtJS入門35 Tableレイアウトのフォーム ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示するム リファレンスはこちらから ExtJS -3.0 日本語APIドキュメント – Ext.form.VTypesクラス http://extdocs.xenophy.com/?class=Ext.form.VTypes HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD
今回はExt JS,Sencha Touchのどちらでも非常によく使うAjaxの処理を紹介します。 サンプルコードはSencha Touchですが、Ajaxリクエストの処理はExt JSでもほぼ同じです。 まずAjaxでリクエストする先を用意する必要があります。 今回はPHPで作成しました。 ・PHP <?php //サンプル //3秒待つ sleep(3); //POST値の処理 $param = $_POST['id']; $res['id'] = $param; if ($param) { $res['success'] = true; }else { $res['success'] = false; } //JSONで返す header('Content-Type: application/json'); echo json_encode($res); die(); ?> 3
今回はExt JS,Sencha Touchのどちらでも非常によく使うAjaxの処理を紹介します。 サンプルコードはSencha Touchですが、Ajaxリクエストの処理はExt JSでもほぼ同じです。 Ajax サンプル まずAjaxでリクエストする先を用意する必要があります。 今回はPHPで作成しました。 ・PHP <?php //サンプル //3秒待つ sleep(3); //POST値の処理 $param = $_POST['id']; $res['id'] = $param; if ($param) { $res['success'] = true; }else { $res['success'] = false; } //JSONで返す header('Content-Type: application/json'); echo json_encode($res); d
7月の勉強会(東京)のまとめになります。 開発環境 → 好きなやり方。とりあえずささっと試したいならjsdo.itがおすすめ。コードの共有もできる。デバイスに依存しない部分なら結構使える。 検証機(タッチパネルデバイス) → iPhone 3GS以降 or iPad が無難。Mac があるならiPhone シュミレーターが一番安定している。iPhone 3G,Android端末は微妙。 APIリファレンス → 発表し忘れ項目。Sencha Touchを学ぶうえで公式のAPIリファレンスはとても重要。Ext JSほど充実していないが、サンプルコードも載っているのですごく参考になります。Sencha Touchのパッケージにも入っていますが、以下のURLで見れます。もちろん英語です。 http://www.sencha.com/deploy/touch/docs/ 本家フォーラム
Sencha Touch入門 Sencha Touch に付属するでもCarouselを見ながら、基本的なSencha Touchの使い方を紹介します。 コードは配布されているSencha Touchパッケージの/examples/carousel にあります。 ここではindex.htmlについては,前回の記事をごらんください。 index.jsをお好きなエディタで開きながらご覧下さい。 iPad or iPhoneがあるとなおよいと思います。 Ext JSの基本についてはこちらをご覧下さい： Ext.onReadyからはじめるExtJSのまとめ Sencha Touch Examples Sencha TouchはこれまでのExt JSのコードと違う個所がいくつかあります。 今回はその中でも基本となる、3点を紹介します。 1.Ext.setup() 2.onReadyコ
Sencha Touch をダウンロードするとGetting Started width Sencha Touchというオライリーの本のタイトルっぽいチュートリアルが付属しています。 当然英語なので勝手に翻訳してみます。 英語としては簡単な文章になっているので、原文でも読みやすいとおもいます。 Ext JSの知識がある人にとっては、内容があまりありません。ExtJSの知識無しでいきなりSencha Touchはじめる人のためのチュートリアルといった感じです。 Sencha Touch をはじめよう (Getting Started with Sencha Touch の邦訳) これはSencha Touchのはじめ型を解説した文書です。 Sencha Touchを使ってタッチスクリーンを持つデバイスに特化したWebアプリを作る際の基本的なステップを紹介しています。この解説では、今回
前回でExt JSを開発する環境がひとまず整いました。今回は実際にExt JSでどのようにコードを書いていくを紹介したいと思います。まずはHello, WorldをExt JSを３つのパターンで使って書いてみることにします。 HTMLを用意する。 まずHTMLファイルを作成して、Ext JSの読み込みます。ext-base.jsは必須のファイルです。ext-all.jsはExt JSのクラスを全て読み込みます。ext-all.jsを使うと実際に使っていないJSファイルまで読み込んでしまいますが、普段はこちらを使うようにします。ext-all.jsを読み込むことでExt JSの機能をフルで使うことができるので、こちらを読み込んで全部Ext JSでExt JSの機能をバリバリ使いましょう。 ext-all.cssはExt JSのデフォルトのスタイルが定義されています。ボタンやパネルなどのExt
ExtJSの標準のライブラリではファイルアップロード用のフォームフィールドは用意されていません。ファイルのアップロードフィールドを作成するためには、uxのExt.ux.form.FileUploadFieldを使うことが比較的多いです。今回はこのUXを使ってファイルを送信するフォームパネルのサンプルです。 Ext.ux.form.FileUploadField フォーム関連の過去の記事はこちらからです。 ExtJS入門 ExtJSのフォームについて（基本編） ExtJS入門32 フォームパネルとフィールド(基本編) ExtJS入門33 Columnレイアウトのフォー ExtJS入門34 ComboBoxの基本 ExtJS入門35 Tableレイアウトのフォーム ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示するム ExtJS入門38 独自のVTypeを定義して
前回までグリッドについてのサンプルを紹介してきましたが、今回はグリッドを少しはなれてExtJSのフォームについて簡単に紹介をします。 前回のサンプルでグリッドに項目を追加する際に、おまけで紹介した、任意の値を追加する処理にExtJSのフォームがでてきました。ユーザーに何かしらの入力を促す際、フォームは重要になってきます。グリッドに入力を追加するだけでなく、既存の値を変更する場合もフォームで入力させるのが一般的です。今回はExtJSのフォームのなかでも基本中の基本の部分を簡単に紹介します。 ExtJS入門23 グリッドへの項目の追加と削除 リファレンスはこちらから ExtJS -3.0 日本語APIドキュメント – Ext.form.FormPanelクラス http://extdocs.xenophy.com/?class=Ext.form.FormPanel ExtJS -3.0
JSONPでTwitter APIを利用する小ネタの紹介です。前回まではグリッドのデータソースとしてJSONPで色々なAPIを利用していました。APIから取得したデータはストアに保存されています。そのためグリッド以外にも利用することができます。今回は前回と同じTwitter Search APIをデータソースにして表示をグリッドパネルからデータビューに変更してみます。 Twitter API をDataViewの表示 グリッドパネル関連の過去の記事はこちらからです。 第5回ExtJS勉強会＠名古屋 2/25 パネル内のエレメントを作成する ExJS入門29 JSONPを使ってYouTube Data APIをグリッドパネルに読み込む ExJS入門30 Twitter Search APIを使ったグリッドパネル ExJS入門31 GridViewでグリッドの各行の背景色を変更する リファレン
かなり更新をさぼってしまいましたが。勉強会に向けてGrid関連のサンプルを紹介していきます。 Ext.PagingToolbar 今回はGridにページング機能を追加するサンプルになります。 多くのwebアプリケーションで項目の一覧を表示する際にページング機能が実装されています。ExtJSの一覧表示といえばGridPanelですが、GridPanelに簡単にページング機能を追加するためのExt.PagingToolbarというものがあります。今回はこのPagingToolbarをグリッドに使ってみます。 グリッドパネルについてはこちらを ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編 ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18 グリッド レンダラーを使ってデザインを変える リファレンスはこちらから ExtJS -3.0 日本語API
昨日の勉強会の私のセッションは改善の必要がありますね。次回はもっと分かりやすく進められるようにがんばります。 ブログを使って説明していましたが、ブログだと投稿日の降順に記事が並ぶので、どの記事を見ているか探すのが難しかったと思います。 次回からはこんな感じで、その日やることをまとめておきます。 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を作る。 また分かりにくかった点やご
はじめまして、sus4の佐竹です。 今回から数回にわたってExtJSの導入方法を紹介したいと思います。 最低限必要なもの ・ブラウザ (Firefox1.5以降, Safari3以降, Opera9以降、IE6以降、公式にサポートは書かれていませんがChromeでも動きます。) ・エディタ (sus4社内では主にvimを使っています。) あるとよいもの Firebug(Firefox アドオン、http://getfirebug.com/jp.html) JSLint(構文チェッカー、http://www.jslint.com/) Firebugはほとんど必須のようなものですが、Opera DragonflyやChromeの開発ツールでも可能ですが,Firebugを使った方が無難な気がします。 この解説では基本的に開発環境はFirefox 3.5 と Firebugを使うものとしま
株式会社sus4 開発チームこのブログに載っているサンプルコードや、簡単なコードをチェックする際に、わざわざHTMLファイルを用意して、ExtJSの読み込むコードを埋め込んで、Java Scriptを書くのは少し面倒くさかったりします。そんなときに使える小技にブックマークレットとFirebugの合わせ技があります。 ExtJSライブラリをブックマークレットで読み込んで、FirebugのコンソールにExtJSのコードを書いていくことができます。 元ネタはここです。 http://extjswordpress.net/extjs-apps-as-bookmarklets/ 上記のリンク先からのコードをブックマークして使います。 下にそのコードを見やすく改行したのを展開してみました。 javascript: var ss=document.createElement('link'); s
Ext JSの花形の機能がViewportです。Viewportを使うことでブラウザの画面全体をExt JSで支配することができます。たった一つの小さなHTMLの上にViewportを使って様々なアプリケーションを構築することができます。Viewportは一言で言うと、ブラウザの画面を支配する特殊なパネルクラスと言えます。 Ext.Viewportのコンフィグ ExtJSではクラスのインスタンスを生成するときに、様々なコンフィグオプションを設定して、必要なクラスを作っていきます。それぞれのコンフィグがどんな設定をするかはAPIリファレンスで確認することができます。APIリファレンスのクラスの説明のすぐ下にリスト表記されています。 Viewportで使用するコンフィグの基本的な2つがlayoutとitemsです。Viewport内のパネルのレイアウトを指定するのがlayoutコンフィグで、V
このページを最初にブックマークしてみませんか？
『ExtJSで楽しくRIA業務アプリ開発』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
