Question

On Click of a button, opens a window in which i have a form panel and a grid. Within the form I have some combo boxes, text box and a submit button. On clicking the submit button it should contact the database and get the values and then populate the grid columns. For a particular job id, there will be only one set of values that we get form the database.For reading the database query I am using “Ext.data.CFQueryReader”. Now I am getting an error “Ext.data.CFQueryReader is not a constructor”.
Since I am very new to ext js I am not sure of the code flow as I have been leveraging the code which is used in other module. So there will be some gaps in my code.
Please advice me on this. Below is the code snippet I am using for this page. Please advice me if there is any easy method other than this.
I am not sure if we require pagingtoolbar here. If pagingtoolbar is not used, how can we get the values?

var filterForm = new Ext.form.FormPanel({
        title       : 'Filters',
        floatable           : false,
        id          : 'filterForm',
        items       : [
        {
            xtype       : 'combo',
            id          :'Combo1',
            fieldLabel      :'Owner',
            valueField      :'ownerValue',
            displayField    :'ownerDisplay',
            value       :'ALL' 
        },
        {
            xtype       : 'combo',
            id          :'Combo2',
            fieldLabel      :'Status',
            valueField      :'statusValue',
            displayField    :'statusDisplay',
            value       :'ALL'
        },
        {
            xtype       : 'textfield',
            fieldLabel      : 'job Search',
            width       : 200,
            id          :'searchText'       
        }
       ],
       buttons: [
        {
            text    : 'Apply Filter(s)',
            id      : 'apply',
            handler : function(){
                loadJobs();
             }
        }
       ]

    });

var filterGrid = new Ext.grid.GridPanel({
        title   : 'List',   
        id      : 'list',
        store   : listStore,

        columns: [
            {
                header      : 'JOBID',
                width       : 70,
                dataIndex   : 'jobid',
                sortable    : true
            },
            {               
                header      : 'Description',
                id      : 'description',
                dataIndex   : 'description',
            },
            {               
                header      : 'Category',
                dataIndex   : 'category',
                width       : 100
            }   
            ]
              });

function loadJobs()
{
    pagingToolBar.displayMsg = "Displaying {0} - {1} of {2}";
    listStore.baseParams.jobid = '';
    pagingToolBar.changePage(1);

}

var pagingToolBar = new Ext.PagingToolbar({
    pageSize    : 20,
    id      : 'pagingToolbar',
    store   : listStore,
    displayInfo : true,
    displayMsg  : 'Displaying jobs {0} - {1} of {2}'
});

var listStore= new Ext.data.Store({
    url         : "/list.cfc",
    method      : 'POST',
    reader      : listReader,
    baseParams  : {
        method      : 'fetchList',
        returnFormat    : 'json',
        owner       : 'ALL',
        status      : 'ALL',
        jobidSearch     : '',
        jobid       : ''
    },
    listeners   : {
        beforeload  : function(store,options){
            store.baseParams.email = Ext.getCmp('Combo1').getValue();
            store.baseParams.status = Ext.getCmp('Combo2').getValue();
            store.baseParams.idSearch =Ext.getCmp('searchText').getValue();
        }
    }
});

var listReader = new Ext.data.CFQueryReader(
    {
        id          : 'jobid',
        totalProperty   : 'TOTALROWCOUNT'
    },
    [
        {   name    : 'jobid',mapping : 'JOBID',type : 'string'},
        {   name    : 'description',mapping : 'DESCRIPTION',type : 'string'},
        {   name    : 'category',mapping    : 'CATEGORY',type :'string'}        
   ]
);

Answer 1

Have you added relative path of .js file containig code of CFQueryReader in your .html file?

For example, I have added path of Pentaho Reader as follows

<script type="text/javascript" src="app/PentahoReader.js"></script>