Question

followig代码位于JSP头部的标记脚本中。我想模仿这种行为http://dante.dojotoolkit.org/static/xd/stack-accordion.html。与该样本的主要区别是：

1）我使用e Tree来导航StackContainer中的内容;

2）内容由dojoX.Layout.ContenPane处理因为我想加载我之前写的一些JSP。

dojo.addOnLoad(function(){

var store = new dojo.data.ItemFileReadStore({
    data:{
        identifier: 'id',
        label: 'name',
        items: [
            { id: '01', name:'Metadata', type:'Area',
                children:[
                        {_reference:'001'},
                        {_reference:'002'}
                        ]
            },
            { id: '001', name:'Insert', type:'action', content:'content1' },
            { id: '002', name:'Delete', type:'action', content:'content2' },
        { id: '02', name:'Class', type:'Area',
                children:[
                        {_reference:'003'}
                        ]
            },
        { id: '003', name:'Create', type:'action', content:'content3'}
            ]
        }
});

var treeModel = new dijit.tree.ForestStoreModel({
    store: store,
    query: {"type": "Area"},
    rootId: "root",
    childrenAttrs: ["children"],
    openOnClick: true
});

var ciccio = new dijit.Tree({
    model: treeModel,
    showRoot: false
}, "treeOne");

// make the main container:
var bc = new dijit.layout.BorderContainer({
    style:"width:1152px; height:600px"
}, "main");

// add the two regions:
var accordion = new dijit.layout.AccordionContainer({
    region:"left",
    id:"mainAccordion",
    style:"width:150px"
}, "accordion").placeAt(bc);

var stack = new dijit.layout.StackContainer({
    region:"center"
}, "stack").placeAt(bc);

var accordion1 = new dijit.layout.AccordionPane({
    title: "ciao",
    content: ciccio
}).placeAt(accordion);

[...]

var content3 = new dojox.layout.ContentPane({
    id: "content3",
    adjustPaths:true,
    renderStyles:true,
    executeScripts:true,
    href:"./content3.jsp"
}).placeAt(stack);

dojo.connect(ciccio, "onClick", function(item){
    if(store.getValue(item, "type")!= 'Area')
    {
        var boh = store.getValue(item, "content");
        var prova = dijit.byId(boh);
        stack.selectChild(prova);
    }
    else{
        alert(store.getLabel(item));
    }
});

    bc.startup(); /*end dojo.AddOnLoad*/)};

这里是Ande导入的JSP的完整代码（content3.jsp）

<script type="text/javascript" src="./js/filebox/content3.js"></script>
<div dojoType="dijit.layout.BorderContainer" id="container3"
    style="width:auto; height:750px; border: 1px solid #9f9f9f;">

<div dojoType="dijit.layout.ContentPane" region="top">
    <h2>Ciao!</h2>
    <table>
        <tr>
            <td><label for="filterBox"> Filter: </label></td>
            <td><div dojoType="dijit.form.TextBox"
                    jsId="filterBox"
                    id="filterBox"/>
                </div>
            </td>
        </tr>
    </table>
</div>

<div dojoType="dijit.layout.ContentPane" region="center">
    <table dojoType="dojox.grid.DataGrid"
            structure= "content3GridLayout"
            columnReordering="true"
            noDataMessage="No metadata retrieved"
            errorMessage="Invalid data retrieved format"
            jsId="content3Grid"
            id="content3Grid"
            style="width:auto; height:99%;">
    </table>
</div>

正如您在此JSP顶部所看到的，我导入了一个JS文件这是它：

var content3GridLayout =
    [
       {name : "ID", field : "idMetadataClass", width : "10%"},
       {name : "Name", field : "className", width : "30%"},
       {name : "Description", field : "description", width : "60%"}        
    ];

dojo.xhrPost({
url : "./jsonListGenerator",
content: {action:"classList"},
handleAs : "json",
load : function(responseObject) {
    var content3GridStore = new dojo.data.ItemFileReadStore({data:responseObject});
    content3Grid.setStore(content3GridStore);

    return responseObject;
},
error : function(responseObject) {
    dojoAlert("Filebox admin","Internal server error");
    return responseObject;
}
});

var lastSearchValue = "";
dojo.connect(dijit.byId(filterBox), "onKeyUp", function(el) {
if (el.explicitOriginalTarget.value!=lastSearchValue) {
    lastSearchValue = el.explicitOriginalTarget.value;
    var my_filter = "strToFilter = {className: \"*"+ lastSearchValue + "*\" }";
    eval(my_filter);
    content3Grid.setQuery(strToFilter,{ignoreCase:true});
}
});

除了DOJO.CONNECT之外，Everythings完美无缺事实上firebugs警告说，当dojo.connect尝试连接到de TextBox声明的标记方式时，filterBox是未定义的。

如果出现此问题，则无法显示：

1）TextBox在JS文件中声明为programmaticaly

var filterBox = new dijit.form.Textbox({...});

2）属于filterBox的javascript代码放在dojotype标签

旁边

<div dojoType="dijit.form.TextBox"
                    jsId="filterBox"
                    id="filterBox"/>
                    <script type="dojo/method" event="onKeyUp">
                    if (el.explicitOriginalTarget.value!=lastSearchValue) {
                        lastSearchValue = el.explicitOriginalTarget.value;
                        var my_filter = "strToFilter = {className: \"*"+ lastSearchValue + "*\" }";
                        eval(my_filter);
                        content3Grid.setQuery(strToFilter,{ignoreCase:true});
                    }
                    </script>
                </div>

你知道它发生的原因吗？这是范围问题吗？

提前谢谢！

特雷莎

Answer 1

你应该在dojo.addOnLoad（）调用中将你的代码包装在content3.js中，就像在（2）中的JSP文件中一样。在Dojo的'onload'事件触发之前，您通常不希望运行任何Dojo代码。无法保证dojo.require加载的代码可供您使用，就像跨域（xd）加载器一样。解析器本身在文档加载完成之前不会运行，因此立即执行的Javascript将无法找到窗口小部件。

Answer 2

解析器本身在文档加载完成之前不会运行，因此Javascript立即执行将无法找到小部件

这是问题所在。但即使我将代码包装在dojo.addOnLoad（）中，它也会在content3.JS中对脚本进行评估之后对内容3.JSP进行解析。

差劲...

无论如何，谢谢你的反感，它帮助我理解了这个问题。

dojox.layout.ContentPane

2 个答案: