dojo에서 select가있는 격자

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에서 옵션을 선택하면 변경되지 않습니다.

여기서 문제는 내가 그리드를 추가하는 방법이고 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의 부모 노드에 연결 한 다음 해당 노드를 지정하는 DataGrid를 만듭니다. 대체 할 DOM 노드로 target-node-id를 사용하십시오. select onChange 이벤트 핸들러에서

2) 2) 새 DataGrid를 만들 필요가 없습니다. 방금 ​​업데이트해야합니다 - 데이터 그리드가 자동으로 업데이트됩니다 (즉, 도장과 같은 툴킷을 사용하면 얻을 수있는 이점) 에 따라 다르지만 동일한 저장소를 재사용하여 데이터를 변경할 수도 있습니다. 저장하는 경우 itemfilereadstore) 새 데이터로 표를 다시 채우는 방법에 대한 예제는 Dojo - How to refresh combobox with updated ItemFileReadStore data을 참조하십시오.