Ajax
以前、jQTouch 等で作成したもの（iUI版 id:fits:20100715, jQTouch版 id:fits:20100731, SenchaTouch版 id:fits:20101005）と同様のサンプルを jQuery Mobile で作成してみました。（サーバー側の処理も同じものを使用） jQuery Mobile 1.0 a1 ただし、今回…
以前、iUI や jQTouch で作成したもの（iUI版は id:fits:20100715, jQTouch版は id:fits:20100731）と同様のサンプルを Sencha Touch で作成してみました。（サーバー側の処理も同じものを使用） Sencha Touch 1.0 Ext.NestedList を使って実装してみました…
前回id:fits:20100715、iUI を使って作成したiPhone用のWebページと同等のものをjQTouchで作成してみました。（サーバー側の処理は同じものを使用） jQTouch 1.0 beta2 基本的な処理内容に前回のiUI版との違いはなく、動的に生成するHTMLの内容だけが異なる…
id:fits:20100713 で作成した Sinatra のサーバーロジックをそのまま使って、iPhone用のWebページを作成してみました。（ただし、iPhone 上で動作確認してません） 今回使った環境は以下の通り。 iUI 0.31 jQuery 1.4.2 iUI は今のところ、JSON データを取得…
DB の検索結果を JSON で返して、JavaScript（ExtJS）で表示するような Web システムのサンプルを Sinatra, Grails, CakePHP の 3種類のフレームワークで作成してみました。処理の概要は以下の通りで、MySQL の information_schema データベース TABLES テー…
SproutCore の ToDo チュートリアルを元に、JAX-RS（Jersey 使用）と連携させてみた。 ちなみに SproutCore は JavaScript 用のフレームワーク。Ruby 上で実行やビルド（HTML や JavaScript を生成）を実施し、Rails と同様の感覚で JavaScript の Web アプ…
Ext JS の DataGrid は多機能で便利なのだが、表示するデータ数が増えるとパフォーマンスに影響がでる。クライアント PC の性能やブラウザに依存するだろうが、数百件程度のデータでも結構厳しい印象がある。そこで、ページ処理を実装して一度に表示するデー…
Ext.data.SimpleStore の fields の定義で sortType に function を設定することで、独自のソート処理を適用することができる。function は、引数を 1つだけとり、戻り値にソートで比較するための数値を返すようにする。なお、通常のソート処理は type で指…
Ext JS にはコンポーネントの状態を保存する機能が用意されており、以下のように DataGrid でも事前に Ext.state.Manager に Ext.state.CookieProvider をセットしておけば、Cookie に DataGrid の状態が保存され、ページ更新時などに自動的に保存された状態…
Ext JS の DataGrid と同等の YUI Library 2.4.1 の DataTable を使って行選択時のイベント処理を実装してみた。結果的に、機能や API の使い勝手に大差は無いものの、現時点では Ext JS の DataGrid の方が洗練されており完成度が高い印象を受けた。YUI の …
Ext JS の DataGrid のセルや行の文字色や背景色を変更するには、以下のような class のスタイルを変更する。 セルのスタイル指定 -> x-grid3-cell-inner 行のスタイル指定 -> x-grid3-row 選択行のスタイル指定 -> x-grid3-row-selected ストライプ行のスタ…
Ext JS の DataGrid を使って以下の機能を実装してみた。 行選択のイベント処理 表示データにフィルターを適用 サンプルコード <html> <head> <link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script> </link></head></html>
Grails 1.0-RC3 で Ajax を使ったサンプルを作ってみた。とりあえず、Grails で Ajax を使うには以下のようにすれば良いみたい。 gsp ファイル g:javascript を タグ内に追加 remoteXXX や formRemote タグを使用 コントローラークラス render メソッドを使…
Ajax デザインパターンで取り上げられていた Data Grid パターンを実装しているものを探していて、Ext JS が良さそうだったので試してみる事に。（他にも Dojo、Rico、YUI、qooxdoo、dhtmlxGrid、ActiveWidgets Grid 等がある）まずは、Ext JS のサイトから …
