Dojo两个带有Textbox行的网格

Question

我有两个Dojo增强型网格。第一个网格包含带有“添加”按钮标签的行。

当我点击每行“添加”按钮时，在第二个网格中，应该创建一个TextBox。

例如，如果我点击5'添加'按钮行，在第二个网格中我应该创建5个文本框。

如何实现此功能？

// First Grid

var data1 =  {
        items : <brp:json value="${display1}"/>,
        identifier : "id"
    };
 var store = new dojo.data.ItemFileReadStore({
    data : data1
}); 

    var layout = [ {
        name : 'Column1',
         field : "", formatter: function(item){
        var btn = new dijit.form.Button({label: "ADD"
    });
return btn;
}}
        width : '150px'
    }, ];
    var grid = new dojox.grid.EnhancedGrid({
        id : 'grid',
         query : {
            id : '*'
        }, 
        store : store, 
        clientSort : false,
        rowSelector : '20px',
        height : "380px",   
        structure : layout,
    }, document.createElement('div'));

    dojo.byId("div1").appendChild(grid.domNode);


      // Second Grid; Here it should be TextBox row added
     var data2 =  {
            items : <brp:json value="${display1}"/>,
            identifier : "id"
        };
     var store2 = new dojo.data.ItemFileReadStore({
        data : data2
    });  

    var layout2 = [ {
        name : 'Column1',
        field : 'id',myTextBox = new dijit.form.TextBox({ }}

        width : '150px'
    }];
    var grid2 = new dojox.grid.EnhancedGrid({
         id : 'grid2',
         query : {
         id : '*' 
        }, 
        store : store2,
        clientSort : false,
        rowSelector : '20px',
        plugins: {indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"}},
        height : "380px",   
        structure : layout2,

    }, document.createElement('div'));

    dojo.byId("div2").appendChild(grid2.domNode); 

    grid.startup();
    grid2.startup();