Genius / Jedi guidance needed on A Coldfusion Grid Dilema

**Ashford80** · 24 Jul 2012 1:26 AM

Chaps,

Hope you're all well.

Sorry to trouble you like this, but I was wondering if you could give me some advice on a problem which I simply can't iron out?

The below code is for a Coldfusion 10 Ext 3.1 Grid. Using Firebug I can rule out any reported errors; clicking on the the console tab within Firebug I can see the returned query but it simply doesn't populate the Grid itself.

Can you boys see what I'm doing wrong?

All the best,

D.

Index.cfm

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="../CFIDE/scripts/ajax/resources/ext/css/ext-all.css" />
<script src="../CFIDE/scripts/ajax/ext/adapter/ext/ext-base.js"></script>
<script src="../CFIDE/scripts/ajax/ext/ext-all-debug.js"></script>
<script src="functions.js"></script>
</head>
<body>
<!--- Grids ---->
<div id="top-grid"></div>
</body>
</html>

functions.js

Code:

*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){
    
    //This function will be called on a succesful load, it can be used for debugging or perform on load events.
    function testStore(st,recs,opts){        
        //console.info('Store count = ', store.getCount());            
    }
    
    //This is our JSON record set which defines what kind of data will be present in the JSON passed back from our component.
    var users = Ext.data.Record.create([
    {name:'POCODE',type:'int'},
    {name:'ENTEREDBY',type:'string'},
    {name:'DOCUMENTDATE',type:'string'},
    {name:'SUPPLIERNAME',type:'string'},
    {name:'STATUS',type:'string'},
    {name:'DELIVERYREQUESTEDDATE',type:'string'},
    ])
    
 // create the Data Store
    var store = new Ext.data.JsonStore({
        totalProperty:'DATASET',//This is how many total records are there in the set.
        root:'ROWS',//The Root of the data.
        url:'http://intranet.kentpharm.co.uk/extjsbook2/getStuff.cfc',//Where we get it from
        remoteSort:true,//We will sort server side
        //Base Params are parameters passed in during the first call
        baseParams:{
                method: 'getPos',
                returnFormat: 'JSON',
                start: '0',
                limit: '50'
            },
        //We define the JSON Reader for the data. We also need to set the totalProperty, root and idProperty for the dataset here.
        reader: new Ext.data.JsonReader({
                totalProperty:'DATASET',
                root:'ROWS',
                idProperty:'POCODE'          
            },users
        ),
        //Fields read in
        fields: [
            'POCODE','ENTEREDBY','DOCUMENTDATE','SUPPLIERNAME','STATUS','DELIVERYREQUESTEDDATE'
        ],
        //We specify the listeners to be called during load or another one during loadexception. good for debugging purposes.
        listeners: {
                load:{
                    fn: testStore
                },
                loadexception: {
                    fn: function() {
                        //console.log(arguments);
                        //console.info("Response Text?"+response.responseText);
                        //console.log("dgStore Message \n"+proxy+"\n"+store+"\n"+response+"\n"+e.message);
                    }
                }
            }
    });
   //We setup the Grid
      var grid = new Ext.grid.GridPanel({
        width:750,
        height:500,              
        title:'POs',
        store: store,
        trackMouseOver:true,
        disableSelection:false,
        loadMask: true,
        stripRows: true,
        collapsible: true,
        // grid columns
        columns:[
        new Ext.grid.RowNumberer(),//This will do numbering on the grid for us
        {
            id: 'users', 
            header: "First Name",
            dataIndex: 'POCODE',
            width: 125,
            hidden:false,            
            sortable: true
        },{
            header: "Last Name",
            dataIndex: 'ENTEREDBY',
            width: 125,
            hidden: false,
            sortable: true
        },{
            header: "Display Name",
            dataIndex: 'DOCUMENTDATE',
            width: 200,
            hidden: false,
            sortable: true
        },{
            header: "User Name",
            dataIndex: 'SUPPLIERNAME',
            width: 125,
            hidden: false,
            sortable: true
        },{
            header: "Contact",
            dataIndex: 'STATUS',
            width: 100,
            hidden: false,
            sortable: true
        },{
            header: "Delivery Requested Date",
            dataIndex: 'DELIVERYREQUESTEDDATE',
            width: 100,
            hidden: false,
            sortable: true
        }],


       // paging bar on the bottom
       bbar: new Ext.PagingToolbar({
            pageSize: 50,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying POs {0} - {1} of {2}',
            emptyMsg: "No POs to display"            
        })
    });
    
    //Default Sort set for the grid load call
    store.setDefaultSort('ENTEREDBY','ASC');
 
    // trigger the data store load
    store.load();
    
       // render it
    grid.render('top-grid');


});

