在JSP页面中加载dojo的不同内容窗格

时间：2012-03-09 14:40:11

标签： java javascript dojo dijit.layout

我有一个JSP页面。因为我有不同的内容窗格（使用Dojo框架）。现在，对于要在页面加载上显示的特定内容窗格，我在其中一个内容窗格上设置了“selected = true”属性为true（添加新活动）。现在我有另一个内容窗格，使用dojox.grid.DataGrid（待定活动）显示数据。但是当页面加载时，我的添加新活动窗格绝对正常。但是一旦我切换到另一个窗格（待定活动），我就会得到一个网格，但里面没有数据。当我为待定活动窗格设置“selected = true”属性时，我会在网格内正确显示我的数据。我认为问题是我的页面只加载了一次。怎么解决？谢谢..

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

1 个答案:

答案 0 :(得分：0)

由于您是以编程方式创建数据网格，因此无需在声明中指定它。

所以，改变：

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

到

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

此外，将您的数据网格填充代码更改为：

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

您正在使用contentpane上的preload选项，因此您希望它能够预加载数据网格： - ）

但是，如果网格仍然没有出现上面的更改，似乎由于DOM节点gridDiv设置为display：none，dojo datagrid无法呈现（因为我猜它需要计算gridDiv元素的可用高度，大小等以定位数据网格

解决此问题的一种方法是在“待处理活动”内容窗格上创建onShow事件处理程序：

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
  }
});
相关问题
最新问题