PDA

View Full Version : OnClick event not firing for cfgrid



Pankaj Kumar M
24 Mar 2016, 6:22 AM
onClick function is not firing here. I need to get the selections in the grid when the page is navigated to the next page.

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
}

]
});
Ext.PagingToolbar.override
({
// private
updateInfo : function(){


var store = this.store;
var pageData = this.getPageData();
var count, msg;
var count = store.getTotalCount()-Math.ceil(store.getTotalCount() / this.pageSize);
var from = (( ((Math.ceil((this.cursor+this.pageSize)/this.pageSize)) - 1) * this.pageSize) -(Math.ceil((this.cursor+this.pageSize)/this.pageSize))) + 2;
var to=Math.min( ((Math.ceil((this.cursor+this.pageSize)/this.pageSize)) * this.pageSize)-(Math.ceil((this.cursor+this.pageSize)/this.pageSize)), count);
var pageCount=Math.ceil(store.getTotalCount() / this.pageSize);

if (this.displayItem) {
if (count === 0) {
msg = this.emptyMsg;
} else {
msg = '<b>Showing '+from+' - '+to+' out of '+count+' Transactions</b>';
}
this.displayItem.update(msg);
}
},
onClick : function(which){
alert('sdf');

}
});

Gary Schlosberg
24 Mar 2016, 6:58 AM
I recommend posting your code within CODE tags so that it isn't so difficult to read, and posting your questions to the correct (Ext JS 4, Ext JS 5, Ext JS 6) forum rather than the Community Discussions forum. Which specific version of Ext JS is this? Are you creating your grid outside of Ext JS?

Pankaj Kumar M
27 Mar 2016, 10:10 PM
I'm using Ext JS 4.1.0

Gary Schlosberg
28 Mar 2016, 2:25 PM
Can you post the code that generates your grid?

Pankaj Kumar M
29 Mar 2016, 12:31 AM
I have to retain the selections in the grid. While navigating through pages.

If i select a row in page 1 of the grid. now i navigate to page 2. when i come back to page 1 , the selection should be retained.



// cfgrid
<cfgrid format="html" name="gridWorkingBillsDetailsPaging" selectOnLoad="false" textColor="##000080" colHeaderTextColor="##000080" colHeaderAlign="right" colHeaderFont="verdana" colHeaders="yes" colHeaderBold="yes" width="1100"
colHeaderFontSize="12" align="center" autowidth="true" multirowselect="true"
selectmode="row" pagesize="10" bind="cfc:cfc.workingbilldetails.getWorkingBillDetails({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})" >
<cfgridcolumn name="TRANS_ID" header="Transaction Id" width="80" headerbold="true" />
<cfgridcolumn name="REF_ID" header="Ref Id" width="100" 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="60" headerbold="true" />
<cfgridcolumn name="START_DT" header="Start Date" width="60" headerbold="true" />
<cfgridcolumn name="END_DT" header="End Date" width="60" headerbold="true" />
<cfgridcolumn name="PAY_AMOUNT" header="Amount" dataAlign="right" width="80" headerbold="true" />
<cfgridcolumn name="CURRENCY" header="Currency" width="50" headerbold="true" />
<cfgridcolumn name="STATUS" header="Status" width="50" headerbold="true" />
<cfgridcolumn name='action' header='Action' width="125" headerbold="true" />
</cfgrid>

// ajax
<cfset ajaxOnLoad("fnGridPaging")>

// javascript
fnGridPaging=function()
{
grid = ColdFusion.Grid.getGridObject("gridWorkingBillsDetailsPaging");
//overwrite existing grid footer with new div, Ext.id() will assign unique id to footer
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
}

]
});
//Overriding the display message in the toolbar
Ext.PagingToolbar.override
({

// private
updateInfo : function(){


var store = this.store;
var pageData = this.getPageData();
var count, msg;
var count = store.getTotalCount()-Math.ceil(store.getTotalCount() / this.pageSize);
var fromRecord = (( ((Math.ceil((this.cursor+this.pageSize)/this.pageSize)) - 1) * this.pageSize) -(Math.ceil((this.cursor+this.pageSize)/this.pageSize))) + 2;
var toRecord=Math.min( ((Math.ceil((this.cursor+this.pageSize)/this.pageSize)) * this.pageSize)-(Math.ceil((this.cursor+this.pageSize)/this.pageSize)), count);
var pageCount=Math.ceil(store.getTotalCount() / this.pageSize);

if (this.displayItem) {
if (count === 0) {
msg = this.emptyMsg;
} else {
msg = '<b>Showing '+fromRecord+' - '+toRecord+' out of '+count+' Transactions</b>';
}
this.displayItem.update(msg);
}
}
});
}

Gary Schlosberg
29 Mar 2016, 12:49 PM
So your grid is not created with Ext JS? That makes it very difficult to determine why something might not be working. Are you sure your PagingToolbar code is not Ext JS 3?

Please pardon my ignorance, but why not use Ext JS to create the grid?