PDA

View Full Version : How to check if a grid row is visible or not



pegaso52it
28 Aug 2009, 4:33 AM
Hi all,

I have a grid within n rows, m rows are visible immediatly, to view the others is needed a scroll.

Is there a way to test if a row is visible given its row index?
My need is to develop something like this:

[QUOTE]
autoScroll : function(aGrid, aRowIndex, aColIndex)
{
var gridEl = aGrid.getGridEl();
var rowEl = aGrid.getView().getRow(aRowIndex);
if (test if rowEl is visible, so if it does not need a scroll)
{
// nothing to do
}
else
{
// this just works perfectly
rowEl.scrollIntoView(gridEl,false);
aGrid.startEditing(aRowIndex, aColIndex);
}
}
[QUOTE]

Condor
28 Aug 2009, 6:00 AM
startEditing already calls ensureVisible, so there is no need!

pegaso52it
28 Aug 2009, 7:36 AM
Hi Condor, thanks for your answer.

You are right, but I need after arrow down 2 thinks:
1) that the row is display (ok, the grid scrolls so the row is displayed)
2) that the cell above goes in editing
This not works, seems that startEditing has no effect

Using
rowEl.scrollIntoView(gridEl,false);
aGrid.startEditing(aRowIndex, aColIndex);

scrolls correctly and goes in editing but i need to execute the sroll only if the row is not visible

Condor
28 Aug 2009, 9:01 AM
Calling startEditing directly should work. Could you post an example of where it doesn't?

pegaso52it
31 Aug 2009, 10:42 PM
Hi Condor, I send u the example u asked me.

to test it:
Doudle click on the last row price 64.72, the cell goes in edit
press arrow down
The grid will show the next row, but the above cell is not in edit (the Price 45.73)

Now change the code from line 91 as follows:
[quote]
// the next 3 stataments needed only if 'nav' row is not visibile
var gridEl = g.getGridEl();
var rowEl = g.getView().getRow(newCell[0]);
rowEl.scrollIntoView(gridEl,false);
g.startEditing(newCell[0], newCell[1]);
// if u uncomment this and comment the 4 stataments before
// the grid scolls (use key down) to show row that is not visible
// but the cell does not goes edit
//g.getView().focusRow(newCell[0], newCell[1]);
//g.startEditing(newCell[0], newCell[1]);
[quote]
And redo the test, u will see that after key down the grid scrolls, the cell above goes in edit.
The problem is that the grid scrolls always; I need that grid scrolls only if a "not visible" row is displayed; this is the reason that i need to test if the roe at index current row + 1 is visible or not.

Here the full code:
[quote]
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="custom.css" />
<script type="text/javascript" src="lib/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/extjs/ext-all.js"></script>
<script>
var iMainPanel = null;
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am', false],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', true],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', true],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am', false],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', false],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', false],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', false],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', false],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', false],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', false],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', false],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', false],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', false],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', false],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', false],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', false],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', false],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', false],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', false],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', false],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', false],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', false],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', false],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', false],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', false],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', false],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', false],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', false],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'selected', type: 'boolean'}
]
});
store.loadData(myData);

