在JSP頁面中加載dojo的不同內容窗格

我有一個JSP頁面。因爲我有不同的內容窗格（使用Dojo框架）。現在，要在頁面加載時顯示特定的內容窗格，我在其中一個內容窗格（添加新活動）上設置了「selected = true」屬性true。現在我有另一個內容窗格使用dojox.grid.DataGrid顯示數據（未完成的活動）。但隨着頁面加載我得到我的添加新活動窗格絕對好。但只要我切換到另一個窗格（待定活動），我得到一個網格，但沒有數據裏面。當我爲待定活動窗格設置「selected = true」屬性時，我會在網格內正確顯示我的數據。我認爲問題在於我的頁面只加載一次。如何解決？謝謝..在JSP頁面中加載dojo的不同內容窗格

我的jsp頁面代碼::

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 
<%@ page import="MyPackage.PopulateTextbox" %> 
<%@page import="MyPackage.TextboxAutocomplete" %> 
<%@ page import="java.sql.*" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>DojoContentPanes</title> 
<style type="text/css"> 
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/resources/dojo.css"; 
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/nihilo/nihilo.css"; 
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/resources/Grid.css"; 
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/resources/nihiloGrid.css"; 

</style> 


<link rel="stylesheet" type="text/css" href="http://localhost:8080/2_8_2012/js/dijit/themes/soria/soria.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true"></script> 
<script type="text/javascript"> 
dojo.require('dijit.form.TextBox'); 
dojo.require('dijit.Tooltip'); 
dojo.require('dijit.form.DateTextBox'); 
dojo.require('dijit.form.TimeTextBox'); 
dojo.require("dojox.grid.DataGrid"); 
dojo.require("dojo.data.ItemFileReadStore"); 
dojo.require("dojo.data.ItemFileWriteStore"); 
dojo.require("dijit.Dialog"); 
dojo.require('dijit.layout.TabContainer'); 
dojo.require('dijit.layout.ContentPane'); 
dojo.require('dijit.form.Button'); 
dojo.require('dijit.form.NumberSpinner'); 
dojo.require('dijit.form.Textarea'); 

</script> 
</head> 
<% 
    TextboxAutocomplete obj1 = new TextboxAutocomplete(); 
    String arlene1 = obj1.method(); 
    request.setAttribute("variable1", arlene1); 
%> 

<% 
String temp1; 
PopulateTextbox obj = new PopulateTextbox(); 
temp1 = obj.method(); 
request.setAttribute("variable", temp1); 
%> 

<script type="text/javascript"> 
dojo.ready(function(){ 
var myVar = <%= request.getAttribute("variable") %> 
var storedata={ 
      identifier:"ID", 
      label:"name", 
      items: myVar 
    }; 

var store = new dojo.data.ItemFileWriteStore({data: storedata}); 

    var gridStructure =[[ 

         { field: "ID", 
          name: "ID_Emp", 
          width: "60%", 
          classes:"firstname" 
         }, 
         { 
          field: "Names", 
          name: "Name", 
          width: "60%", 
          classes: "firstname" 
         } 

       ] 
      ]; 


    var grid = new dojox.grid.DataGrid({ 
      id: 'grid', 
      store: store, 
      structure: gridStructure, 
      rowSelector: '30px', 
      selectionMode: "single", 
      autoHeight:true}, 
      document.createElement('div')); 

     /*append the new grid to the div*/ 
     dojo.byId("gridDiv").appendChild(grid.domNode); 

     /*Call startup() to render the grid*/ 
     grid.startup(); 

    // assuming our grid is stored in a variable called "myGrid": 
     dojo.connect(grid, "onSelectionChanged", grid, function(){ 
      var items = this.selection.getSelected(); 

     // do something with the selected items 
      dojo.forEach(items, function(item){ 
       var v = this.store.getValue(item, "Names"); 

       function showDialog() { 
        dijit.byId("terms").show(); 
       } 
       showDialog(); 
       }, this); 

     }); 
}); 
</script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    var myVar1 = <%=request.getAttribute("variable1") %> 
     //var foo = (function(){ 

      //[]; 
      //arlene1 = obj.method(); 
     //}); 
     //foo(); 
     //arlene1 = ["Shaan","kapil","abhinav"]; 
    $("input#assignedbyid").autocomplete({ 
    source: myVar1 
}); 
    }); 
    </script> 

