} else {
// fix randome scrolling
this.el.on('scroll', function() {
+ Roo.log('fix random scolling');
this.scrollTo('top',0);
});
}
/**
* @event rowclass
* Fires when a row is rendered, so you can change add a style to it.
- * @param {GridView} gridview The grid view
- * @param {Object} rowcfg contains record, rowIndex and rowClass - set rowClass to add a style.
+ * @param {GridView} gridview The grid view
+ * @param {Object} rowcfg contains record rowIndex and rowClass - set rowClass to add a style.
*/
'rowclass' : true,
/**
* @cfg {String} ddGroup - drag drop group.
- */
-
+ */
+
/**
* @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
- */
- minColumnWidth : 25,
+ */
+ minColumnWidth : 25,
/**
- * @cfg {Boolean} autoSizeColumns True to automatically resize the columns to fit their content
- * <b>on initial render.</b> It is more efficient to explicitly size the columns
- * through the ColumnModel's {@link Roo.grid.ColumnModel#width} config option. Default is false.
- */
- autoSizeColumns : false,
+ * @cfg {Boolean} autoSizeColumns True to automatically resize the columns to fit their content
+ * <b>on initial render.</b> It is more efficient to explicitly size the columns
+ * through the ColumnModel's {@link Roo.grid.ColumnModel#width} config option. Default is false.
+ */
+ autoSizeColumns : false,
- /**
- * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
- */
- autoSizeHeaders : true,
+ /**
+ * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
+ */
+ autoSizeHeaders : true,
- /**
- * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
- */
- monitorWindowResize : true,
+ /**
+ * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
+ */
+ monitorWindowResize : true,
- /**
- * @cfg {Boolean} maxRowsToMeasure If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of
- * rows measured to get a columns size. Default is 0 (all rows).
- */
- maxRowsToMeasure : 0,
+ /**
+ * @cfg {Boolean} maxRowsToMeasure If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of
+ * rows measured to get a columns size. Default is 0 (all rows).
+ */
+ maxRowsToMeasure : 0,
- /**
- * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
- */
- trackMouseOver : true,
+ /**
+ * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
+ */
+ trackMouseOver : true,
/**
- * @cfg {Boolean} enableDrag True to enable drag of rows. Default is false. (double check if this is needed?)
- */
+ * @cfg {Boolean} enableDrag True to enable drag of rows. Default is false. (double check if this is needed?)
+ */
- /**
- * @cfg {Boolean} enableDragDrop True to enable drag and drop of rows. Default is false.
- */
- enableDragDrop : false,
-
- /**
- * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
- */
- enableColumnMove : true,
-
- /**
- * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
- */
- enableColumnHide : true,
-
- /**
- * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
- */
- enableRowHeightSync : false,
-
- /**
- * @cfg {Boolean} stripeRows True to stripe the rows. Default is true.
- */
- stripeRows : true,
-
- /**
- * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
- */
- autoHeight : false,
+ /**
+ * @cfg {Boolean} enableDragDrop True to enable drag and drop of rows. Default is false.
+ */
+ enableDragDrop : false,
+
+ /**
+ * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
+ */
+ enableColumnMove : true,
+
+ /**
+ * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
+ */
+ enableColumnHide : true,
+
+ /**
+ * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
+ */
+ enableRowHeightSync : false,
+
+ /**
+ * @cfg {Boolean} stripeRows True to stripe the rows. Default is true.
+ */
+ stripeRows : true,
+
+ /**
+ * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
+ */
+ autoHeight : false,
/**
* @cfg {String} autoExpandColumn The id (or dataIndex) of a column in this grid that should expand to fill unused space. This id can not be 0. Default is false.
autoExpandMax : 1000,
/**
- * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
- */
- view : null,
+ * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
+ */
+ view : null,
- /**
- * @cfg {Object} loadMask An {@link Roo.LoadMask} config or true to mask the grid while loading. Default is false.
- */
- loadMask : false,
/**
- * @cfg {Roo.dd.DropTarget} dragTarget An {@link Roo.dd.DragTarget} config
- */
- dropTarget: false,
+ * @cfg {Object} loadMask An {@link Roo.LoadMask} config or true to mask the grid while loading. Default is false.
+ */
+ loadMask : false,
+ /**
+ * @cfg {Roo.dd.DropTarget} dragTarget An {@link Roo.dd.DragTarget} config
+ */
+ dropTarget: false,
+
// private
rendered : false,
* Called once after all setup has been completed and the grid is ready to be rendered.
* @return {Roo.grid.Grid} this
*/
- render : function(){
+ render : function()
+ {
var c = this.container;
// try to detect autoHeight/width mode
if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
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">',
'<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"> </div>',
"</div>"
);
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(
* 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;
* @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){
* @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;
var el = this.getCell(row, col);
if(!el){
- return;
+ return null;
}
var c = this.scroller.dom;
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;
c.scrollLeft = cright-c.clientWidth;
}
}
+
return el;
},
},
getScrollState : function(){
+
var sb = this.scroller.dom;
return {left: sb.scrollLeft, top: sb.scrollTop};
},
},
restoreScroll : function(state){
+ //Roo.log('GridView.restoreScroll');
var sb = this.scroller.dom;
sb.scrollLeft = state.left;
sb.scrollTop = state.top;
},
syncScroll : function(){
+ //Roo.log('GridView.syncScroll');
var sb = this.scroller.dom;
var sh = this.mainHd.dom;
var bs = this.mainBody.dom;