我是 Dojo 的新手，我只是创建了一个带有选项卡容器的布局index.php和一个选项卡调用list.php：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Progammatic Layout</title>
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="js/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" href="js/dojox/grid/resources/claroGrid.css" media="screen">
</head>
<body class="claro">
<div id="appLayout" class="demoLayout"></div>
<!-- load dojo and provide config via data attribute -->
<script src="js/dojo/dojo.js"></script>
<script>
require(["dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"dijit/layout/AccordionContainer",
"dijit/layout/AccordionPane",
"dojox/grid/DataGrid",
"dojox/grid/cells",
"dojo/ready",
],
function(BorderContainer, TabContainer,ContentPane, AccordionContainer, AccordionPane, DataGrid, gridCells, ready){
ready(function(){
// create the BorderContainer and attach it to our appLayout div
var appLayout = new BorderContainer({
design: "headline"
}, "appLayout");
// create the TabContainer
var contentTabs = new TabContainer({
region: "center",
id: "contentTabs",
tabPosition: "bottom",
"class": "centerPanel"
});
// add the TabContainer as a child of the BorderContainer
appLayout.addChild( contentTabs );
// create and add the BorderContainer edge regions
var header= new ContentPane({
region: "top",
"class": "edgePanel",
content: "Header content (top)",
splitter: true
});
/* Menú */
var contentMenu = new ContentPane({
region: "left",
id: "leftCol",
"class": "edgePanel",
content: "",
padding:0,
splitter: true
});
var aContainer=new AccordionContainer({style:"height: 300px"}, "markup");
aContainer.addChild(new ContentPane({
title: "Contact",
content: "Hi!"
}));
aContainer.addChild(new ContentPane({
title:"Work",
content:"Hi how are you?"
}));
contentMenu.addChild(aContainer);
**var tabs=new ContentPane({
href: "list.php",
title: "Lista"
});**
contentTabs.addChild(tabs);
appLayout.addChild(header);
appLayout.addChild(contentMenu);
appLayout.addChild(contentTabs);
//aContainer.startup();
/*contentAcordion= new AccordionContainer({
min-size:20,
region:'leading,
splitter:true,
id:'leftAccordion'
});*/
// start up and do layout
appLayout.startup();
var cells = [
[
new gridCells.RowIndex({ width: "10%" }),
{ name: "Column 1", field: "col1", width: "30%" },
{ name: "Column 2", field: "col2", width: "30%" },
{ name: "Column 3", field: "col3", width: "30%" }
]
];
gridLayout = [{
type: "dojox.grid._CheckBoxSelector"
},
cells
];
var data = [
{ id: 0, col1: "normal", col2: false, col3: "new", col4: "But are not followed by two hexadecimal"},
{ id: 1, col1: "important", col2: false, col3: "new", col4: "Because a % sign always indicates"},
{ id: 2, col1: "important", col2: false, col3: "read", col4: "Signs can be selectively"},
{ id: 3, col1: "note", col2: false, col3: "read", col4: "However the reserved characters"},
{ id: 4, col1: "normal", col2: false, col3: "replied", col4: "It is therefore necessary"},
{ id: 5, col1: "important", col2: false, col3: "replied", col4: "To problems of corruption by"},
{ id: 6, col1: "note", col2: false, col3: "replied", col4: "Which would simply be awkward in"}
];
var grid = new DataGrid({
//store: test_store,
structure: cells,
rowSelector: "20px",
"class": "grid"
}, "grid");
grid.startup();
});
});
</script>
</body>
</html>
它工作成功，并加载一个list.php。
在 list.php 我有一个创建网格的代码，如果我单独执行它可以工作并成功显示网格：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Progammatic Layout</title>
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="js/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" href="js/dojox/grid/resources/claroGrid.css" media="screen">
</head>
<body class="claro">
<div id="grid" class="demoLayout"></div>
<!-- load dojo and provide config via data attribute -->
<script src="js/dojo/dojo.js"></script>
<script>
require([
"dojox/grid/DataGrid",
"dojox/grid/cells",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/_base/array",
"dojo/_base/lang",
"dojox/grid/_CheckBoxSelector",
"dojo/domReady!"
], function(DataGrid, gridCells, Memory, ObjectStore, baseArray, lang, _CheckBoxSelector){
var cells = [
[
new gridCells.RowIndex({ width: "10%" }),
{ name: "Column 1", field: "col1", width: "30%" },
{ name: "Column 2", field: "col2", width: "30%" },
{ name: "Column 3", field: "col3", width: "30%" }
],[
{ name: "Column 4", field: "col4", colSpan: 4 }
]
];
gridLayout = [{
// First, our view using the _CheckBoxSelector custom type
type: "dojox.grid._CheckBoxSelector"
},
cells
];
var data = [
{ id: 0, col1: "normal", col2: false, col3: "new", col4: "But are not followed by two hexadecimal"},
{ id: 1, col1: "important", col2: false, col3: "new", col4: "Because a % sign always indicates"},
{ id: 2, col1: "important", col2: false, col3: "read", col4: "Signs can be selectively"},
{ id: 3, col1: "note", col2: false, col3: "read", col4: "However the reserved characters"},
{ id: 4, col1: "normal", col2: false, col3: "replied", col4: "It is therefore necessary"},
{ id: 5, col1: "important", col2: false, col3: "replied", col4: "To problems of corruption by"},
{ id: 6, col1: "note", col2: false, col3: "replied", col4: "Which would simply be awkward in"}
];
var objectStore = new Memory({data:data});
var test_store = new ObjectStore({objectStore: objectStore});
// create the grids.
var grid = new DataGrid({
store: test_store,
structure: cells,
rowSelector: "20px",
"class": "grid"
}, "grid");
grid.startup();
});
</script>
</body>
</html>
但是如果我调用 index.php 网格不显示，我该怎么做呢？为什么是原因，没有没有javascript执行？