PDA

View Full Version : Sorting not working for date column in cfgrid



sabarigirish
30 Jan 2017, 10:09 AM
Hi,

We have a cfgrid populated from database.We have two columns of date type.When we sort these columns they are
getting sorted like a string instead of dates.How can we override these columns only for the doSort method

Gary Schlosberg
30 Jan 2017, 12:11 PM
Seems to work in the doc example:
http://docs.sencha.com/extjs/4.2.6/#!/api/Ext.grid.column.Date

I would recommend generating the grid from Ext JS.

sabarigirish
31 Jan 2017, 3:31 AM
We are already getting the data from the database
Is it possible to override the date columns with the exisiting approach?

Gary Schlosberg
31 Jan 2017, 3:55 PM
A ColdFusion grid is not the same as an Ext JS grid. How exactly are you using Ext JS?

sabarigirish
31 Jan 2017, 7:41 PM
Hi,

We have the cfgrid populated from the database as given below:
<cfgrid format="html" name="gridWorkingBillsDetailsPaging" selectOnLoad="false" textColor="##000080" colHeaderTextColor="##000080" colHeaderAlign="right" colHeaderFont="verdana" colHeaders="yes" colHeaderBold="yes" width="1130"
colHeaderFontSize="12" align="center" autowidth="true" multirowselect="true"
selectmode="row" pagesize="10" bind="cfc:cfc.workingbilldetails.getWorkingBillDetails({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})" >
<cfgridcolumn name="TRANS_SEQ" header="Transaction <br>Id" width="80" headerbold="true" />
<cfgridcolumn name="CLIENT_TRANS_REF_ID" header="Client Trans <br>Ref Id" width="80" headerbold="true" />
<cfgridcolumn name="FIRST_NAME" header="First Name" width="80" headerbold="true" />
<cfgridcolumn name="LAST_NAME" header="Last Name" width="80" headerbold="true" />
<cfgridcolumn name="CONF_NUM" header="Conf Num." width="65" headerbold="true" />
<cfgridcolumn name="START_DT" header="Start Date" width="65" headerbold="true" />
<cfgridcolumn name="END_DT" header="End Date" width="60" headerbold="true" />
<cfgridcolumn name="PAY_AMOUNT" header="Amount" dataAlign="right" width="100" headerbold="true" />
<cfgridcolumn name="CURRENCY" header="Currency" width="60" headerbold="true" />
<cfgridcolumn name="STATUS" header="Status" width="50" headerbold="true" />
<cfgridcolumn name='action' header='Action' width="190" headerbold="true" />

</cfgrid>

<!--- Initializing the Grid in Paging Mode --->

<cfset ajaxOnLoad("fnGridPaging")>


in the fnGridPaging function we are calling ExtJs as given below


fnGridPaging=function()
{
//alert("hii");
Ext.QuickTips.init();
//alert('kjjkjkkjkjjk');
grid = ColdFusion.Grid.getGridObject("gridWorkingBillsDetailsPaging");

cm = grid.getColumnModel();
for(var intIndex=0; intIndex < cm.getColumnCount(); intIndex++)
{
var colId = cm.getColumnId(intIndex);
var col = cm.getColumnById(colId);
if(col.header == "Action")
col.sortable = false;
}

//rendering the columns
cm.setRenderer(0,renderSelect);
cm.setRenderer(8,renderPayAmt);
cm.setRenderer(6,renderStartDt);
cm.setRenderer(7,renderEndDt);
cm.setRenderer(1,renderTransSeq);
cm.setRenderer(2,renderClientTransRefId);
cm.setRenderer(3,renderFirstName);
cm.setRenderer(4,renderLastName);
cm.setRenderer(5,renderConfNum);
cm.setRenderer(9,renderCurrency);
cm.setRenderer(10,renderStatus);
// cm.setRenderer(0,renderSelectAll);
cm.setRenderer(11,renderAction);

var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);
//Create new PaginToolbar and render it to bbar (grid footer)
gbbar = new Ext.PagingToolbar({renderTo:bbar,
store: grid.store,
pageSize: 10,
displayInfo: true,
displayMsg: '<b>Showing {0} - {1} out of {2} Transactions</b>',
emptyMsg: "<b>No Record</b>",


items:[
'-', {
pressed: false,
enableToggle:false,
tooltip:'Click here to View All Transaction Details',
text: 'View All',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showGridAll// handler:showGridAll // should be replaced with your own function
},
'-', {
pressed: false,
enableToggle:true,
tooltip:'Click here to UnSelect Displayed Transactions',
text: 'UnSelect Displayed',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:unselectGridDisplayed// handler:selectGridDisplayed // should be replaced with your own function
},
'-', {
pressed: false,
enableToggle:true,
tooltip:'Click here to UnSelect All Transactions',
text: 'UnSelect All',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:unselectGridAll// handler:selectGridAll // should be replaced with your own function
}
]
});

}

Gary Schlosberg
1 Feb 2017, 6:14 AM
I'm afraid that using Ext JS to page a grid which wasn't created by Ext JS is not supported. Perhaps someone in the community has made this work and can help.

sabarigirish
1 Feb 2017, 6:58 AM
Hi,

If we have to create ExtJS Grid do we need to download the framework.Currently we are using ColdFusion 10.
is ExtJS 4 part of ColdFusion 10

this is the grid.js

Ext.onReady (function () {

var sampleData = [
[1,'Monkey D Luffy','Captain','I will become the pirate king'],
[2,'Roronoa Zoro','Swordman','Become the greatest swordman'],
[3,'Sanji','Cook','Find all blue'],
[4,'Usopp','Sniper','Become the greatest warrior'],
[5,'Nami','Navigator','Draw map of the world']
];


// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'id', type: 'int'},
{name: 'name'},
{name: 'position'},
{name: 'ambition'}
]
});


// load data
alert('inside');
store.loadData(sampleData);


// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'id',header: 'ID', width: 30, sortable: true, dataIndex: 'id'},
{header: 'Name', width: 100, dataIndex: 'name'},
{header: 'Position', width: 100, dataIndex: 'position'},
{header: 'Ambition', width: 250, dataIndex: 'ambition'}
],
stripeRows: true,
height:180,
width:500,
title:'Straw Hats Crew'
});


// render grid to the grid-example element (see p array-grid.html)
grid.render('top-grid');
});


in the exp.cfm the above js file is getting called but we are getting a blank page without grid
<!doctype html>
<html lang="en">
<head>
<title>Grid</title>


<script src="js/grid.js"></script>






</head>
<body>
<div id="top-grid"></div>


</body>
</html>

sabarigirish
1 Feb 2017, 7:06 AM
Hi,

Do we need to download ExtJS framework for creating ExtJS Grid
or is it part of ColdFusion 10

Gary Schlosberg
1 Feb 2017, 7:53 AM
I didn't realize it was included with ColdFusion 10. I'd say that is a question for the folks at ColdFusion. Perhaps they even have an override ready to make this work for you.