我是Dojo新手。我正在尝试创建一个具有以下结构的布局,其中我希望在其中一个内容窗格中生成datagrid。但是控制台显示错误:
‘"in domReady callback“"TypeError:未定义不是函数’
有没有人可以看看这个。
<script>dojoConfig = {async: true, parseOnLoad: false}</script><script>
require(['dojo/parser', 'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', 'dijit/layout/AccordionContainer', 'dijit/TitlePane', 'dijit/form/DropDownButton','dojo/_base/lang', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/dom', 'dojo/domReady!'],
function(lang, DataGrid, ItemFileWriteStore, dom){
/*set up data store*/
var data = {
identifier: "id",
items: []
};
var data_list = [
{ col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
{ col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
{ col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
];
var rows = 60;
for(var i = 0, l = data_list.length; i < rows; i++){
data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
}
var store = new ItemFileWriteStore({data: data});
/*set up layout*/
var layout = [[
{'name': 'Column 1', 'field': 'id', 'width': '100px'},
{'name': 'Column 2', 'field': 'col2', 'width': '100px'},
{'name': 'Column 3', 'field': 'col3', 'width': '200px'},
{'name': 'Column 4', 'field': 'col4', 'width': '150px'}
]];
/*create a new grid*/
var grid = new DataGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px'});
/*append the new grid to the div*/
grid.placeAt("gridDiv");
/*Call startup() to render the grid*/
grid.startup();});
<body class="soria">
<div data-dojo-type='dijit/layout/BorderContainer' style="width:100%; height:31px;">
<div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar" title="My Dialog Title">
<span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="dialogOne_title">My Dialog Title</span>
</div>
</div>
<div data-dojo-type='dijit/layout/BorderContainer' style="width:100%; height:60px;" >
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div data-dojo-type="dijit/form/DropDownButton">
<span>Register</span>
<div class="buttonDropDown">
<button data-dojo-type="dijit/form/Button" type="submit">Apply</button>
<button data-dojo-type="dijit/form/Button" type="submit">Cancel</button>
<button data-dojo-type="dijit/form/Button" type="submit">Save & Exit</button>
</div>
</div>
</div>
</div>
<div data-dojo-type="dijit/layout/BorderContainer" style="width:100%;overflow:hidden; height:100%; background-color:#ccc;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'">
<div data-dojo-type="dijit/layout/AccordionContainer" style="width:300px;" class="Accordion">
<div data-dojo-type="dijit/layout/ContentPane" title="Folders">
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="Search Messages">
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="Contacts">
</div>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div data-dojo-type="dijit/layout/BorderContainer" id="rightBorderCon">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter: true, region: 'center'">
<div id="tp1" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Title Pane'" class="titlePane">
<p>Dojo is a JavaScript framework targeting the many needs of large-scale client-side web development. For example, Dojo abstracts the differences among diverse browsers to provide APIs that will work on all of them (it can even run on the server under Node.js); it establishes a framework for defining modules of code and managing their interdependencies; it provides build tools for optimizing JavaScript and CSS, generating documentation, and unit testing; it supports internationalization, localization, and accessibility; and it provides a rich suite of commonly needed utility classes and user-interface widgets.<p>
</div>
<div id="tp2" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Title Pane'" class="titlePane">
<p>Dojo is a JavaScript framework targeting the many needs of large-scale client-side web development. For example, Dojo abstracts the differences among diverse browsers to provide APIs that will work on all of them (it can even run on the server under Node.js); it establishes a framework for defining modules of code and managing their interdependencies; it provides build tools for optimizing JavaScript and CSS, generating documentation, and unit testing; it supports internationalization, localization, and accessibility; and it provides a rich suite of commonly needed utility classes and user-interface widgets.<p>
</div>
<div id="tp3" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Title Pane'" class="titlePane">
<p>Dojo is a JavaScript framework targeting the many needs of large-scale client-side web development. For example, Dojo abstracts the differences among diverse browsers to provide APIs that will work on all of them (it can even run on the server under Node.js); it establishes a framework for defining modules of code and managing their interdependencies; it provides build tools for optimizing JavaScript and CSS, generating documentation, and unit testing; it supports internationalization, localization, and accessibility; and it provides a rich suite of commonly needed utility classes and user-interface widgets.<p>
</div>
<div id="tp4" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Title Pane'" class="titlePane">
<p>Dojo is a JavaScript framework targeting the many needs of large-scale client-side web development. For example, Dojo abstracts the differences among diverse browsers to provide APIs that will work on all of them (it can even run on the server under Node.js); it establishes a framework for defining modules of code and managing their interdependencies; it provides build tools for optimizing JavaScript and CSS, generating documentation, and unit testing; it supports internationalization, localization, and accessibility; and it provides a rich suite of commonly needed utility classes and user-interface widgets.<p>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter: true, region: 'bottom'" style="height:215px">
<div id="gridDiv"></div>
</div>
</div>
</div>
</div>
</body>发布于 2014-12-09 01:33:52
将您的require语句更正为
require(['dojo/_base/lang', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/dom', 'dojo/parser', 'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', 'dijit/layout/AccordionContainer', 'dijit/TitlePane', 'dijit/form/DropDownButton', 'dojo/domReady!'],
function(lang, DataGrid, ItemFileWriteStore, dom){.....概念是第一个导入将分配给第一个参数- 'lang',第二个导入-第二个- 'DataGrid‘,依此类推。
而且您没有在任何地方解析..,所以这段代码不会显示小部件。
https://stackoverflow.com/questions/27361005
复制相似问题