我昨天开始学习Dojo，请原谅我的无知......
我的期望是动态创建一个手风琴并在手风琴的内容窗格中显示一个网格。为此，我创建了带有2个内容窗格的手风琴小部件，当内容窗格处于onShow处理时，我创建了一个自定义小部件并添加到内容窗格（这是必需的，即我无法直接添加数据网格）。一旦创建了自定义网格，它就会创建一个计时器，并且在计时器结束后，我会填充网格并显示它。
现在，如果你在浏览器中运行它（当然在正确的路径中使用dojo），你会注意到大约8秒后超时，手风琴窗格显示网格（以笨拙的方式，我仍然需要计算为什么，任何帮助都会很棒）。但那时：
如果我在刷新后立即（在8秒内）打开第二个窗格并保持第一个窗格关闭，直到8秒后再打开第一个窗格，似乎没有任何内容。 Dojo专家可以帮助我理解为什么吗？谢谢！
<html>
<head>
<style type="text/css">
@import "dojo/dijit/themes/tundra/tundra.css";
@import "dojo/dijit/themes/tundra/layout/AccordionContainer.css";
@import "dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
</head>
<script>
/*
The source is organized like this:
head;
script;
timer proc;
grid widget;
constructor, postCreate, onElapse method where the grid is populated.
Accordion widget:
construct, postCreate panes are created and added.
*/
// Mock backend
var timerThis = undefined;
function onElapse()
{
timerThis.onElapse();
}
// Grid Widget declaration.
dojo.provide("widgets.GridWidget");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
// Grid widget class.
dojo.declare("widgets.GridWidget", [ dijit._Widget, dijit._Templated ], {
// Members
templateString : '<div id="${id}" dojoAttachPoint="widgets_GridWidget"></div>',
srcNodeRef : null,
grid : null,
timer : null,
// Constructor
constructor : function(params, srcNodeRef)
{
this.inherited(arguments);
this.id = "myUniqueId";
this.srcNodeRef = srcNodeRef;
// Copy this so timer onElapse() can access.
timerThis = this;
this.timer = setTimeout("onElapse()", 8000);
},
// Member invoked from global onElapse.
onElapse : function()
{
var layout =
[
{ name: 'Name', field: 'name', width: 'auto' },
{ name: 'Color', field: 'color', width: 'auto' }
];
var store =
{
data :
{
items :
[
{ name : 'John Doe', color: 'green' },
{ name : 'Jane Doe', color: 'red' }
]
}
};
// Create a grid and startup.
this.grid = new dojox.grid.DataGrid({
store: new dojo.data.ItemFileReadStore(store),
clientSort: true,
rowSelector: '20px',
structure: layout
}, this.srcNodeRef);
this.widgets_GridWidget.appendChild(this.grid.domNode);
this.grid.startup();
}
});
// Create an accordion container that will display the grid in one of its pane.
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");
dojo.declare("widgets.AccordionWidget", [ dijit._Widget, dijit._Templated ],
{
templateString : '<div id="AccordionWidget" dojoAttachPoint="widgets_AccordionWidget"></div>',
srcNodeRef : null,
constructor : function(params, srcNodeRef)
{
this.inherited(arguments);
this.srcNodeRef = srcNodeRef;
},
postCreate : function()
{
this.inherited(arguments);
var container = new dijit.layout.AccordionContainer({
style : "height: 100px"
},
this.widgets_AccordionWidget.id + "_Container");
var panes =
[
new dijit.layout.ContentPane({
title: "First pane"
}),
new dijit.layout.ContentPane({
title: "Second pane"
})
];
container.addChild(panes[0]);
container.addChild(panes[1]);
this.widgets_AccordionWidget.appendChild(container.domNode);
// Scope closure
{
var pane = panes[0];
// var pane = panes[1];
var wdg = undefined;
pane.set("onShow",
function()
{
if (wdg === undefined)
{
wdg = new widgets.GridWidget({}, pane.id + "_1");
wdg.placeAt(pane.domNode);
}
}
);
}
this.widgets_AccordionWidget.appendChild(container.domNode);
container.startup();
}
});
dojo.addOnLoad(function()
{
dojo.require('dojo.parser');
});
dojo.ready(function()
{
dojo.parser.parse();
var wdg = new widgets.AccordionWidget({}, dojo.byId("root"));
});
</script>
<body class="tundra">
<div id="root"></div>
</body>
</html>
答案 0 :(得分：1)
请尝试此复制粘贴代码.. 我在展示手风琴窗格时将网格展开。我无法实现的一件事是我无法根据网格高度调整窗格大小。
请告诉我这是否有用。 感谢
<html>
<head>
<style type="text/css">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";
</style>
<script src="djlib/dojo/dojo.js" type="text/javascript" djConfig="parseOnLoad:true"></script>
<link rel="stylesheet" href="djlib/dojox/grid/resources/Grid.css" type="text/css" />
<body class="claro">
<div id="root" ></div>
<div id="test"></div>
</body>
<script>
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.AccordionPane");
dojo.require('dijit.layout.ContentPane');
dojo.declare("widgets.Ackordian", [ dijit.layout.AccordionContainer ], {
style:'height:300px',
id:'Ackordian1',
postCreate:function(){
this.inherited(arguments);
this.startup();
this.addChild(
new dijit.layout.AccordionPane({
//content : "<p>HI There2</p>",
style:'height:100px',
title:'H!',
widgetsInTemplate:true
})
)
this.addChild(
new dijit.layout.AccordionPane({
style:'height:100px',
//content : "<p>HI There2</p>",
title:'HI2'
})
)
dojo.forEach(this.getChildren(),function(pane,indx){
dojo.mixin(pane,{
onShow:function(){
if(!pane.grid){
pane.grid = getGrid();
pane.setContent(pane.grid.domNode);
}
}
})
})
}
});
dojo.addOnLoad(function(){
new widgets.Ackordian({}).placeAt('root');
})
function getGrid(layout,str){
var layout =
[
{ name: 'Name', field: 'name', width: 'auto' },
{ name: 'Color', field: 'color', width: 'auto' }
];
var str =
{
data :
{
items :
[
{ name : 'John Doe', color: 'green' },
{ name : 'Jane Doe', color: 'red' }
],
identifier:'color',
label:'name'
}
};
return new dojox.grid.DataGrid({
style:'height:100px',
store: new dojo.data.ItemFileReadStore(str),
clientSort: true,
rowSelector: '20px',
structure: layout
})
}
</script>
</html>