dojox.layout.ContentPane

下面的代码位于JSP头部的标记脚本中。 我想模仿这种行为。与该样本的主要区别在于：

1我使用e树导航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>

除了DOJO.CONNECT之外，其他一切都很完美 事实上，firebugs警告说，当dojo.connect试图连接到de TextBox声明的标记方式时，filterBox未定义

此问题不显示以下情况：

1文本框在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>

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

提前谢谢你

---

Teresa

您应该在dojo.addOnLoad调用中将代码包装在content3.js中，就像您在2.0中的JSP文件中那样。在触发Dojo的“onload”事件之前，通常不希望运行任何Dojo代码。不能保证dojo.require加载的代码对您可用，跨域xd加载程序就是这样。解析器本身在文档加载完成之前不会运行，因此立即执行的Javascript将无法找到小部件

---

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

这就是问题所在。但是，即使我将代码包装在dojo.addOnLoad中，也会发现content3.JSP的解析是在content3.JS中的脚本求值之后进行的

该死的

---

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

解析器本身在文档加载完成之前不会运行，因此立即执行的Javascript将无法找到小部件。这就是问题所在。但是，即使我将代码包装在dojo.addOnLoad中，也会发现content3.JSP的解析是在content3.JS中的脚本求值之后进行的。。。无论如何，谢谢你的answare，它帮助我理解了这个问题。

<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>