PDA

View Full Version : How do I disable sorting in a TreeGrid?



jeffi
14 Jan 2010, 9:34 AM
I am trying to disable the initial sorting of record as they are added to the tree as well as remove the sorting indicators in the column headers.

I have tried adding "sortable: false" to the column configurations but that does not do it.

Is there a simple way to disable sorting altogether in the TreeGrid, I want to define the order myself.

Here is a simple example of what I am doing:

<code>
<html>
<head>
<title>Disable sort in Ext-JS TreeGrid</title>
<!-- ext css includes -->
<link rel="stylesheet" type="text/css" href="js/ext-3.1.0/resources/css/ext-all.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="js/ext-3.1.0/examples/ux/treegrid/treegrid.css" rel="stylesheet" />
<!-- ext javascript includes -->
<script type="text/javascript" src="js/ext-3.1.0/adapter/ext/ext-base-debug.js?build=20100108.103511"></script>
<script type="text/javascript" src="js/ext-3.1.0/ext-all-debug.js?build=20100108.103511"></script>
<script type="text/javascript" src="js/ext-3.1.0/examples/ux/treegrid/TreeGridSorter.js"></script>
<script type="text/javascript" src="js/ext-3.1.0/examples/ux/treegrid/TreeGridColumnResizer.js"></script>
<script type="text/javascript" src="js/ext-3.1.0/examples/ux/treegrid/TreeGridNodeUI.js"></script>
<script type="text/javascript" src="js/ext-3.1.0/examples/ux/treegrid/TreeGridLoader.js"></script>
<script type="text/javascript" src="js/ext-3.1.0/examples/ux/treegrid/TreeGridColumns.js"></script>
<script type="text/javascript" src="js/ext-3.1.0/examples/ux/treegrid/TreeGrid.js"></script>
</head>
<body>
<div id="treegrid"></div>
<script type="text/javascript">
Ext.onReady(function(){
var treegrid = new Ext.ux.tree.TreeGrid({
width: 200,
renderTo: "treegrid",
enableDD: true,
defaultSortable: false,
columns:[{
id: 'name',
header: 'Names',
width: 200,
dataIndex: 'name',
sortable: false
}]
});
var root = new Ext.tree.TreeNode({
text: 'Lists',
draggable: false,
sortable: false,
id: 'root'
});
treegrid.setRootNode(root);
root.appendChild([{ "leaf":true, "name":"B" },
{ "leaf":true, "name":"A" },
{ "leaf":true, "name":"C" }]);
});
</script>
</body>
</html>
</code>

CrazyEnigma
14 Jan 2010, 11:32 AM
I think there is a way to specify the sort algorithm instead of disabling it.
http://www.extjs.com/deploy/dev/docs/?class=Ext.tree.TreeSorter

jeffi
14 Jan 2010, 11:55 AM
Thanks for your reply CE. When I looked up the TreeSorter as you suggested, I noticed that it is only loaded if the config option 'enableSort' is set to true (default).

I was able to add it to my config (and set to false), and the sorting disappeared as well as the sort indicators in the column headers:

var treegrid = new Ext.ux.tree.TreeGrid({
width: 200,
renderTo: "treegrid",
enableDD: true,
defaultSortable: false,
enableSort: false, // disable sorting
columns:[{
id: 'name',
header: 'Names',
width: 200,
dataIndex: 'name',
sortable: false
}]
});

Thanks for the direction. It solved my problem.

hello
7 Feb 2010, 11:15 PM
is there a way to disable sorting for individual columns?

sideeque
8 Jul 2010, 1:43 PM
If I enable sorting, it takes as "string" sorting. How do I specify for INTEGER?


My Store

var store = new Ext.ux.data.PagingArrayStore({
fields: [{
name: 'task'
}, {
name: 'duration'
}, {
name: 'user'
}],
data: [],

lastOptions: {
params: {
start: 0,
limit: 10
}
}
});

Tree Configuration

var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
enableDD: true,
//defaultSortable: false,
//enableSort: false,
columns:[{
header: 'Task',
dataIndex: 'task',
width: 200
},{
header: 'Duration',
width: 100,
dataIndex: 'duration',
align: 'center'
},{
header: 'Assigned To',
width: 200,
dataIndex: 'user'
}]
});




I tried with type: 'float' with grid culumn configuration and also for Store configuration. It didn't work.

Any other idea to make it INTEGER sort

zulbiadi
3 Jul 2013, 6:58 AM
I get an error script in this line

renderTo: "treegrid",
enableDD: true,
defaultSortable: false,
columns:[{
id: 'name',
header: 'Names',
width: 200,
dataIndex: 'name',
sortable: false

but i still don't know how to better it, please check it again

http://freedownloadgratise.blogspot.com/