<body class="nihilo" style="background-image: url('http://localhost:8080/2_8_2012/images/14.jpg'); background-repeat: no-repeat;"> 

<div style="width:1000px;height:600px;"> 

    <!-- will host all tabs and their content panes --> 
    <div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width:1000px;height:100%;"> 

    <!-- content panes: title is tab name, make this tab selected --> 
    <div dojoType="dijit.layout.ContentPane" title="Add New Activity" preload="true" selected="true">  

<div style="width:1200px;height:600px;background-image: url('http://localhost:8080/2_8_2012/images/18.png');width:1200px;height:600px;"> 
<center><div style="border-color:black; width: 1000px; height: 500px;position:relative; top: 50px;left:20px;bottom:20px;right: 20px;background-image: url('http://localhost:8080/2_8_2012/images/17.png');"> 
<br><br><center><strong>ADD AN ACTIVITY :: </strong></center> 
<table> 
<tr style="height: 50px"> 
<td style="width: 150px"><b>ASSIGNED BY : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="assignedbyid" > 
<span dojoType="dijit.Tooltip" connectId="assignedbyid">Enter Name</span></td> 
<td style="width: 150px" ><b>ASSIGNED TO : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="assignedtoid"> 
<span dojoType="dijit.Tooltip" connectId="assignedtoid">Enter Name</span></td></tr> 

<tr style="height: 50px"> 
<td style="width: 150px"><b>ACTIVITY ID : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="activityidid"> 
<span dojoType="dijit.Tooltip" connectId="activityidid">Enter ID</span></td> 
<td style="width: 150px"><b>ENVIRONMENT : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="envnameid"> 
<span dojoType="dijit.Tooltip" connectId="envnameid">Enter Name</span></td></tr> 

<tr style="height: 50px"> 
<td style="width: 150px"><b>ENVIRONMENT ID : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="envidid"> 
<span dojoType="dijit.Tooltip" connectId="envidid">Enter ID</span></td> 
<td style="width: 150px"><b>STATUS : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="statusid"> 
<span dojoType="dijit.Tooltip" connectId="statusid">Enter Status</span></td></tr> 

<tr style="height: 50px"> 
<td style="width: 150px"><b>ACTIVITY TYPE : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="activitytypeid"> 
<span dojoType="dijit.Tooltip" connectId="activitytypeid">Enter Type</span></td> 
<td style="width: 150px"><b>ASSIGNED DATE : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.DateTextBox" id="assigneddateid"> 
<span dojoType="dijit.Tooltip" connectId="assigneddateid">Enter date</span></td></tr> 


<tr style="height: 50px"> 
<td style="width: 150px"><b>ASSIGNED TIME : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TimeTextBox" id="assignedtimeid"> 
<span dojoType="dijit.Tooltip" connectId="assignedtimeid">Enter time</span></td> 
<td style="width: 150px"><b>SCHEDULED DATE : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.DateTextBox" id="scheduleddateid"> 
<span dojoType="dijit.Tooltip" connectId="scheduleddateid">Enter Date</span></td></tr> 


<tr style="height: 50px"> 
<td style="width: 150px"><b>SCHEDULED TIME : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TimeTextBox" id="scheduledtimeid"> 
<span dojoType="dijit.Tooltip" connectId="scheduledtimeid">Enter Time</span></td> 
<td style="width: 150px"><b>PERCENT COMPLETE : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.NumberSpinner" id="percentcompleteid"> 
<span dojoType="dijit.Tooltip" connectId="percentcompleteid">Enter Percentage</span></td></tr> 


<tr style="height: 50px"> 
<td style="width: 150px"><b>DESCRIPTION : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="descriptionid"> 
<span dojoType="dijit.Tooltip" connectId="descriptionid">Description</span></td> 
<td style="width: 150px"><b>COMMENTS : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="commentsid"> 
<span dojoType="dijit.Tooltip" connectId="commentsid">Enter Comments</span></td></tr> 
</table> 

