Dojo Grid reload data file upon button click

Question

I know there maybe similar questions out there, but I still cannot find the answer. Much appropriate anyone who can help me.

There are 5 departments, and each department has 4 products. So I created 5 buttons and 4 tabs, each tab contains a grid. By default the department A is loaded, user can switch tabs to see different products information from this department. By click another button B, department B's information will loaded to all 4 tabs.

Click each button will send a ajax request to the back end PHP code, PHP will read XML file do calculation and write data to "data\productA.json", "data\productB.json" , "data\productC.json" , "data\productD.json" files, respect to product A to product D for that specific department. Note that the first tab always read from "data\product A" file, no matter which button you clicked, same for other tabs.

Then the JavaScript will read from the "data\product?.json" file and present data in the grid.

When the page loads, first department's information is correctly loaded into the grid. However, if I change to another department (click button), the grid won't reload data from the json files.

Here is JS part:

dojo.addOnLoad(function() {
    //init the first main column when load the page.
    getDepartmentA();
    var layout = [[
        new dojox.grid.cells.RowIndex({ width: 5 }),
        {name: 'Name', field: 'name'},
        {name: 'Count', field: 'count'},
        {name: 'Percent', field: 'percent'}
    ]];
    var store = new dojo.data.ItemFileReadStore( { url: "data/productA.json" } );
    var grid = new dojox.grid.DataGrid( { store: store, rowsPerPage: 200, style: "height:600px; width:874px;", structure: layout}, 
                                            dojo.byId("grid1"));
    grid.startup();
    dojo.connect( dijit.byId("column3"),"onShow", dojo.partial( createGrid, "3")  );
    dojo.connect( dijit.byId("column4"),"onShow", dojo.partial( createGrid, "4")  );
    dojo.connect( dijit.byId("column5"),"onShow", dojo.partial( createGrid, "5")  );
});

function getDepartmentA() {
    dojo.xhrGet( {      
        url: "department_A_process.php",
        handleAs: "json",
        load: function(response) {
            var tempgrid = grids[0];
            var tempresponse = eval("("+response+")");
            var tempstore = new dojo.data.ItemFileReadStore({url: "data/productA.json" }); //updated store!
            var tempModel = new dojox.grid.data.DojoData(null, tempstore, {query:{productName:'*'}, clientSort: true});
            tempgrid.setaModel(tempModel);
            tempgrid.refresh();
            console.dir(response);  // Dump it to the console
        }   
     });
}

function createGrid( id ) {
    console.log("Calling createGrid function now!");
    var layout = [[
        new dojox.grid.cells.RowIndex({ width: 5 }),
        {name: 'Name', field: 'name'},
        {name: 'Count', field: 'count'},
        {name: 'Percent', field: 'percent'}
    ]]; 
    if (! grids[id] ) {
        if (id =="1"){
            var store = new dojo.data.ItemFileReadStore( { url: "data/productA.json" } );
            console.log( "I am in tab1");               
        } else if (id =="3"){
            var store = new dojo.data.ItemFileReadStore( { url: "data/productB.json" } );
            console.log( "I am in tab3");
        } else if (id =="4"){
            var store = new dojo.data.ItemFileReadStore( { url: "data/productC.json" } );
            console.log( "I am in tab4");           
        } else if (id =="5"){
            var store = new dojo.data.ItemFileReadStore( { url: "data/productD.json" } );
            console.log( "I am in tab5");

        }
        var grid = new dojox.grid.DataGrid( { store: store, rowsPerPage: 200, style: "height:600px; width:874px;", structure: layout}, 
                                                dojo.byId("grid" + id ));
        grid.startup();
        grids[id] = grid;
        console.log( grid );
    }
}

My index page is like:

<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" doLayout="false">
    <div id="column1" dojoType="dijit.layout.ContentPane" title="Label by Brand" selected="true">
        <h1>Label by Brand</h1>
        <div class="partsContainer">
            <div id="grid1" class="gridContainer">
            </div>
        </div>
    </div>

    <div id="column3" dojoType="dijit.layout.ContentPane" title="Session Types">
        <h1>Session Types</h1>
        <div class="partsContainer">
            <div id="grid3" class="gridContainer">
            </div>
        </div>
    </div>

    <div id="column4" dojoType="dijit.layout.ContentPane" title="Labels by Session">
        <h1>Labels by Session</h1>
        <div class="partsContainer">
            <div id="grid4" class="gridContainer">
            </div>
        </div>
    </div>

    <div id="column5" dojoType="dijit.layout.ContentPane" title="Monthly Report">
        <h1>Monthly Report</h1>
        <div class="partsContainer">
            <div id="grid5" class="gridContainer">
            </div>
        </div>
    </div>
</div>

The JSON file looks like:

{
    identifier: "productName", 
    label: "productName",
    items:  [                            
                { "productName" : "p1", "count" : 3362, "percent" : "32.8" },
                { "productName" : "p2", "count" : 421, "percent" : "4.1" },
                { "productName" : "p3", "count" : 526, "percent" : "5.1" },
                { "productName" : "p4", "count" : 1369, "percent" : "13.4" },
                ...
                { "productName" : "Total", "count" : 10242, "percent" : "100" }
            ]
}

Anyone can help out, how to reload the file that generated by PHP to the grid? Thank you.