ext.js

extjsのJsonWriterが送信するJSONのルート要素

extjsにはRESTfulなサービスを利用するための機能があり、簡単にJerseyと通信することができるのですが、examplesにあった以下のようなコードだと、 var reader = new Ext.data.JsonReader({ totalProperty: 'total', successProperty: 'success', idPropert…

Gridから複数の列をまとめて削除するとサーバに重複したリクエストが送信される

Problem with Restful grid & removing rows... 私はこの動作はちょっとおかしいと思うのですが。。 StoreのautoSaveがtrueになっている状態で、GridPanelで複数行選択して削除しようとすると、同じ行について複数回サーバにリクエストが送信されます。さら…

extjsのStoreでサーバに送信されるパラメータ名を変更する

extjsたまに使うとconfigオプションの書き方を忘れているので、積極的にメモしていこうと思います。 Storeでサーバ側でソートやページングする場合に送信されるクエリのパラメータ名はデフォルトで以下になっています。 データの開始位置: start 取得するデ…

Seleniumからextjsのコンポーネントを操作する

seleniumのテストから、extjsのコンポーネントを操作する場合に、divとかinputとかのHTMLのエレメントを直接操作(clickとかtypeとか)しても、ブラウザから手で操作したときと同じ動作にならないことがあります。例えば、GridPanelでの行の選択だと以下のよう…

ラジオボタンの状態保存

以前、ext.jsでcookieを使ってラジオボタンの選択状態を保存する機能を試してみたのですが正常に動作しないケースがありました。具体的には、フォームの他のボタンの選択などによって、ラジオボタンの表示切替やボタン個数が動的に変更されるようにしていた…

Ext.JS 2.3.0 -> 3.1.0

Ext.JSを2.3.0から3.1.0にバージョンアップしました。フォーム系とTreePanelくらいし使っていなかったのですが、特に問題はありませんでした。2.3.0&IEの環境で、ツリーのノードがクリックされたときにwindow.open()すると元ウィンドウにフォーカスが移って…

IEでTextFieldの上下ボーダーが消える

IEでExt.JSのTextFieldやTextAreaなどのコンポーネントを表示すると上下のボーダーが消えてしまうことがあるようです。なんかおかしいとは思っていましたが、見た目だけの問題なので放置していました。Ext.JSのサイトのサンプルをIEで閲覧すると画像のように…

EditorGridに入力された値をまとめてSubmitする

FormPanelの中にEditorGridPanelを入れ、Grid上で編集した内容をFormPanelのsubmit時にまとめてサーバに送信する、ということがしたかったのですが、正式な方法がわからなかったので次のように対応してみました。 // セルのrender時にhiddenフィールドを追加…

バイト数でのTextFieldのmaxLengthバリデーション

Ext.JSのTextFieldでは、こんな感じで入力できる文字数の制限を設けてバリデーションを行うことができます。 var myField = new Ext.form.TextField({ id: 'name', fieldLabel: '名前', maxLength: 50 }); 私の環境はHTMLおよびDBの文字コードがShift_JIS(Wi…

Ext.JS 3.0

Ext.JS 3.0が正式にリリースされたのでダウンロードしてみました。zipファイルを展開してファイルを差し替えようかと思ったのですが、2.2.1で存在していたいくつかのthemeが同梱されなくなっています。forumのこのスレッドを読むと、意図的に同梱するのをや…

TeraStationのUIがExt.JSだった。

BuffaloのTeraStationを買ったのですが管理画面のUIがExt.JSベースでした。こんなところでも使われているのですね。 もちろんテーマはかえてありますが、フォームのボタン類で使っている人ならピンとくると思います。そういえば、Ext.JSの勉強会でそんな話を…

iframeを使う

Ext2.0 IFrame within TabPanel - Ext JS Forums Ext.JSのコードの中でiframeを使う方法です。フォーラムより。 Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, { onRender : function(ct, position){ this.el = ct.createChild({tag: 'iframe', id…

Ext.JSのリソース

自分用のExt.JSのリソースのまとめですが。 APIドキュメント Ext API ドキュメント Ext API ドキュメント(日本語) サンプル・チュートリアル [http //extjs.com/deploy/dev/examples/samples.html:title=Ext JS 2.2 Samples]:公式サイトのサンプル [http //e…

ExtJapan Weekly Workshop

先日のExt.JSの勉強会で告知されていた、週一の、よりディープな?勉強会が今週の木曜日(12/4)に開催されるそうです。 code:x - ExtJapan Weekly Workshop 開催のお知らせ ExtJapan Weekly Workshop 毎週となると厳しいかもしれませんが、初回ということで参…

Checkboxにアイコンをつける

チェックボックス(Ext.form.Checkbox)のチェックボックスとラベルの間にアイコン画像を表示する方法。 はじめに、ラベル(boxLabel)のスタイルを使って背景画像として表示しようかと思ったのですが、boxLabelにはスタイルを設定できませんでした。labelStyle…

IE6でツリーに余分な空白が表示される

IE6での問題点 で書いた「TreePanelでTreeNode#expand()で下位のノードまでまとめて開くと最下位のノードの下に余分な空白が発生する」という件です。 上の画像のように最後のノードの下に余分な空白が表示されてしまいます。 どうやら、IEでフレームを使っ…

IEでのラジオボタンの表示崩れ

IE6での問題点 という件ですが、まずはラジオボタンの表示崩れについては解決できました。具体的には、ラジオボタンをColumnLayoutで並べようとすると、↓の画像のようにboxLabelで指定したラベルの表示が崩れてしまうという問題でした。 IE Developer Toolba…

IE6での問題点

Ext.JSのようなJavaScriptのライブラリを使うメリットとして、クロスブラウザへの対応が楽になるという点があります。 Ext.JSはいちおうIE6もサポートされているようですが、勉強会などでちらほら耳にするようにIE6ではどうもうまく動かない部分があります。…

ラジオボタンの状態保存

Ext.jsでは、Cookieを使用してUIコンポーネントの状態を保存しておくことができます。今回は、以下のサイトを参考に、ラジオボタンの状態を保存する機能を試してみました。ラジオボタン以外のコンポーネントについても基本は同じだと思います。 How to make …

メッセージのローカライズ

Ext.jsのGridのツールバーだとか、バリデーションのメッセージなどローカライズする方法。 Tutorial:Localizing Ext を参考に。 Extクラス Extに含まれるクラスについては、"source\locale"にローカライズ用のJavaScriptファイルがあるのでこれをHTMLのヘッ…

AjaxとシフトJIS

全体の文字コードをシフトJIS(Javaでは"Windows-31J")で統一しているWebアプリケーションで、部分的にExt.js(に限らずAjax)を使おうとするとAjax通信部分のデータはUTF-8にする必要があるため文字コードの部分でつまづくことが多いです。サーバからのレスポ…

Ext.onReady()の中で要素を取得できない現象

既存のWebアプリケーションの一部にExt.jsのコンポーネントを使おうとしたときに発生した現象なのですが、以下のようにExt.onReady()でボディの中のdiv要素を取得しようとしたところnullになってしまいました。renderToとかでも同じです。 Ext.onReady(funct…

日付の表示

Rails Railsから取得した日付を含むJSON形式のデータを、Extで表示するときのメモです。Railsでのタイムゾーンを含む日付はTimeWithZoneクラスで、これをto_jsonでJSON形式に変換すると、以下の様になります。 2008-09-08T15:00:00Z(タイムゾーン:UTC) 200…

Ext.tree.TreePanel

TreePanelの使い方のメモです。 基本的な使い方 Ext JS 2.2 Samples: Reorder TreePanel var tree = new Ext.tree.TreePanel({ el:'tree-div', useArrows:true, autoScroll:true, animate:true, enableDD:true, containerScroll: true, // dataUrlからTreeLo…

Extコンポーネントの継承

↓のチュートリアルについてのメモです。 Manual:Component:Extending Ext Components / Ext.jsExtのコンポーネントを使う場合には、以下のGridPanelの例の様にコンストラクタの引数として、コンポーネントの設定を行うためのコンフィグオプションをハッシュ…

第3回Ext JS/Ext GWT勉強会

水曜日の夜に開催されたExt JS/ Ext GWT勉強会に参加してきました。リンク先に資料がアップされています。 7ns.jp ~ Simple Web Services» Ext JS お知らせ » 第3回 Ext JS / Ext GWT勉強会を開催しました&資料 勉強会と言っても、今回は技術的な点よりもラ…

inputのnameに角括弧を使うのは正しくないのか

ここ数日、Ext.jsを使ってみてます。単純なマスタの管理画面のようなところで、ラジオボタン(Radio)を作って、 { xtype: 'radio', fieldLabel: '分類', boxLabel: '分類1', name: 'book[type]', inputValue: '1' } これをクリックするとエラーが出ます(Fireb…

現在は、RPC経由で取得するデータをExtのウィジェットで使う場合には、データはModelDataインタフェースを実装したクラスのインスタンスじゃないといけないのですが、1.1からはJava BeansでもOKになるようです。ただし、マーカーインタフェースは実装する必…

第2回Ext JS/Ext GWT勉強会が7/29(火)に開催されるそうです。 第1回は参加できなかったのですが、今回こそ行きたいです。

Ext GWT v1.0 Released

GWT用ライブラリExt GWTが正式リリースされてました。GWT 1.5に対応しています。 Ext GWT v1.0 Released 基本的にはGWTのウィジェットと同じ使い方で使えるんだろうと思うのですが、そろそろヘルプを見ながら使ってみようと思います。RPCの部分はどうなって…