PDA

View Full Version : How to set default sort column in grid?



dbassett74
15 Jul 2009, 2:28 PM
How do I set the column to be sorted when the grid is created? So that, even if there are not records yet, the column specified still shows the appropriate arrow indicating the sort direction, then upon reloading the grid, it utilizing that sort to appropriately display the records. Can this be done on the grid itself so it is independent of the underlying data store? any help would be appreciated.

httpdotcom
15 Jul 2009, 3:31 PM
store( {
sortInfo: { field: "", direction: "ASC" }
} ) ;

http://extjs.com/deploy/dev/docs/source/Store.html#cfg-Ext.data.Store-sortInfo

dbassett74
15 Jul 2009, 3:44 PM
Thanks, that did it.

amitru
1 Dec 2011, 1:53 AM
DefaultSort is not working below is the snipp, please advise.

<html>

<script type="text/javascript" src="../lib/ext-base.js"></script>
<script type="text/javascript" src="../lib/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../css/ext-all.css" />


<script language="javascript">

Ext.onReady(function()
{
Ext.QuickTips.init();
Ext.data.Types.FLOATORSTRING = {
convert: function(v, n) {
return n;
},
sortType: function(v) {
v = Ext.isNumber(v) ? v : parseFloat(String(v), 10);
return isNaN(v) ? -999999 : v;
},
type: 'floatOrString'
};

var myGridPanel = new Ext.grid.GridPanel({
id: 'testGridForSort',
title: 'Assoc Docs',
//applyTo: 'myDiv',
width: 200,
height: 200,
viewConfig :{
forceFit:false,
emptyText:'No rows to display' //Check for no rows
},
store: new Ext.data.ArrayStore({
fields: [{name: 'field1', type: 'floatOrString',mapping: 'field1'}],
data:['-1','-','100','2','124','-','70','145','zzbcd','pqr','azz']
//sortInfo: { field: "field1", direction: "ASC" }
}),
columns: [{header: 'Sort me', dataIndex: 'field1', sortable: true}],
buttons: [{
text: 'Search',handler : function(){}
}, {
text: 'Clear',handler : function(){}
}]
});

myGridPanel.getStore().setDefaultSort('field1', 'asc');
myGridPanel.render('myDiv');
});


</script>
<div id="myDiv" style="position:absolute; top:150; left:40%;">
</div>
</html>