dojoで選択したグリッド

Question

dojoで動的グリッドを作成しようとしています。基本的には、選択フォームとグリッドがあり、選択オプションを選択すると、グリッドに別のデータセットをロードする必要があります。

コード：

contentPane = new ContentPane({ 
     title: "Group 1", 
    }); 

//Create grid 
function genGrid(dataframe){ 
    alert(dataframe); 
    myStore = Cache(JsonRest({target:"/data/"+dataframe}), Memory()); 
    return grid = new DataGrid({ 
     store: dataStore = ObjectStore({objectStore: myStore}), 
     structure:[{"field": "division", "name": "division", "width": "200px"}, {"field": "country", "name": "country", "width": "200px"}, {"field": "sales", "name": "sales", "width": "200px"}, {"field": "cost", "name": "cost", "width": "200px"}]}, 
    "target-node-id").placeAt(contentPane.containerNode);}; 

sel = new Select({ 
     name: 'select2', 
     onChange: function(select){alert(select); 
                               genGrid(select)}, 
     options: [ 
      { label: 'TN', value: 'Tennessee' }, 
      { label: 'VA', value: 'Virginia', selected: true }, 
      { label: 'WA', value: 'Washington' }, 
      { label: 'FL', value: 'Florida' }, 
      { label: 'CA', value: 'csvtable' }] 
       }).placeAt(contentPane.containerNode); 


contentTabs.addChild(contentPane); 

しかし、このコードは動作しません。 sel onChange属性の外でgenGrid（dataframe）を呼び出すと、グリッドが表示されますが、selectでオプションを選択しても変更されません。

グリッドとselectをcontentpaneに追加する方法が問題だと思われますが、これを行うためのより良い方法はありませんでした。

Answer 1

1）dojoウィジェットは、ウィジェットのプレースホルダーとしてDOMノードを必要とします。あなたの "target-node-id"はそのidを持つ実際のDOM要素ですか？そうでない場合は、グリッドはうまくレンダリングされません。 グリッドにデータを入力するときにplaceAtを呼び出す必要はありません。dojoはID target-node-idを持つDOM要素をDataGridに置き換えます。 プログラムですべて実行している場合は、ID target-node-idを使用してdocument.createElement（ 'div'）を実行することをお勧めします。たとえば、 htmlの親ノードにアタッチしてから、置換対象のDOMノードとしてtarget-node-idを指定します。

2）select onChangeイベントハンドラでは、新しいDataGridを作成する必要はありません。 ちょうどストアを更新するだけです - データグリッドは自動的に更新されます（dojoなどのツールキットを使用するメリット） あなたの用途に応じて、同じストアを再利用してデータを変更することもできます （clearoncloseを新しいデータでグリッドを再投入する方法の例は、Dojo - How to refresh combobox with updated ItemFileReadStore dataを参照してください。