delete Ext.grid.CellSelectionModel.prototype.acceptsNav;
delete Ext.grid.CellSelectionModel.prototype.onEditorKey;
delete Ext.grid.RowSelectionModel.prototype.acceptsNav;
delete Ext.grid.RowSelectionModel.prototype.onEditorKey;
Ext.override(Ext.grid.AbstractSelectionModel,
{
acceptsNav : function(row, col, cm)
{
return !cm.isHidden(col) && cm.isCellEditable(col, row);
},
onEditorKey : function(field, e)
{
var k = e.getKey(), newCell, dir, g = this.grid, ed = g.activeEditor;
if (k == e.ESC)
{
e.stopEvent();
ed.cancelEdit();
}
else
{
if (k == e.ENTER || k == e.TAB)
{
ed.completeEdit();
e.stopEvent();
}
if (k == e.TAB || (e[this.walkKeys.arrowKey] && (k == e.RIGHT || k == e.LEFT || k == e.UP || k == e.DOWN)))
{
dir = this.getWalkDirection(k, e)
newCell = this.walkCell(ed, dir, e);
}
}
if (newCell)
{
// the next 3 stataments needed only if 'nav' row is not visibile
//var gridEl = g.getGridEl();
//var rowEl = g.getView().getRow(newCell[0]);
//rowEl.scrollIntoView(gridEl,false);
//g.startEditing(newCell[0], newCell[1]);
// if u uncomment this and comment the 4 stataments before
// the grid scolls (use key down) to show row that is not visible
// but the cell does not goes edit
g.getView().focusRow(newCell[0], newCell[1]);
g.startEditing(newCell[0], newCell[1]);
}
},
walkKeys :
{
tab : 'h',
enter : 'v',
left : 'left',
right : 'right',
up : 'up',
down : 'down',
arrowKey : 'ctrlKey'
},
getWalkDirection : function(k, e)
{
var key, wk, dir =
{
rc : 0, // set rowchange and columnchange offsets to zero initially
cc : 0
}
switch (k)
{
case e.TAB :
key = 'tab';
break;
case e.ENTER :
if (this.moveEditorOnEnter === false)
{ // for backward compatibility of moveEditorOnEnter
return false;
}
key = 'enter';
break;
case e.LEFT :
key = 'left';
break;
case e.RIGHT :
key = 'right';
break;
case e.UP :
key = 'up';
break;
case e.DOWN :
key = 'down';
break;
default :
return false;
}
wk = this.walkKeys[key];
if (key == 'left' || key == 'right' || key == 'up' || key == 'down')
{
if (!e[this.walkKeys.arrowKey])
{
return false
}
}
if (!wk)
{
return false;
}
var shift = e.shiftKey;
var ctrl = e.ctrlKey;
var step = shift ? -1 : 1;
if (wk == 'left' || wk == 'up')
{
step = -1;
}
else if (wk == 'right' || wk == 'down')
{
step = 1;
}
if (wk == 'v')
{
dir.rc = step;
}
else if (wk == 'h')
{
dir.cc = step;
}
else if (wk == 'left' || wk == 'right')
{
dir.cc = step;
}
else if (wk == 'up' || wk == 'down')
{
dir.rc = step;
}
dir.step = step;
return dir;
},
// private
walkCell : function(ed, dir, e)
{
if (dir != false)
{
return this.grid.walkCells(ed.row + dir.rc, ed.col + dir.cc, dir.step, this.acceptsNav, this);
}
}
});

Ext.onReady(function() {


iMainPanel = new Ext.Container(
{
id : 'main-panel',
region : 'center',
layout : 'fit',
margins : '2 5 5 0',
border : false,
items : []
});

var vView = new Ext.Viewport(
{
layout : 'border',
items : [iMainPanel]
});
vView.doLayout();
buildWireframeDependent();
})
function buildWireframeDependent()
{

iMainPanel.removeAll(true);
var vMainPanelDependent = new Ext.Window(
{
id : 'win-Dependent',
title : 'Dependent Window',
border : true,
modal : true,
autoDestroy: true,
width : 640,
height: 480,
listeners:{
'show': function(window){
vEditorGrid.setHeight(window.getInnerHeight());
window.doLayout();
}
},
tools:[{
id:'plus',
qtip: 'Add errors panel',
handler: function(event, toolEl, panel){
objHeight = vEditorGrid.getHeight();
vEditorGrid.setHeight(objHeight);
}
}]
});


var vEditorGrid = new Ext.grid.EditorGridPanel({
store: store,
width:'100%',
clicksToEdit: 'auto',
id:'EDITOR_GRID',
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', editable: true, editor: new Ext.form.TextField({
allowBlank: false
})},
{header: "Price", width: 75, sortable: true, dataIndex: 'price', editable: true, editor: new Ext.form.TextField({
allowBlank: false
})},
{header: "Change", width: 75, sortable: true, dataIndex: 'change', editable: true, editor: new Ext.form.TextField({
allowBlank: false
})},
{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange', editable: true, editor: new Ext.form.TextField({
allowBlank: false
})},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange', editable: false},
new Ext.grid.BooleanColumn({header: "Selected", dataIndex: 'selected', editable: true, editor: new Ext.form.Checkbox()})
],
stripeRows: true,
autoExpandColumn: 'company',
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
selModel: new Ext.grid.RowSelectionModel({
walkKeys : {
tab: 'h',
enter: 'v',
left: 'left',
right: 'right',
up: 'up',
down: 'down',
arrowKey: 'ctrlKey'
}
})
});

vMainPanelDependent.add(vEditorGrid);
vMainPanelDependent.show();
}
</script>
</head>
</body>
</body>
</html>
[quote]