Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <title>dojox.Grid with Dojo.Data via binding</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
        <style type="text/css">
                @import "../_grid/tundraGrid.css";
                @import "../../../dojo/resources/dojo.css";
                @import "../../../dijit/themes/tundra/tundra.css";
                @import "../../../dijit/tests/css/dijitTests.css";
                
                #grid, #grid2, #grid3 {
                        width: 65em;
                        height: 25em;
                        padding: 1px;
                }
        </style>
        <script type="text/javascript" src="../../../dojo/dojo.js" 
                djConfig="isDebug: true, debugAtAllCosts: false, parseOnLoad: true"></script>
        <script type="text/javascript">
                dojo.require("dojox.grid.Grid");
                dojo.require("dojox.grid._data.editors");
                dojo.require("dojox.grid._data.model");
                dojo.require("dojox.data.CsvStore");
                dojo.require("dojo.data.ItemFileWriteStore");
                dojo.require("dojo.parser");
        </script>
        <script type="text/javascript">
                function getRow(inRowIndex){
                        return ' ' + inRowIndex;
                }

                var iEditor = dojox.grid.editors.Input;
                var layoutMovies = [
                        // view 0
                        { type: 'dojox.GridRowView', width: '20px' },
                        // view 1
                        { cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
                        // view 2
                        { cells: [[
                                { field: "Title", editor: iEditor, width: 'auto' },
                                { field: "Year",  editor: iEditor, width: 5 },
                                { field: "Producer", editor: iEditor, width: 20 }
                        ]]}
                ];

                var layoutCountries = [
                        // view 0
                        { type: 'dojox.GridRowView', width: '20px' },
                        // view 1
                        { cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
                        // view 2
                        { cells: [[
                                { field: "name", name: "Name", width: 'auto' },
                                { field: "type", name: "Type", editor: iEditor, width: 'auto' },
                        ]]}
                ];
        </script>
</head>
<body class="tundra">
        <h1>dojox.Grid using Dojo.Data stores via simple binding</h1>
        <!--
        <br>
        <span dojoType="dojox.data.CsvStore" 
                jsId="csvStore" url="support/movies.csv">
        </span>
        <span dojoType="dojox.grid.data.DojoData" 
                jsId="dataModel"
                store="csvStore"
                rowsPerPage="5"
                query="{ Title: '*' }"
                clientSort="true">
        </span>
        <div id="grid" dojoType="dojox.Grid" elasticView="2" 
                model="dataModel" structure="layoutMovies">
        </div>
        -->
        <br>
        <h3>Update some of the types</h3>
        <button onclick="updateCountryTypes();">Go!</button>
        <script>
                function updateCountryTypes(){
                        // get everything starting with "A"
                        jsonStore.fetch({
                                query: { name: "A*" },
                                onComplete: function(items, result){
                                        // change 'em!
                                        dojo.forEach(items, function(item){
                                                jsonStore.setValue(item, "type", "thinger");
                                                // console.debug(item);
                                        });
                                }
                        });
                }
        </script>

        <span dojoType="dojo.data.ItemFileWriteStore" 
                jsId="jsonStore" url="../../../dijit/tests/_data/countries.json">
        </span>
        <span dojoType="dojox.grid.data.DojoData" 
                jsId="dataModel2" 
                rowsPerPage="20"
                store="jsonStore" 
                clientSort="true"
                query="{ name : '*' }">
        </span>
        <div id="grid2" dojoType="dojox.Grid" elasticView="2" 
                model="dataModel2" structure="layoutCountries">
        </div>

        <div id="grid3" dojoType="dojox.Grid" elasticView="2" 
                model="dataModel2" structure="layoutCountries">
        </div>
</body>
</html>