PDA

View Full Version : Sorting based on column name not working for Ext.grid.ColumnModel



extjsquery
27 Apr 2011, 1:35 AM
Hi,
I am using ColumnModel where sortable: true is defined for all the columns
In the application I can click on the column name and it does some re-ordering but it is not proper sorting

For eg: one column has values as -
readCell
MLS
DateTest
17099
JavaInfoletTestTwoNumber
MLS3
test_15_11
JavaInfoletConvertFileFormat

After clicking on col name for sorting "test_15_11" comes before "JavaInfoletConvertFileFormat"

JS code:
var gridColumnModel = new Ext.grid.ColumnModel([
{header: '@[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]',width:50,align:'center'}
,{header: '@[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]'}
,{header: '@[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]',sortIndex:'@[email protected]',width:150}
,{header: '@l[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]',width:70,align:'center'}
,{header: '@[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]',width:70,align:'center'}
,{header: '@[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]',width:70,align:'center'}
,{header: '@[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]',width:70,align:'center'}
,{header: '@[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]',width:60,align:'center'}
]);

Please let me know if we are missing on anything or any other property needs to be added

extjsquery
27 Apr 2011, 2:14 AM
The issue happens with the columns in which the values have a hyperlink
Re-pasting the JS code:


var gridColumnModel = new Ext.grid.ColumnModel([
{header: '@[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]',width:50,align:'center'}
,{header: '@[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]'}
,{header: '@[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]',sortIndex:'@[email protected]',width:150}
,{header: '@[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]',width:70,align:'center'}
,{header: '@[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]',width:70,align:'center'}
,{header: '@[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]',width:70,align:'center'}
,{header: '@[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]',width:70,align:'center'}
,{header: '@[email protected]',sortable:true, menuDisabled:true, dataIndex:'@[email protected]',width:60,align:'center'}
]);


var pageData = [];
//@x_metric_list[0](
pageData.push([
'@x_active_status( @link_flag(<a href="javascript:showUnimplement(\'@[email protected]\')">)@<img src="@[email protected]/@[email protected]" border="0" />@link_flag(</a>)@ )@ @x_active_status_checkbox(<input type="checkbox" value="@[email protected]" name="@[email protected]" @[email protected]/> )@'
,'@[email protected]'
,'@x_types(@link_flag(<a href="@[email protected]" class="body">)@)@@^[email protected]@x_types(@link_flag(</a>)@)@'
,'@x_details( @link_flag(<a href="@[email protected]">)@<img src="@[email protected]/@[email protected] border="0" alt="@[email protected]"/>@link_flag(</a>)@)@'
,'@x_manage_schedules( @link_flag(<a href="@[email protected]">)@@.image{@"uselabel"(<span class="href-link-labels" title="@[email protected]" > @[email protected]</span>)@@(<img src="@[email protected]/@[email protected]" border="0" alt="@[email protected]"/>)@}@@link_flag(</a>)@)@'
,'@x_runnow_checkbox(<input type="checkbox" value="@^[email protected]" name="@^[email protected]" @[email protected]/>)@'
,'@x_filter( @link_flag(<a href="@[email protected]">)@@.image{@"uselabel"(<span class="href-link-labels"title="@[email protected]"> @[email protected]</span>)@@(<img src="@[email protected]/@[email protected]" border="0" alt="@[email protected]"/>)@}@@link_flag(</a>)@)@'
,'@x_edit_columns( @link_flag(<a href="@[email protected]">)@@.image{@"uselabel"(<span class="href-link-labels" title="@[email protected]"> @[email protected]</span>)@@(<img src="@[email protected]/@[email protected]" border="0" alt="@[email protected]"/>)@}@@link_flag(</a>)@)@'
]);//)@

//@x_metric_list[1..](
pageData.push([
'@x_active_status( @link_flag(<a href="javascript:showUnimplement(\'@[email protected]\')">)@<img src="@[email protected]/@[email protected]" border="0"/>@link_flag(</a>)@)@ @x_active_status_checkbox( <input type="checkbox" value="@[email protected]" name="@[email protected]" @[email protected]/> )@'
,'@[email protected]'
,'@x_types(@link_flag(<a href="@[email protected]" class="body">)@)@@[email protected]@x_types(@link_flag(</a>)@)@'
,'@x_details( @link_flag(<a href="@[email protected]">)@<img src="@[email protected]/@[email protected]" border="0" alt="@[email protected]"/>@link_flag(</a>)@)@'
,'@x_manage_schedules( @link_flag(<a href="@[email protected]">)@@.image{@"uselabel"(<span class="href-link-labels" title="@[email protected]" > @[email protected]</span>)@@(<img src="@[email protected]/@[email protected]" border="0" alt="@[email protected]"/>)@}@@link_flag(</a>)@)@'
,'@x_runnow_checkbox(<input type="checkbox" value="@^[email protected]" name="@^[email protected]" @[email protected]/>)@'
,'@x_filter( @link_flag(<a href="@[email protected]">)@@.image{@"uselabel"(<span class="href-link-labels" title="@[email protected]"> @[email protected]</span>)@@(<img src="@[email protected]/@[email protected]" border="0" alt="@[email protected]"/>)@}@@link_flag(</a>)@)@'
,'@x_edit_columns( @link_flag(<a href="@[email protected]">)@@.image{@"uselabel"(<span class="href-link-labels" title="@[email protected]"> @[email protected]</span>)@@(<img src="@[email protected]/@[email protected]" border="0" alt="@[email protected]"/>)@}@@link_flag(</a>)@)@'
]);//)@