<button id="submitbutton" type="submit" dojoType="dijit.form.Button" style="height: 50px; width: 100px;"></button> 
</div> 
</center> 
</div>  
</div> 

    <!-- content panes: title is tab name, no special features here --> 


<div dojoType="dijit.layout.ContentPane" title="Pending Activities" style="background-image: url('http://localhost:8080/2_8_2012/images/17.png');" preload="true"> 
<center><p><strong>LIST OF PENDING ACTIVITIES</strong></p></center> 

<center><div id="gridDiv" dojoType="dojox.grid.DataGrid" title="Simple Grid" style="width:900px; height:200px;" preload="true"> 
</div></center> 
<div class="dijitHidden"> 
    <div id="terms" data-dojo-type="dijit.Dialog" style="width:900px; height: 500px;overflow: scroll; background: gray;" data-dojo-props="title:'Control Activities'" preload="true"> 
     <center><p><strong>EDIT AN ACTIVITY :: </strong></p></center> 
     <center><table> 
<tr style="height: 50px"> 
<td style="width: 150px"><b>ASSIGNED BY : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="assignedbyid" > 
<span dojoType="dijit.Tooltip" connectId="assignedbyid">Enter Name</span></td> 
<td style="width: 150px" ><b>ASSIGNED TO : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="assignedtoid"> 
<span dojoType="dijit.Tooltip" connectId="assignedtoid">Enter Name</span></td></tr> 

<tr style="height: 50px"> 
<td style="width: 150px"><b>ACTIVITY ID : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="activityidid"> 
<span dojoType="dijit.Tooltip" connectId="activityidid">Enter ID</span></td> 
<td style="width: 150px"><b>ENVIRONMENT : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="envnameid"> 
<span dojoType="dijit.Tooltip" connectId="envnameid">Enter Name</span></td></tr> 

<tr style="height: 50px"> 
<td style="width: 150px"><b>ENVIRONMENT ID : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="envidid"> 
<span dojoType="dijit.Tooltip" connectId="envidid">Enter ID</span></td> 
<td style="width: 150px"><b>STATUS : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="statusid"> 
<span dojoType="dijit.Tooltip" connectId="statusid">Enter Status</span></td></tr> 

<tr style="height: 50px"> 
<td style="width: 150px"><b>ACTIVITY TYPE : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="activitytypeid"> 
<span dojoType="dijit.Tooltip" connectId="activitytypeid">Enter Type</span></td> 
<td style="width: 150px"><b>ASSIGNED DATE : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.DateTextBox" id="assigneddateid"> 
<span dojoType="dijit.Tooltip" connectId="assigneddateid">Enter date</span></td></tr> 


<tr style="height: 50px"> 
<td style="width: 150px"><b>ASSIGNED TIME : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TimeTextBox" id="assignedtimeid"> 
<span dojoType="dijit.Tooltip" connectId="assignedtimeid">Enter time</span></td> 
<td style="width: 150px"><b>SCHEDULED DATE : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.DateTextBox" id="scheduleddateid"> 
<span dojoType="dijit.Tooltip" connectId="scheduleddateid">Enter Date</span></td></tr> 


<tr style="height: 50px"> 
<td style="width: 150px"><b>SCHEDULED TIME : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TimeTextBox" id="scheduledtimeid"> 
<span dojoType="dijit.Tooltip" connectId="scheduledtimeid">Enter Time</span></td> 
<td style="width: 150px"><b>PERCENT COMPLETE : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.NumberSpinner" id="percentcompleteid"> 
<span dojoType="dijit.Tooltip" connectId="percentcompleteid">Enter Percentage</span></td></tr> 


<tr style="height: 50px"> 
<td style="width: 150px"><b>DESCRIPTION : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="descriptionid"> 
<span dojoType="dijit.Tooltip" connectId="descriptionid">Description</span></td> 
<td style="width: 150px"><b>COMMENTS : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="commentsid"> 
<span dojoType="dijit.Tooltip" connectId="commentsid">Enter Comments</span></td></tr> 



