comboboxに選択肢を追加したい

[skies04]

GridPanelを使用して、カラムを任意入力可能なComboBoxにします。

１レコード目のComboBoxに入力した値を
追加した状態で他のレコードのComboBoxのリストに表示させたいです。


ComboBoxのrendererで、入力した値をComboBoxのStoreに追加しても、
リストを表示させると最初に持たせていたリストしか表示されませんでした。


方法が分かる方がいらっしゃいましたら、お教えいただければ思います。

[mashiki]

あまり見かけないUIを実現されようとしているみたいですね。
また説明が、読んでいる皆さんに伝わりにくいように思えます。
書いたコードを貼付けて説明されては。

> １レコード目のComboBoxに入力した値を
> 追加した状態で他のレコードのComboBoxのリストに表示させたいです。
１行目でなく上部のフォームやメニューにComboBoxまたはtextfieldをおいた方が、
コードは簡単になりそうです。
もし２行目以降のComboboxが選択のみだとしたらなおさらです。

> ComboBoxのrendererで、入力した値をComboBoxのStoreに追加しても、
> リストを表示させると最初に持たせていたリストしか表示されませんでした。
ComboBoxのrendererとは何でしょうか？
Columnのrendererだとしたら、タイミングが違うと思います。

Gridのeditイベントで１レコード目の目的のセルかを確認し、
Storeに行の追加、もしくは更新を行う感じになるかと思います。

とにかくStoreに追加するロジックが正しく実行され、期待通りにrowが追加されているかを、
ステップ実行等で確認された方がよいかと思います。

[skies04]

分かりにくとの指摘を頂きましたので、書き直します。


コードのイメージ
var data = [ {animal:"猫"},{animal:"犬"},{animal:"ウサギ"}];
var animalStore = Ext.create('Ext.data.Store',
{fields: ["animal"], data: {items:data},
proxy: { type: 'memory', reader: {type: 'json', root: 'items'} }})


comboAdd = function(value, metaData, record, rowIndex, colIndex, store, view){
var columns = view.getGridColumns()
var column = columns[colIndex];
var editor = column.getEditor()
if(editor){
var store = editor.getStore();
store.add(0, newRecord);
}
return value
}
Ext.create('Ext.grid.Panel', {
Gridの設定（割愛)
columns: [{
header:"氏名"
},{
header:"好きな動物",
renderer:comboAdd,
field:{
xtype:"combobox",
store:animalStore
}
}]})


上記のようなGridのComboBoxに入力された値を同じカラムのComboBoxのリストに追加していきたいです。


氏名はtext入力（これはどうでもいい）
好きな動物はComboBoxのリストから選択、リストにない場合はtext入力


次のように入力した場合、
｜氏名｜好きな動物｜←Gridのカラム
｜B夫｜アルパカ　｜←レコード 「アルパカ」を手入力
｜C子｜ブタゴリラ｜←レコード 「ブタゴリラ」を手入力
｜D夫｜アルパカ　｜←レコード


好きな動物のComboBoxのリストが「猫、犬、ウサギ、アルパカ、ブタゴリラ」になっていて、D夫はアルパカをリストから選択出来る。
方法が分かる方がいらっしゃいましたら、お教えいただければ思います。


mashiki様
ご指摘ありがとうございます。
説明は難しいですね。。


>１行目でなく上部のフォームやメニューにComboBoxまたはtextfieldをおいた方が、
>コードは簡単になりそうです。>もし２行目以降のComboboxが選択のみだとしたらなおさらです。
行数は関係なく、Comboboxのリストにない物が入力されたら、
Comboboxのリストに反映したいのです。


>ComboBoxのrendererとは何でしょうか？
>Columnのrendererだとしたら、タイミングが違うと思います。
そうです。Columnのrendererですね。。


Columnのrendererは、Columnの値が編集されて表示される前に呼び出されるものなので、
ここでは関係ないのですが他の処理の実装の関係上、
Columnのrendererで出来ると都合が良いのです。


