1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    1
    Vote Rating
    0
    Ashford80 is on a distinguished road

      0  

    Default Genius / Jedi guidance needed on A Coldfusion Grid Dilema

    Genius / Jedi guidance needed on A Coldfusion Grid Dilema


    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>

  2. #2
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    256
    Vote Rating
    1
    brookd is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1