<tr style="height: 50px"> 
     <td style="width: 600px"><button>START</button></td> 
     <td style="width: 600px"><button>STOP</button></td> 
     <td style="width: 600px"><button>HOLD</button></td> 
     <td style="width: 600px"><button>CANCEL</button></td> 
     <td style="width: 600px"><button>CLOSE</button></td></tr> 

</table></center> 


</div> 
</div> 

    </div> 

    <!-- content panes: title is tab name, make this tab closable --> 
<div dojoType="dijit.layout.ContentPane" title="Filter an Activity" style="background-image: url('http://localhost:8080/2_8_2012/images/18.png');" preload="true"> 

     <center><div style="border-color:black; width: 1000px; height: 500px;position:relative; top: 50px;left:20px;bottom:50px;right: 20px;background-image: url('http://localhost:8080/2_8_2012/images/17.png');"> 
     <br><br><p><strong>ENTER THE SEARCH CRITERIA :: </strong></p> 
     <table> 
<tr style="height: 50px"> 
<td style="width: 150px"><b>ASSIGNED BY : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="fassignedbyid" > 
<span dojoType="dijit.Tooltip" connectId="fassignedbyid">Enter Name</span></td> 
<td style="width: 150px" ><b>PRODUCT : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="fproductid"> 
<span dojoType="dijit.Tooltip" connectId="fproductid">Enter product</span></td></tr> 

<tr style="height: 50px"> 
<td style="width: 150px"><b>STATUS : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.TextBox" id="fstatusid"> 
<span dojoType="dijit.Tooltip" connectId="fstatusid">Enter Status</span></td> 
<td style="width: 150px"><b>START DATE : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.DateTextBox" id="fstartdateid"> 
<span dojoType="dijit.Tooltip" connectId="fstartdateid">Enter Date</span></td></tr> 
</table> 
<table> 
<tr style="height: 50px"> 
<td style="width: 100px"><b>STOP DATE : </b></td> 
<td style="width: 600px"><input dojoType="dijit.form.DateTextBox" id="fstopdateid"> 
<span dojoType="dijit.Tooltip" connectId="fstopdateid">Enter date</span></td></tr> 
</table>  
</div></center> 


    </div> 

    <!-- content panes: title is tab name, load content remotely, preload --> 
    <div dojoType="dijit.layout.ContentPane" title="SomeBand" href="some-page.html" preload="true"> 
     <p>Lorem ipsum...</p> 
    </div> 

    </div> 
</div> 


</body> 
</html>

來源

2012-03-09 Shantanu Tomar

既然你以編程方式創建數據網格，你不需要在聲明中指定它。

所以，變化：

<div id="gridDiv" dojoType="dojox.grid.DataGrid" title="Simple Grid" style="width:900px; height:200px;" preload="true">

到

<div id="gridDiv"> 
</div>

此外，改變你的DataGrid人口代碼：

var grid = new dojox.grid.DataGrid({ 
     id: 'grid', 
     style: "height: 350px;width:500px;", 
     store: store, 
     structure: gridStructure, 
     rowSelector: '30px', 
     selectionMode: "single", 
     autoHeight:true}, 
     'gridDiv');

您正在使用的加載選項contentpa ne，所以你是正確的期待它預加載數據網格:-)

但是，如果網格仍然不顯示上述更改，看起來，因爲DOM節點gridDiv設置爲顯示：無， dojo datagrid無法渲染（因爲我猜它需要計算gridDiv元素的可用高度，大小等來定位數據網格）

解決此問題的一種方法是在「待定活動」內容窗格：

1）給一個id未決活動內容窗格：

<div dojoType="dijit.layout.ContentPane" id="pending_activities" title="Pending Activities" style="background-image: url('http://localhost:8080/2_8_2012/images/17.png');" preload="true">

2）添加onShow事件處理程序：

dojo.connect(dijit.byId("pending_activities"), "onShow", function() { 

    if (dijit.byId('grid') != null) { 
    //populate the datagrid here 
    } 
});

來源

2012-03-10 05:19:40

在JSP頁面中加載dojo的不同內容窗格

回答

相關問題