var pageDataStore = new Ext.data.SimpleStore({
fields: [
{name: '@[email protected]'}
,{name: '@[email protected]'}
,{name: '@[email protected]'}
,{name: '@[email protected]'}
,{name: '@[email protected]'}
,{name: '@[email protected]'}
,{name: '@[email protected]'}
,{name: '@[email protected]'}
]
,data:pageData
,id:'dataStoreId'
});



Is there any additional conditions to sort such columns

extjsquery
27 Apr 2011, 2:37 AM
I found the sorting is done on the entire <a> tag

Sample field value for which sorting is required:
<a href="Editmetrictypes?x_metric_type=5&amp;x_metric_category=Assets&amp;x_metric_name=readCell&amp;x_metric_id=100206&amp;x_metric_list_page=1" class="body">readCell</a>
<a href="Editmetrictypes?x_metric_type=1&amp;x_metric_category=General+Ledger&amp;x_metric_name=TestInfolet&amp;x_metric_id=100216&amp;x_metric_list_page=1" class="body">TestInfolet</a>
<a href="Editmetrictypes?x_metric_type=1&amp;x_metric_category=Assets&amp;x_metric_name=MLS&amp;x_metric_id=100214&amp;x_metric_list_page=1" class="body">MLS</a>
<a href="Editmetrictypes?x_metric_type=1&amp;x_metric_category=Assets&amp;x_metric_name=DateTest&amp;x_metric_id=100213&amp;x_metric_list_page=1" class="body">DateTest</a>
<a href="Editmetrictypes?x_metric_type=1&amp;x_metric_category=Assets&amp;x_metric_name=17099&amp;x_metric_id=100199&amp;x_metric_list_page=1" class="body">17099</a>
<a href="Editmetrictypes?x_metric_type=5&amp;x_metric_category=Assets&amp;x_metric_name=JavaInfoletTestTwoNumbers&amp;x_metric_id=100212&amp;x_metric_list_page=1" class="body">JavaInfoletTestTwoNumbers</a>
<a href="Editmetrictypes?x_metric_type=1&amp;x_metric_category=Assets&amp;x_metric_name=MLS3&amp;x_metric_id=100211&amp;x_metric_list_page=1" class="body">MLS3</a>
<a href="Editmetrictypes?x_metric_type=1&amp;x_metric_category=Assets&amp;x_metric_name=test_15_11&amp;x_metric_id=100210&amp;x_metric_list_page=1" class="body">test_15_11</a>
<a href="Editmetrictypes?x_metric_type=5&amp;x_metric_category=Assets&amp;x_metric_name=JavaInfoletConvertFileFormat&amp;x_metric_id=100209&amp;x_metric_list_page=1" class="body">JavaInfoletConvertFileFormat</a>
<a href="Editmetrictypes?x_metric_type=1&amp;x_metric_category=Assets&amp;x_metric_name=MLS2&amp;x_metric_id=100208&amp;x_metric_list_page=1" class="body">MLS2</a>

For sorting the comparison starts right from <a tag and hence the final sorted values are:
<a href="Editmetrictypes?x_metric_type=1&amp;x_metric_category=Assets&amp;x_metric_name=17099&amp;x_metric_id=100199&amp;x_metric_list_page=1" class="body">17099</a>
<a href="Editmetrictypes?x_metric_type=1&amp;x_metric_category=Assets&amp;x_metric_name=DateTest&amp;x_metric_id=100213&amp;x_metric_list_page=1" class="body">DateTest</a>
<a href="Editmetrictypes?x_metric_type=1&amp;x_metric_category=Assets&amp;x_metric_name=MLS&amp;x_metric_id=100214&amp;x_metric_list_page=1" class="body">MLS</a>
<a href="Editmetrictypes?x_metric_type=1&amp;x_metric_category=Assets&amp;x_metric_name=MLS2&amp;x_metric_id=100208&amp;x_metric_list_page=1" class="body">MLS2</a>
<a href="Editmetrictypes?x_metric_type=1&amp;x_metric_category=Assets&amp;x_metric_name=MLS3&amp;x_metric_id=100211&amp;x_metric_list_page=1" class="body">MLS3</a>
<a href="Editmetrictypes?x_metric_type=1&amp;x_metric_category=Assets&amp;x_metric_name=test_15_11&amp;x_metric_id=100210&amp;x_metric_list_page=1" class="body">test_15_11</a>
<a href="Editmetrictypes?x_metric_type=1&amp;x_metric_category=General+Ledger&amp;x_metric_name=TestInfolet&amp;x_metric_id=100216&amp;x_metric_list_page=1" class="body">TestInfolet</a>
<a href="Editmetrictypes?x_metric_type=5&amp;x_metric_category=Assets&amp;x_metric_name=JavaInfoletConvertFileFormat&amp;x_metric_id=100209&amp;x_metric_list_page=1" class="body">JavaInfoletConvertFileFormat</a>
<a href="Editmetrictypes?x_metric_type=5&amp;x_metric_category=Assets&amp;x_metric_name=JavaInfoletTestTwoNumbers&amp;x_metric_id=100212&amp;x_metric_list_page=1" class="body">JavaInfoletTestTwoNumbers</a>
<a href="Editmetrictypes?x_metric_type=5&amp;x_metric_category=Assets&amp;x_metric_name=readCell&amp;x_metric_id=100206&amp;x_metric_list_page=1" class="body">readCell</a>

I just have to compare on the actual display value. Please let me know how can I do the same

extjsquery
27 Apr 2011, 4:15 AM
Found the solution:
http://www.sencha.com/forum/showthread.php?80956-extending-Ext.grid.ColumnModel...-dataIndex-and-sortIndex