最新消息:发现真没时间折腾VPS,最近又换了个空间。呵呵

Dojo带分页的DateGrid在TabContainer里显示问题的解决

用Dojo提供的示例代码,两个以上的DateGrid在TabContainer里显示就会出问题,除第一个正常显示以外,其它的都显示不了分页条。示例代码里,把Grid加到HTML用的是appendChild到DIV里,好像问题就在这里,有些东西DIV显示不对。可以把原来的Div改成dojox.layout.ContentPane,然后用DOJO的placeAt就行。如下代码:

JavaScript
//dojo.byId("ContentDiv1").appendChild(grid1.domNode);
grid1.placeAt(dijit.byId("ContentPane1").containerNode, 'last');
grid1.startup();

测试代码如下:

HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
    src="js/dojo/dojo.js"
    djConfig="parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css"
    href="js/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
    href="js/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css"
    href="js/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" />
<link rel="stylesheet" type="text/css"
    href="js/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css" />
<title>Dojo Test</title>

<script type="text/javascript">
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojox.grid.EnhancedGrid");
    dojo.require("dojox.grid.enhanced.plugins.Pagination");
    dojo.require("dijit.layout.TabContainer");
    dojo.require("dojox.layout.ContentPane");
    dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");

    dojo.ready(function() {
        var data = {
            identifier: 'id',
            items: [{id: '1', test: 'test'}]
        };

        var store = new dojo.data.ItemFileWriteStore({data: data});

        var layout = [[
            {name: 'ID', field: 'id', width: "40px", classes:"textRight"},
            {name: 'Test', field: 'test', width: "100px"},
        ]];

        var grid1 = new dojox.grid.EnhancedGrid({
            id: 'grid1',
            store: store,
            structure: layout,
            selectionMode: 'single',
            plugins: {
                pagination: {
                    gotoButton: true
                }
            }
        }, document.createElement('div'));

        grid1.placeAt(dijit.byId("ContentPane1").containerNode, 'last');
        //dojo.byId("ContentDiv1").appendChild(grid1.domNode);
        grid1.startup();

        var grid2 = new dojox.grid.EnhancedGrid({
            id: 'grid2',
            store: store,
            structure: layout,
            selectionMode: 'single',
            plugins: {
                pagination: {
                    gotoButton: true
                }
            }
        }, document.createElement('div'));

        grid2.placeAt(dijit.byId("ContentPane2").containerNode, 'last');
        // 无法显示
        // dojo.byId("ContentDiv2").appendChild(grid2.domNode);
        grid2.startup();
});
</script>
</head>

<body class="claro">
    <div style="height:346px; width:98%; margin-left: 10px;">
        <div data-dojo-type="dijit.layout.TabContainer" style="height: 100%">
            <div data-dojo-type="dojox.layout.ContentPane" title="Tab1" selected="true">
               <div id="ContentPane1" data-dojo-type="dijit.layout.ContentPane"
                    style="padding: 0; margin: 0; height:150px; width: 98%">
               </div>
               <div id="ContentDiv1" style="height:150px; width: 98%">
               </div>
            </div>

            <div data-dojo-type="dojox.layout.ContentPane" title="Tab2">
               <div id="ContentPane2" data-dojo-type="dijit.layout.ContentPane"
                    style="padding: 0; margin: 0; height:150px; width: 98%">
               </div>
               <div id="ContentDiv2" style="height:150px; width: 98%">
               </div>
            </div>
          </div>
     </div>
</body>

</html>

转载请注明:宇托的狗窝 » Dojo带分页的DateGrid在TabContainer里显示问题的解决

发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址