1. #1
    Sencha User
    Join Date
    Jan 2010
    Posts
    5
    Vote Rating
    0
    skies04 is on a distinguished road

      0  

    Default comboboxに選択肢を追加したい

    comboboxに選択肢を追加したい


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

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


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


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

  2. #2
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
    mashiki is on a distinguished road

      0  

    Default


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

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

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

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

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

  3. #3
    Sencha User
    Join Date
    Jan 2010
    Posts
    5
    Vote Rating
    0
    skies04 is on a distinguished road

      0  

    Default


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


    コードのイメージ
    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様
    ご指摘ありがとうございます。
    説明は難しいですね。。


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


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


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


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

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    34
    Vote Rating
    0
    shobuno is on a distinguished road

      0  

    Default


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


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

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

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



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

  5. #5
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
    mashiki is on a distinguished road

      0  

    Default


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

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

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

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

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

  6. #6
    Sencha User
    Join Date
    Jan 2010
    Posts
    5
    Vote Rating
    0
    skies04 is on a distinguished road

      0  

    Default


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

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

    バージョンは、4.0.7です。


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

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

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

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

  7. #7
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
    mashiki is on a distinguished road

      0  

    Default


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

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

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

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

  8. #8
    Sencha User
    Join Date
    Jan 2010
    Posts
    5
    Vote Rating
    0
    skies04 is on a distinguished road

      0  

    Default


    mashiki様

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

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

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

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

  9. #9
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
    mashiki is on a distinguished road

      0  

    Default


    レス遅いですが、別件でバグレポートを行ったところ、

    Also, don't forget to use queryMode: 'local' on your locally loaded combobox.

    と、神に言われた。
    これをこっちでもをやったら、動くようになったみたい。

    http://jsfiddle.net/mashiki/qPjaZ/23/

Thread Participants: 2