在道场中选择网格

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) ，则会出现网格，但是当我在选择中选择选项时它不会改变。

我怀疑这里的问题是我如何将网格和选择附加到内容窗格，但我找不到更好的方法来做到这一点。

Answer 1

1) dojo 小部件需要一个 DOM 节点作为小部件的占位符。您的“target-node-id”是具有该 id 的实际 DOM 元素吗？如果没有，网格将无法很好地渲染 填充网格时不需要任何 placeAt 调用 - dojo 将使用数据网格替换 ID 为 target-node-id 的 DOM 元素。 如果您以编程方式完成所有操作，我建议使用 id target-node-id 执行 document.createElement ('div')，例如， 将其附加到 html 中的父节点，然后创建数据网格，指定 target-node-id 作为要替换的 DOM 节点

2) 在 select onChange 事件处理程序中，您不需要创建新的数据网格。 您只需要更新商店 - 数据网格会自动更新（这是使用像 dojo 这样的工具包的好处） 根据您的用例，您甚至可以重用同一个商店并只更改其中的数据 （如果是 itemfilereadstore，则在 store 上设置 clearonclose） 有关如何使用新数据重新填充网格的示例，请参阅 Dojo - How to refresh combobox with updated ItemFileReadStore data