Results 1 to 6 of 6

Thread: OnClick event not firing for cfgrid

  1. #1

    Default OnClick event not firing for cfgrid

    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
    handlerhowGridAll// handlerhowGridAll // 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');

    }
    });
    Thanks,

    Pankaj Kumar M

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    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?

  3. #3

    Default

    I'm using Ext JS 4.1.0
    Thanks,

    Pankaj Kumar M

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Can you post the code that generates your grid?

  5. #5

    Default

    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.

    Code:
    // 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);
            }
        }
        });               
      }
    Thanks,

    Pankaj Kumar M

  6. #6
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    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?

Similar Threads

  1. Replies: 0
    Last Post: 22 Mar 2016, 3:17 AM
  2. onClick event is not firing in iOS
    By taher.baderkhan in forum Sencha Touch 2.x: Discussion
    Replies: 1
    Last Post: 25 Feb 2012, 8:47 AM
  3. Firing Onclick Event Doesnt call Eventhandler
    By sajjan.sarkar in forum Community Discussion
    Replies: 1
    Last Post: 1 Sep 2011, 11:47 AM
  4. checkbox listener firing on load- need to fire onClick?
    By wshpoon in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 16 Jun 2010, 6:23 PM
  5. TreeItem OnClick Event not firing
    By goeritz in forum Ext GWT: Help & Discussion (1.x)
    Replies: 7
    Last Post: 18 Sep 2008, 1:59 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •