<link rel="stylesheet" href="../../ext3/ext-3.0.0/resources/css/ext-all.css" type="text/css" />
<script type="text/javascript" src="../../ext3/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext3/ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="../../ext3/ext-3.0.0/src/data/CFJsonReader.js"></script>

Ext.onReady(function(){

    var user_colModel = new Ext.grid.ColumnModel([
        {header: "ARTISTID", width: 75, sortable: true, dataIndex: 'ARTISTID'},
        {header: "FIRSTNAME", width: 150, sortable: true, dataIndex: 'FIRSTNAME'},
        {header: "LASTNAME", width: 150, sortable: true, dataIndex: 'LASTNAME'}
    ]);

    var myDataModel = [
        {name: 'ARTISTID', mapping: 'ARTISTID', type:'int'},
        {name: 'FIRSTNAME', mapping: 'FIRSTNAME', type:'string'},
        {name: 'LASTNAME', mapping: 'LASTNAME', type:'string'}
        ];

    var myCFReader =  new Ext.data.CFJsonReader(myDataModel,{id:'ARTISTID'});

    var user_DS = new Ext.data.Store({
            url: 'http://localhost:8500/cfdocs/testgrid/cfc/grd.cfc?method=getUserListForGrid&returnFormat=json',
            reader: myCFReader,
            listeners: {
                loadexception: function(proxy, store, response, o) {
                    console.log("Response Text?"+response.responseText);
                    console.log("dgStore Message \n"+proxy+"\n"+store+"\n"+response+"\n"+e.message);
                },
                load: function(){
                    console.log('load Worked!');
                }
            }
    });
    user_DS.load();

    // ****
    // Bringing it all together in the Grid
    // ****
    var user_grid = new Ext.grid.GridPanel({
        ds: user_DS,
        cm: user_colModel,
        anchor:'100% 100%',
        width:400,
        height:400,
        //autoheight: true,
        title:'Current System Users',
        stripeRows: 'true'
    });

    user_grid.render('user_grid');
});

<cfcomponent displayName="User" hint="Get artist names">  

    <cffunction name="getUserList" access="public" returnType="query" output="false"
                hint="Returns all the users.">
        <cfset var qGetUsers = "">  

        <cfquery name="qGetUsers" datasource="cfartgallery">
            SELECT artistid, LastName, FirstName
            FROM app.artists
        </cfquery>
        <cfreturn qGetUsers>
    </cffunction>

    <cffunction name="getUserListForGrid" access="remote" output="false"
                hint="Returns all the users in the format for the JSON userList grid.">
        <cfset var qGetUsersForGrid = "">
        <cfset var qUserList = getUserList()>

        <cfquery name="qGetUsersForGrid" datasource="cfartgallery" dbtype="query">
            SELECT artistid, LastName, FirstName
            FROM app.artists
        </cfquery>

        <cfreturn queryConvertForGrid(qGetUsersForGrid, 1, qGetUsersForGrid.recordcount)>
    </cffunction>
</cfcomponent>

Ext.data.CFJsonReader = function(recordType, meta){
    this.meta = meta || {};
    this.recordType = Ext.data.Record.create(recordType);
};

Ext.extend(Ext.data.CFJsonReader, Ext.data.DataReader, {
    read: function(response){
        var json = response.responseText;
        var o = eval("(" + json + ")");
        if (!o) {
            throw {
                message: "CFJsonReader.read: Json object not found"
            };
        }
        if (o.metaData) {
            delete this.ef;
            this.meta = o.metaData;
            this.recordType = Ext.data.Record.create(o.metaData.fields);
            this.onMetaChange(this.meta, this.recordType, o);
        }
        return this.readRecords(o);
    },

    // private function a store will implement
    onMetaChange: function(meta, recordType, o){

    },
    readRecords: function(json){
        var aRecords = [];
        var cList = json.QUERY.COLUMNS;
        var cData = json.QUERY.DATA;
        var idField = this.meta.id;

        for (var i = 0; i < cData.length; i++) {
            var oRecord = {};

            for (var j = 0; j < cList.length; j++) {
                oRecord[cList[j]] = cData[i][j];
            }
            if (idField) {
                var id = cData[i][cList.indexOf(idField)];
                aRecords.push(new Ext.data.Record(oRecord, id));
            } else {
                aRecords.push(new Ext.data.Record(oRecord));
            }
        }
        return {
            success: true,
            records: aRecords,
            totalRecords: json.TOTALROWCOUNT
        };
    }
});