Следующий код находится внутри скрипта тега в заголовке 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*/)};
И вот полный код импортированного 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
Infact firebugs предупреждает, что filterBox не определено, когда dojo.connect пытается подключиться к объявленному de TextBox способу разметки.
Эта проблема не отображается, если:
1) Текстовое поле объявлено программно в файле JS
var filterBox = new dijit.form.Textbox({...});
2) код javascript, принадлежащий filterBox, помещается рядом с тегом 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>
Вы знаете причину, почему это происходит?
Это проблема объема?
Заранее спасибо!
Тереза