RadioボタンでException

Rails ExtJS

普通にRails上で書いたradioボタンをExt化しようとしたら，いろいろ問題がでてはまったのでメモ．

まずは普通にRailsでradioボタンを準備

<%= radio_button(:user, :sex, 1) %><label for="user_sex_1">男</label>
<%= radio_button(:user, :sex, 2) %><label for="user_sex_2">女</label>

この二つの要素をExt化したいとなると，多分下みたいな感じ．

var user_sex_1 = new Ext.form.Radio({applyTo:'user_sex_1'});
var user_sex_2 = new Ext.form.Radio({applyTo:'user_sex_2'});

まずこの状態でやってみると下記例外が発生．

[Exception... "'Error parsing selector, parsing failed at "]"' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]
http://localhost:3000/javascripts/lib/ext-2.2/ext-all-debug.js?1217843684
Line 1689

これを見る限りでは，なんらかの要素に"["が入ってるからパースエラーだ馬鹿野郎と怒られてるみたいだ．
たしかに上のビューで書き出されるnameは"user[sex]"になる．
"["なんてのはnameくらいにしか入らないので，これを修正．
で，controllerかmodel側でごにょごにょしてあげるってことで以下のようにビュー側を変更

<%= radio_button(:user, :sex, 1, {:name => 'user_sex'}) %><label for="user_sex_1">男</label>
<%= radio_button(:user, :sex, 2 {:name => 'user_sex'}) %><label for="user_sex_2">女</label>

そうするとhtmlは

<input id="user_sex_1" type="radio" name="user_sex" value="1" /><label for="user_sex_1">男</label>
<input id="user_sex_2" type="radio" name="user_sex" value="2" /><label for="user_sex_2">女</label>

これでいけるだろうと思ってやってみると，まぁ表示は普通にできてる，けど要素をクリックすると，以下のエラー．

Ext.getCmp(el.dom.id) is undefined
http://localhost:3000/javascripts/lib/ext-2.2/ext-all-debug.js?1217843684
Line 28353

あれ，コンポーネントとして認識していない？

で，結果として自分の勘違いなのかなんなのか分からないけど，以下のように書かないといけないとコンポーネントとして認識してくれないみたいだった．

var user_sex_1 = new Ext.form.Radio({applyTo:'user_sex_1', id:'user_sex_1'});
var user_sex_2 = new Ext.form.Radio({applyTo:'user_sex_2', id:'user_sex_2'});

つまり，applyToだけでは一応Extオブジェクトとしては作るけど，idを指定しないとコンポーネントとしては登録しないよ，みたいな感じ．
他のTextFieldとかはapplyToだけでコンポーネントとして取れてたようなイメージがあったから，ちょっとはまってしまった．

試してみたら，id指定してないとTextFieldであってもEct.getCmpではコンポーネントとして取れないな…orz
にしてもそういう仕様だとしたら，コンポーネントをつくるときのidとhtml中のidは別っていうことか．
ちゃんと把握してないと混乱してしまいそうだなぁ．aliasとかkeyとかなんか別の名前がよかったな．


とりあえず，idを埋め込む簡単なお仕事を誰かに振るとしよう:-)