Fix focus of grid body, by moving focus element to start of HTML

[roojs1] / Roo / grid / GridView.js

diff --git a/Roo/grid/GridView.js b/Roo/grid/GridView.js
index ee22306..42617f4 100644 (file)
--- a/Roo/grid/GridView.js
+++ b/Roo/grid/GridView.js
@@ -119,6 +119,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
         if(!tpls.master){
             tpls.master = new Roo.Template(
                '<div class="x-grid" hidefocus="true">',
+                '<a href="#" class="x-grid-focus" tabIndex="-1"></a>',
                   '<div class="x-grid-topbar"></div>',
                   '<div class="x-grid-scroller"><div></div></div>',
                   '<div class="x-grid-locked">',
@@ -130,7 +131,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
                       '<div class="x-grid-body">{body}</div>',
                   "</div>",
                   '<div class="x-grid-bottombar"></div>',
-                  '<a href="#" class="x-grid-focus" tabIndex="-1"></a>',
+                 
                   '<div class="x-grid-resize-proxy">&#160;</div>',
                "</div>"
             );
@@ -308,25 +309,27 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
         var cs = el.childNodes;
 
         this.el = new E(el);
-        this.headerPanel = new E(el.firstChild);
+        
+         this.focusEl = new E(el.firstChild);
+        this.focusEl.swallowEvent("click", true);
+        
+        this.headerPanel = new E(cs[1]);
         this.headerPanel.enableDisplayMode("block");
 
-        this.scroller = new E(cs[1]);
+        this.scroller = new E(cs[2]);
         this.scrollSizer = new E(this.scroller.dom.firstChild);
 
-        this.lockedWrap = new E(cs[2]);
+        this.lockedWrap = new E(cs[3]);
         this.lockedHd = new E(this.lockedWrap.dom.firstChild);
         this.lockedBody = new E(this.lockedWrap.dom.childNodes[1]);
 
-        this.mainWrap = new E(cs[3]);
+        this.mainWrap = new E(cs[4]);
         this.mainHd = new E(this.mainWrap.dom.firstChild);
         this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
 
-        this.footerPanel = new E(cs[4]);
+        this.footerPanel = new E(cs[5]);
         this.footerPanel.enableDisplayMode("block");
 
-        this.focusEl = new E(cs[5]);
-        this.focusEl.swallowEvent("click", true);
         this.resizeProxy = new E(cs[6]);
 
         this.headerSelector = String.format(
@@ -512,7 +515,9 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
      * Focuses the specified row.
      * @param {Number} row The row index
      */
-    focusRow : function(row){
+    focusRow : function(row)
+    {
+        //Roo.log('GridView.focusRow');
         var x = this.scroller.dom.scrollLeft;
         this.focusCell(row, 0, false);
         this.scroller.dom.scrollLeft = x;
@@ -524,7 +529,9 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
      * @param {Number} col The column index
      * @param {Boolean} hscroll false to disable horizontal scrolling
      */
-    focusCell : function(row, col, hscroll){
+    focusCell : function(row, col, hscroll)
+    {
+        //Roo.log('GridView.focusCell');
         var el = this.ensureVisible(row, col, hscroll);
         this.focusEl.alignTo(el, "tl-tl");
         if(Roo.isGecko){
@@ -540,12 +547,15 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
      * @param {Number} col The column index
      * @param {Boolean} hscroll false to disable horizontal scrolling
      */
-    ensureVisible : function(row, col, hscroll){
+    ensureVisible : function(row, col, hscroll)
+    {
+        //Roo.log('GridView.ensureVisible,' + row + ',' + col);
+        //return null; //disable for testing.
         if(typeof row != "number"){
             row = row.rowIndex;
         }
         if(row < 0 && row >= this.ds.getCount()){
-            return;
+            return  null;
         }
         col = (col !== undefined ? col : 0);
         var cm = this.grid.colModel;
@@ -555,7 +565,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
 
         var el = this.getCell(row, col);
         if(!el){
-            return;
+            return null;
         }
         var c = this.scroller.dom;
 
@@ -563,19 +573,31 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
         var cleft = parseInt(el.offsetLeft, 10);
         var cbot = ctop + el.offsetHeight;
         var cright = cleft + el.offsetWidth;
-
+        
         var ch = c.clientHeight - this.mainHd.dom.offsetHeight;
         var stop = parseInt(c.scrollTop, 10);
         var sleft = parseInt(c.scrollLeft, 10);
         var sbot = stop + ch;
         var sright = sleft + c.clientWidth;
-
+        /*
+        Roo.log('GridView.ensureVisible:' +
+                ' ctop:' + ctop +
+                ' c.clientHeight:' + c.clientHeight +
+                ' this.mainHd.dom.offsetHeight:' + this.mainHd.dom.offsetHeight +
+                ' stop:' + stop +
+                ' cbot:' + cbot +
+                ' sbot:' + sbot +
+                ' ch:' + ch  
+                );
+        */
         if(ctop < stop){
-            c.scrollTop = ctop;
+             c.scrollTop = ctop;
+            //Roo.log("set scrolltop to ctop DISABLE?");
         }else if(cbot > sbot){
+            //Roo.log("set scrolltop to cbot-ch");
             c.scrollTop = cbot-ch;
         }
-
+        
         if(hscroll !== false){
             if(cleft < sleft){
                 c.scrollLeft = cleft;
@@ -583,6 +605,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
                 c.scrollLeft = cright-c.clientWidth;
             }
         }
+         
         return el;
     },
 
@@ -744,6 +767,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
     },
 
     getScrollState : function(){
+        
         var sb = this.scroller.dom;
         return {left: sb.scrollLeft, top: sb.scrollTop};
     },
@@ -775,6 +799,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
     },
 
     restoreScroll : function(state){
+        //Roo.log('GridView.restoreScroll');
         var sb = this.scroller.dom;
         sb.scrollLeft = state.left;
         sb.scrollTop = state.top;
@@ -782,6 +807,7 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
     },
 
     syncScroll : function(){
+        //Roo.log('GridView.syncScroll');
         var sb = this.scroller.dom;
         var sh = this.mainHd.dom;
         var bs = this.mainBody.dom;