ExtJsだけは以前までやってたことがすっかり頭から消えるのでブログは必要だけど。
コスモスを見てきた。
まぁなんとも素晴らしく。
曇っていたのが残念だったのですが、量に圧倒されました。
と、
週末扇風機をしまってたら
なんと！！
出てきました！！
ながらダイエットの決定版！！
ナイキのおもり。
手に巻くやつが７００ｇ弱。
足に巻くやつが１１００ｇちょい。
これ肩こり倍増です。３、４年前、これ付けてジョギングとかしてたなんて信じられない。
てか、この姿、なんかアホだな。
2010年10月27日水曜日
2010年10月16日土曜日
ExｔJS－１０１ 階層構造のGrid２
既存のTreePanelを半写経しつつ作っている。
んだけど、
CSSを既存のものをつかいたかったから
それにあわせて作った。
それっぽくなった。
あとはコンテキストメニューから挿入、追加、削除。とか
keymapのこと勉強してAlt＋I→Rで挿入とかそんな実装を加えて操作用のパス情報、ID情報を非表示にしたらそれとなく使えそう。
それができたら階層構造Gridはもうやめよう。
でもクラス化せずにhtmlベタでサンプルとして作ってるから
これからモジュール化するのが面倒だね。
これ、やっぱりlineバージョンに切り替えられるようにしておいたほうが後々らくだよなぁ。
んだけど、
CSSを既存のものをつかいたかったから
それにあわせて作った。
それっぽくなった。
あとはコンテキストメニューから挿入、追加、削除。とか
keymapのこと勉強してAlt＋I→Rで挿入とかそんな実装を加えて操作用のパス情報、ID情報を非表示にしたらそれとなく使えそう。
それができたら階層構造Gridはもうやめよう。
でもクラス化せずにhtmlベタでサンプルとして作ってるから
これからモジュール化するのが面倒だね。
これ、やっぱりlineバージョンに切り替えられるようにしておいたほうが後々らくだよなぁ。
2010年10月14日木曜日
ExｔJS－１００ 階層構造のGrid
あ、１００番だ。
あー１００番くらいには少し形にしたかったんだけどなぁ。
やったとしても３０分位しかさわってなくて、、ちょっと調べておしまい。とか。
もしかしたら前進せず、後退してるんじゃないかという勢いでした。
ので、
すこし時間をとってみました。っても１時間～２時間ですが。
なんか休日どっぷり時間をとってプログラムしてみたい。
さて、また
の続き。ほんの少し実装を変えて再構築中。
もともとTreePanelってのがあるんだけど
データ構造を合わすのが面倒なのと
ひとまずどうしたらこうした階層構造なGridを簡単に作れるかの
勉強ではじめたこのGrid。
DDで親子関係のそれはできるようになったけど、、、
CSSがうまく当たらない。はてはて。
ちょっとはまるととたんに止まる。
でもって止まるととたんに眠くなる。
まぁ、サンプルをまねてみよ。
という状況。
またしばらくできなそうだなぁ。
2010年10月10日日曜日
本棚を作った
そう、狭い作業場なので本が溜まり始め。。。
雑誌は処分したんだけど、残りの本が邪魔すぎる。
「自炊」をしたいんだけど、自炊セット、高い。
高い。高いってのは高価だってことだ。
高いので、本棚を作ろうということにした。
鳥居となる部分は先日出来ていたので追加作業。
出来るまでの手順はいたって簡単。
作業場なので景観は気にしない。
２×４材買ってきて。
18cm幅の板買ってきて。
１：鳥居みたいの作って
２：天板くっつけて（この天板も本棚の一部）全部本が並ぶ。
３：幅にあわせてボックス作って
４：ドッキング。
５：出来上がり。
穴ぐらがますます穴ぐら化（笑）。
まぁよしとしよう。
裁断機、スキャナを買ったら多分窓側に棚を作っ
て設置するんだろうけどそうすると光が。。。
雑誌は処分したんだけど、残りの本が邪魔すぎる。
「自炊」をしたいんだけど、自炊セット、高い。
高い。高いってのは高価だってことだ。
高いので、本棚を作ろうということにした。
鳥居となる部分は先日出来ていたので追加作業。
出来るまでの手順はいたって簡単。
作業場なので景観は気にしない。
２×４材買ってきて。
18cm幅の板買ってきて。
１：鳥居みたいの作って
２：天板くっつけて（この天板も本棚の一部）全部本が並ぶ。
３：幅にあわせてボックス作って
４：ドッキング。
５：出来上がり。
穴ぐらがますます穴ぐら化（笑）。
まぁよしとしよう。
裁断機、スキャナを買ったら多分窓側に棚を作っ
て設置するんだろうけどそうすると光が。。。
2010年10月6日水曜日
ExｔJS－９９ Ext.form.ComboBoxとhiddenName
今日、先日の勉強会でご一緒させて頂いた@taka_2さんが
ふとつぶやいていた件について
「あー、そういわれれば確かに。なんでComboBoxでhidenNameを指定すると取得できるんだろか？」
ととっても新鮮な気付きをいただきました。
で、ちょっと調べてみた。
ちょっと読んだだけだからばっちりあってるとはかぎらないけど、
概要はあってるはず。
まず、しょっぱなから本題からそれるけど、storeプロパティに配列指定だけで動いている
仕組みを追ってみた。
storeを配列で指定した場合、ComboBoxのstoreは内部でストアマネージャでlookupしてる。
指定されたidが配列だったら'field1'、'field2'…というフィールド名でArrayStoreを内部で生成してるようです。
だから配列で設定しても内部ではArrayStoreなんですね。
次。
FormPanel.getForm().getValuesで取得な話。
form.getValuesは内部でExtのコンポーネントのgetValue()をしているわけじゃなく、
HTMLElementのvalueを取得している。
もう少し構造を追ってみる。
getValuesはBasicFormで実装されてて,
Ext.lib.Ajax.serializeForm(this.el.dom);となっている。
key=valueの形でelement.name = element.value/element.textになる。
各値は&結合。
このelementはExt.ElementじゃなくてDomのエレメント。
serializeFormするときのelement.valueはDomのHTMLInputElement.valueということになる。
で、DomのHTMLInputElement.valueはtypeが「text,file,password」の時は入力されている値がそのまま
セットされるためシリアライズするときのvalueは表示されているものが設定される。
ということになるっぽい。
ComboBoxっていったってもとはTextFiledクラスを継承したTrggerFieldクラスを継承してるだけで、
選択肢がみえているのはComboListLayerで別Divでそう見させているから。
実はinputタグのtypeがtext。
だからgetValuesすると表示している値が取得できてしまうのである。っぽい。
まずはこれがComboBoxがgetValuesで取得するとvalueが取得できない理由でした。
ではhiddenNameを設定するとなぜ取得できるのか。。
hiddenNameを設定するとComboBox内部でinputタグをtypeをhiddenで作成する。
DomのHTMLInputElement.valueはtypeが「button,hidden,submit,reset,image,checkbox,radio」の時は
value属性値が設定されるからhiddenタグはvalue値になるわけ。
ComboboxのSetValueでhiddeenField.valueにvalue値を設定しているもんね。
だからシリアライズするときはvalue値が設定される。
と、こういう解釈で良いのかな？？。。
hiddenNameを設定するとvalueが取得できて、いままで取得できてた元の値が取得できなくなるのはなぜか？
insertSiblingで挿入しているので
type='text'な値とtype='hidden'な値が取得できても良いじゃないか。
とおもった。
前に書いた様に、
getValuesで取得できるのはExt.lib.Ajax.serializeFormでシリアライズしてるから。
でその対象の条件は!element.disabled && name。
が、hiddenNameが設定してあると元となる表示されている方のエレメントはname属性がついていない。
なぜか。
このname属性、ComboBoxのhiddenName指定すると
onRender内で
submitValue = falseにする。
で、ComboBoxの基底クラスであるFieldクラスのonRenderでは
submitValue === falseだと
this.el.dom.removeAttribute('name');
としていてname属性を削除している。
ということでname属性が無くなり、
getvaluesしても取得できないんだ。。。
↑hiddenName未設定時のDomツリー
↑hiddenName設定時（「hidden」という名前で設定）のDomツリー
＝＝＝＝
おさらい。
ComboBoxその１：storeを配列で指定した場合の話
ComboBoxのstoreは内部でストアマネージャでlookupしてる。指定されたidが配列だったら'field1'、'field2'…というフィールド名で
ことでArrayStoreを内部で生成してた。
だから配列で設定しても内部ではArrayStoreなんですね。
ComboBoxその２：Comboboxの値の話
フォーム内の値はHTMLElementのvalueをシリアライズ化しているのでCombboxの実体はtype=textなので表示されている
値がvalueとなっちゃうよ。ということ。
ComboBoxその３－１：Comboboxの値の話
表示している値（displayFiled）じゃなくて（valueFild）が取得したい場合はhiddenNameを指定する。
これを指定するとinsertSiblingでhiddenタグをname属性をhiddenNameで挿入してくれる。
で、元からあるinputタグのname属性は削除される。
ComboBoxその３－２：フォームのgetValuesについて
内部でformが抱えるDomエレメント分まわしてシリアライズ化する。key(name属性)/value(value属性)で。
で、そのときの対象は!element.disabled && name。
＝＝＝＝＝
まとめ
ComboBoxを利用するときは配列指定であれば特にArrayStore＝SimpleStoreは
指定することなく利用できるようです。
hiddenNameを指定することで値が取得できるようになるのは
内部でinputタグをtype=hiddenで作成しているからgetForm時のシリアライズ化時に
value値をちゃんと取得してくれるから。
hiddenNameを指定するといままで設定していたname属性は排除されて
シリアライズ化対象から外れます。
＝＝＝＝＝
おしまい。
自分なりにすっきり！！
ふとつぶやいていた件について
「あー、そういわれれば確かに。なんでComboBoxでhidenNameを指定すると取得できるんだろか？」
ととっても新鮮な気付きをいただきました。
で、ちょっと調べてみた。
ちょっと読んだだけだからばっちりあってるとはかぎらないけど、
概要はあってるはず。
まず、しょっぱなから本題からそれるけど、storeプロパティに配列指定だけで動いている
仕組みを追ってみた。
storeを配列で指定した場合、ComboBoxのstoreは内部でストアマネージャでlookupしてる。
指定されたidが配列だったら'field1'、'field2'…というフィールド名でArrayStoreを内部で生成してるようです。
だから配列で設定しても内部ではArrayStoreなんですね。
次。
FormPanel.getForm().getValuesで取得な話。
form.getValuesは内部でExtのコンポーネントのgetValue()をしているわけじゃなく、
HTMLElementのvalueを取得している。
もう少し構造を追ってみる。
getValuesはBasicFormで実装されてて,
Ext.lib.Ajax.serializeForm(this.el.dom);となっている。
key=valueの形でelement.name = element.value/element.textになる。
各値は&結合。
このelementはExt.ElementじゃなくてDomのエレメント。
serializeFormするときのelement.valueはDomのHTMLInputElement.valueということになる。
で、DomのHTMLInputElement.valueはtypeが「text,file,password」の時は入力されている値がそのまま
セットされるためシリアライズするときのvalueは表示されているものが設定される。
ということになるっぽい。
ComboBoxっていったってもとはTextFiledクラスを継承したTrggerFieldクラスを継承してるだけで、
選択肢がみえているのはComboListLayerで別Divでそう見させているから。
実はinputタグのtypeがtext。
だからgetValuesすると表示している値が取得できてしまうのである。っぽい。
まずはこれがComboBoxがgetValuesで取得するとvalueが取得できない理由でした。
ではhiddenNameを設定するとなぜ取得できるのか。。
hiddenNameを設定するとComboBox内部でinputタグをtypeをhiddenで作成する。
DomのHTMLInputElement.valueはtypeが「button,hidden,submit,reset,image,checkbox,radio」の時は
value属性値が設定されるからhiddenタグはvalue値になるわけ。
ComboboxのSetValueでhiddeenField.valueにvalue値を設定しているもんね。
だからシリアライズするときはvalue値が設定される。
と、こういう解釈で良いのかな？？。。
でもひとつ腑に落ちない。
hiddenNameを設定するとvalueが取得できて、いままで取得できてた元の値が取得できなくなるのはなぜか？
insertSiblingで挿入しているので
type='text'な値とtype='hidden'な値が取得できても良いじゃないか。
とおもった。
前に書いた様に、
getValuesで取得できるのはExt.lib.Ajax.serializeFormでシリアライズしてるから。
でその対象の条件は!element.disabled && name。
が、hiddenNameが設定してあると元となる表示されている方のエレメントはname属性がついていない。
なぜか。
このname属性、ComboBoxのhiddenName指定すると
onRender内で
submitValue = falseにする。
で、ComboBoxの基底クラスであるFieldクラスのonRenderでは
submitValue === falseだと
this.el.dom.removeAttribute('name');
としていてname属性を削除している。
ということでname属性が無くなり、
getvaluesしても取得できないんだ。。。
↑hiddenName未設定時のDomツリー
↑hiddenName設定時（「hidden」という名前で設定）のDomツリー
＝＝＝＝
おさらい。
ComboBoxその１：storeを配列で指定した場合の話
ComboBoxのstoreは内部でストアマネージャでlookupしてる。指定されたidが配列だったら'field1'、'field2'…というフィールド名で
ことでArrayStoreを内部で生成してた。
だから配列で設定しても内部ではArrayStoreなんですね。
ComboBoxその２：Comboboxの値の話
フォーム内の値はHTMLElementのvalueをシリアライズ化しているのでCombboxの実体はtype=textなので表示されている
値がvalueとなっちゃうよ。ということ。
ComboBoxその３－１：Comboboxの値の話
表示している値（displayFiled）じゃなくて（valueFild）が取得したい場合はhiddenNameを指定する。
これを指定するとinsertSiblingでhiddenタグをname属性をhiddenNameで挿入してくれる。
で、元からあるinputタグのname属性は削除される。
ComboBoxその３－２：フォームのgetValuesについて
内部でformが抱えるDomエレメント分まわしてシリアライズ化する。key(name属性)/value(value属性)で。
で、そのときの対象は!element.disabled && name。
＝＝＝＝＝
まとめ
ComboBoxを利用するときは配列指定であれば特にArrayStore＝SimpleStoreは
指定することなく利用できるようです。
hiddenNameを指定することで値が取得できるようになるのは
内部でinputタグをtype=hiddenで作成しているからgetForm時のシリアライズ化時に
value値をちゃんと取得してくれるから。
hiddenNameを指定するといままで設定していたname属性は排除されて
シリアライズ化対象から外れます。
＝＝＝＝＝
おしまい。
自分なりにすっきり！！
登録:
投稿 (Atom)