Component.cfc

Code:

<cfcomponent output="false">
    <cffunction name="getPos" access="remote" returnFormat="JSON" output="false">
            <cfargument name="limit" default="50">
            <cfargument name="start" default="1">
            <cfargument name="sort" default="enteredBy">
            <cfargument name="dir" default="ASC">
            
            <cfset var arrUsers = ArrayNew(1)>
            
            <!--- ExtJS starts the dataset at 0, we increment it by 1 to get proper start and end rows --->
            <cfset Arguments.start = Arguments.start + 1>
            
            <cfquery name="qPos" datasource="tree">
                 SELECT DISTINCT ' '+(POPurchaseOrder.reference) AS POCode, POPurchaseOrder.enteredBy, POPurchaseOrder.documentDate, Supplier.name AS SupplierName, POStatusDefinition.name AS Status, POPurchaseOrder.deliveryRequestedDate
                FROM POPurchaseOrder
                JOIN Supplier ON POPurchaseOrder.mySupplier = Supplier.oid
                JOIN POStatusDefinition ON POPurchaseOrder.myStatus = POStatusDefinition.oid
                JOIN POPOINLineItem ON POPurchaseOrder.oid = POPOINLineItem.myPODocument
                  WHERE POPurchaseOrder.mySupplier = Supplier.oid
                  AND POStatusDefinition.name IN ( 'Entered')
                ORDER BY #Arguments.sort# #Arguments.dir#
            </cfquery>
            
            <!--- For the Array --->
            <cfset i = 1>
            
            <!--- Get the end record --->
            <cfset end = ((Arguments.start) + Arguments.limit)-1>
            
            <cfloop query="qPos" startrow="#Arguments.start#" endrow="#end#">
                <cfset stcPos = StructNew()>
                <cfset stcPos.POCODE = #qPos.POCode#>
                <cfset stcPos.ENTEREDBY = #qPos.enteredBy#>
                <cfset stcPos.DOCUMENTDATE = #qPos.documentDate#>
                <cfset stcPos.SUPPLIERNAME = #qPos.SupplierName#>
                <cfset stcPos.STATUS = #qPos.Status#>
                <cfset stcPos.DELIVERYREQUESTEDDATE = #qPos.deliveryRequestedDate#>
                <cfset arrUsers[i] = stcPos>
                <cfset i = i + 1>            
             </cfloop>
             
             <!--- Final JSON return --->
             <cfset stcReturn = {ROWS=arrUsers,DATASET=#qPos.RecordCount#}>
        
        <cfreturn stcReturn>
    </cffunction>
</cfcomponent>

**brookd** · 1 Aug 2012 3:37 PM

I don't see anything wrong...

Try...

Give your grid and ID (or just find the generated id), and in the fb console write Ext.getCmp('mygridid').getStore().data and confirm your store is populated with data. Is it?

If it is, try simplifing your column config and record to only include one field or two. Drop the rowNumberer() (that might be actually a good place to start), and see if that helps. Then add the columns back in one by one. Basically just simplify things to help debugging.

Genius / Jedi guidance needed on A Coldfusion Grid Dilema

Thread Tools

Search Thread

Display

Genius / Jedi guidance needed on A Coldfusion Grid Dilema

Genius / Jedi guidance needed on A Coldfusion Grid Dilema