JavaScript
ExtJS 2.2.1 の EditorGridPanel を IE6, 7 上で使用している場合、以下のような操作でランタイムエラーが発生する。（ただし、環境や設定によってはランタイムエラーが表示されない可能性あり） 編集中の任意のセルから同じ行の Grid に全体が表示されてい…
Web ブラウザで別ウインドウ表示中の Web ページ（別ドメイン）のスクリプトを実行する方法を探ってみた。セキュリティの関係上、Web ブラウザは別ドメインのページに対する DOM アクセスを許可しないため、通常の方法では実現できそうに無いが、セキュリテ…
注目の FireFox プラグイン Ubiquity の簡単なコマンドを自作してみました。 使用した環境は以下の通り。 FireFox 3.0.5 Ubiquity 0.1.5 Ubiquity コマンドの作成 それでは、はてなブックマークをタグ検索するコマンドを作成します。まず、はてなブックマー…
Flex 3 SDK の DataGrid コンポーネントを使って、以前 Ext JS で作成したようなデータグリッドのサンプルを作ってみた。機能としては以下のようなものを実装した。 カスタムソートの設定 フィルタリング処理の設定 スタイルの変更（選択行の背景色変更など…
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>
Ajax デザインパターンで取り上げられていた Data Grid パターンを実装しているものを探していて、Ext JS が良さそうだったので試してみる事に。（他にも Dojo、Rico、YUI、qooxdoo、dhtmlxGrid、ActiveWidgets Grid 等がある）まずは、Ext JS のサイトから …
