PDA

View Full Version : treegrid containerScroll



adam.jimenez
14 Nov 2010, 11:19 AM
I'm trying to get auto-scrolling when dragging nodes in a tree grid. I believe this is done with containerScroll but it doesn't seem to work. Am I doing something wrong or is this a bug?

This is based on the tree-grid example:
http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TreeGrid Example</title>

<!--ext start -->
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.0/ext-all.js"></script>
<!--ext end -->

<!-- ext css includes -->
<link rel="stylesheet" type="text/css" href="treegrid.css" />


<script type="text/javascript" src="TreeGridSorter.js"></script>
<script type="text/javascript" src="TreeGridColumnResizer.js"></script>
<script type="text/javascript" src="TreeGridNodeUI.js"></script>
<script type="text/javascript" src="TreeGridLoader.js"></script>
<script type="text/javascript" src="TreeGridColumns.js"></script>
<script type="text/javascript" src="TreeGrid.js"></script>

<script type="text/javascript" src="tree-grid.js"></script>

<script type="text/javascript">
/*!
* Ext JS Library 3.3.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function() {
Ext.QuickTips.init();

var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
enableDD: true,
containerScroll:true,

columns:[{
header: 'Task',
dataIndex: 'task',
width: 230
},{
header: 'Duration',
width: 100,
dataIndex: 'duration',
align: 'center',
sortType: 'asFloat',
tpl: new Ext.XTemplate('{duration:this.formatHours}', {
formatHours: function(v) {
if(v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
header: 'Assigned To',
width: 150,
dataIndex: 'user'
}],

dataUrl: 'treegrid-data.json'
});
});
</script>
</head>

<body style="padding: 50px;"></body>
</html>