2014-01-05 43 views
1

我通過構建一個非常基本的基於Web的聊天應用程序教我自己的JavaScript。道場網格不滾動到最後一個項目

聊天消息發佈到Web服務器。 HTML聊天客戶端定期輪詢Web服務器以下載任何新消息。

聊天消息使用dojo網格顯示。

我的問題是我無法將網格滾動到最後一條消息。我曾嘗試使用scrollToRow,但它不起作用。

JavaScript代碼是此處=>

<html> 
<head> 
    <style type="text/css"> 
     @import "./dojoroot/dojo/resources/dojo.css"; 
     @import "./dojoroot/dijit/themes/tundra/tundra.css"; 
     @import "./dojoroot/dojox/grid/resources/Grid.css"; 
     @import "./dojoroot/dojox/grid/resources/tundraGrid.css"; 
     .input { 
      width: 100%; 
      padding: 0; 
      text-align: justify; 
     } 
     .dojoxGridHeader { 
      display: none; 
     } 
    </style> 

    <script language="JavaScript" src="./dojoroot/dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true"> 
    </script> 
    <script type="text/Javascript"> 
     dojo.require("dojo.parser"); 
     dojo.require("dojo.dom-style"); 
     dojo.require("dojox.grid.DataGrid"); 
     dojo.require("dojo.data.ItemFileWriteStore"); 
     dojo.require("dijit.layout.ContentPane"); 
     var chatData={items:[]}; 
     var chatStore=new dojo.data.ItemFileWriteStore({data:chatData}); 
     var chatLayout=[[{'name':'Sender','field':'sender','width':'10%'}, 
         {'name':'Message','field':'message','width':'90%'}]]; 
     var chatRow=0; 
    </script> 
</head> 
<body> 
    <div align="center"> 
     <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="10"> 
      <div id="gridDiv" style="text-align:left; border: 1px solid #aaa; width:98%; height:80%; overflow:auto;"> 
      </div> 
    </div> 

    <script type="text/javascript"> 
     var grid=new dojox.grid.DataGrid({id:'grid', 
              store:chatStore, 
              structure:chatLayout, 
              rowSelector:'0px'}); 
     grid.placeAt("gridDiv"); 
     grid.startup(); 
     setInterval(listenToServer,250); 

     function listenToServer() { 
      dojo.xhrGet({ 
       url: "http://localhost:8080/ChatProject/ListenToServer", 
       handleAs: "json", 
       load: function(data) { 
        if (data!=null) { 
         if (data.message!="") { 
          var myNewItem = {sender: data.sender, message: data.message}; 
          chatRow++; 
          // Insert the new item into the store: 
          // (we use store3 from the example above in this example) 
          chatStore.newItem(myNewItem); 
          chatStore.save(); 
          var lastRow=grid.store._arrayOfAllItems.length-1; 
          grid.scrollToRow(lastRow); 
         } 
        } 
       } 
      });    
     } 
    </script> 
</body> 
</html> 

的網格不向下滾動到最後一條消息。

任何幫助將不勝感激。

謝謝。

James。

+0

嘗試在添加行後調用調整大小。 – tik27

+0

非常感謝您的建議,但恐怕它不起作用。我在chatStore.save()之後立即添加了grid.resize(),但網格停止顯示任何內容。 – user1936427

回答

1

多次實驗後,我發現了以下問題:

  1. 兩個獨立的滾動條,正在創造的 - 我認爲(雖然我不知道)是一個滾動條是用內容窗格和一個與關聯格。對於網格我設置溢出:隱藏來克服這一點。
  2. 高度:80%參數導致網格大於周圍的內容窗格。我改變了這個高度:250px。

有了這兩個變化,滾動開始工作(幾乎)。

在這一點上我DataGrid中遇到了這個錯誤=>https://bugs.dojotoolkit.org/ticket/10487

在這一點上我提出和使用的數據網格停了!

+0

dojo不應該使用。決不。在任何情況下。這是一個可怕的軟件hallamark。 –