>とにかくStoreに追加するロジックが正しく実行され、期待通りにrowが追加されているかを、
>ステップ実行等で確認された方がよいかと思います。
Storeに追加されるのは確認済みです。
Storeに追加してもリストを表示すると、Storeが「猫、犬、ウサギ」の状態に戻るのです。

[shobuno]

申し訳ないですが、コピペで動かなかったからやめた…
あまりにも割愛しすぎです。


投稿するエディット画面で＃や、PHPのボタンを押すと、［CODE］［/CODE］や［PHP］［/PHP］のタグが出ます。
その中にコードを記述すると、きれいに表示されて、スクロールバーも出ます。

そうすれば、意味も無く省略する必要も無く、複数ファイルをファイル毎に提供できます。
そうすれば、みんな再現しやすくて回答しやすい。
みんな幸せになります。

見え方は、プレビューで見てみると良いです。



ちなみに、バージョンは？
4.Xだとまともに動かなかったです…俺の力が足りないのかな…

[mashiki]

まあ、動くコードじゃなくて、説明を補うためのコードだから。
でも、問題を再現する最小限の動くコードが提示されると、パズルの好きな人は反応するでしょうね。

特にtypoがらみだったとしたら、そのものじゃないと。

skies04 さんが本当にanimalStoreにデータが足されたのを確認してるなら、上記に上がっていない、イベントないしは、renderer内のロジックでリセットしちゃってるんでしょうね。

やったことが無い、UIだったんでためしてみたよ。
rendererだと、いろんな状況で動くから、しなければいけないチェックがもっと多くなるし、パフォーマンスも。
で、rendererでなく、最初の提案通りeditイベントで書いてみた。
http://jsfiddle.net/mashiki/qPjaZ/

※4.1.1で最初のeditイベントがどうのこうのというのを見かけたことが有るけど、始めて直面した

[skies04]

shobuno様
コードを全部書くにも、設定値を渡してGridを生成するようなやり方なので、
余計な物がたくさんあるので、大幅に割愛していました。

誰か同じような事をやっていると思っていたので、やりたい事が伝われば〜とも思っていましたし。

バージョンは、4.0.7です。


mashiki様
typo・・・完全に眼中になかったです。。
今回は多分違うのでいいとして、今後は気をつけないと。。

そして、やりたい事を見事に汲んでいただき、ありがとうございます！

ただ、下記の手順だと追加されたレコードが消えませんか？
１、１レコード目のanimalに「桃太郎」と入力
２、リストに追加されている事を確認
３、２レコード目のanimalに「おばあさん」と入力後、
　入力出来る状態をしばらく保っていると、リストが表示されると思います。

この３、のリストを表示させると、追加されたはずの桃太郎が消えています。

[mashiki]

ほんとだ。
余計なロジックやイベント処理が消してるんじゃないってことですね。(chromeで確認FFはOK)

ここに解決方法のレスがつけばいいですが、Ext JS Community Forums 4.x の Bugsを検索して、
同様な報告が上がってなければ、レポートした方がいいような気がします。

僕のサンプルを変更してもいいので、日本語を含まないコードと動くサンプルを提示して、
バグレポートの様式で投げてみては。
再現方法は結構込み入っているので、再現手順を動画で添付したほうが、
英語での説明は簡単にできるかと思います。

また、「入力出来る状態をしばらく保っていると、リストが表示される」という、ExtJS内部の処理は怪しいので、対症療法的にはこれをキャンセルするcomboboxの設定を見つけるか、内部をデバッグしてみて、いけそうならオーバーライドしてみるか。

[skies04]

mashiki様

ExtJS Community Forums 4.xのBugsも検索してみます。

バグレポート・・・日本語さえもあれなのに、英語。。
ハードル高っ　最終手段だな、、

フィルターのあたりが怪しいと思っているので、後でソースを追いかけてみます。

いろいろありがとうございました！