Object doesn't support property or method 'AddFill'

Question

I am having a problem with my programs Coldfusion Grid's on multiple pages, where the grids will not display. Originally we were getting an "'EXT' is undefined error", however on updating our scripts file we are now getting an "Object doesn't support property or method 'AddFill'". I am fairly new to this program, and we do not have access to any of the old developers to ask questions, however from what I can gather we are using ext.PagingToolbar.AddFill() to add extra buttons to a custom toolbar below the cfgrid.

My question for you all is what can I do to the code below to correct the grid not displaying?

CFGRID Code:

<cfgrid name="userGrid"
                        format="html"
                        pagesize="20"
                        preservePageOnSort="true"
                        bind="cfc:auto_report.UserService.getAllUsers({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},'#session.cycle#','#session.user_display#',{search_userid@keyup},{search_fname@keyup},{search_lname@keyup},{search_org})"
                        sort="true"
                        stripeRows="true">
                    <cfgridcolumn name="userId" header="User Id" width="200" />
                    <cfgridcolumn name="fname" header="First Name" width="150" />
                    <cfgridcolumn name="lname" header="Last Name" width="150" />
                    <cfgridcolumn name="org_name" header="Org Name" width="150" />
                    <cfgridcolumn name="email" header="Email" width="200" />
                    <cfgridcolumn name="access_level" header="Permissions" width="140" />
                    <cfgridcolumn name="activity_status" header="Active" />
                    <cfgridcolumn name="locked" header="Locked" />
                </cfgrid>

Page Header JS:

function initGrid(){
//grid 
var grid = ColdFusion.Grid.getGridObject("userGrid");
// grid data
var ds = grid.getStore();
ColdFusion.Grid.hideBottomToolbar('userGrid');

    // number of records display
    var FtrPge = new Ext.PagingToolbar ({
        renderTo: grid.bbar,
        pageSize: 20,
        store: ds,
        displayInfo: true,
        displayMsg: '<font color="black">Now Showing Grid Rows {0}-{1}&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;Total Grid Rows Returned: {2} </font>&nbsp;',
        emptyMsg: "No Matching Data Found"
        });
        FtrPge.addFill();
        FtrPge.addFill();
        FtrPge.doLayout();
        grid.syncSize()

        //double click
        grid.on("rowdblclick", showUserForm);
        //var updStyl = setActiveStyleSheet("A");

    //new user form button
    FtrPge.add ('-', {
        pressed: false,
        enableToggle:false,
        text: '&nbsp;&nbsp;&nbsp;',
        icon:'/MPPT/images/icon-addNew.gif',
        cls: 'x-btn-text-icon',
        tooltipType: 'title',
        tooltip: 'Add New User',
        handler:newUser});
    FtrPge.doLayout();

    //permissions form button
    FtrPge.add ('-', {
        pressed: false,
        enableToggle:false,
        text: '&nbsp;&nbsp;&nbsp;',
        icon:'/MPPT/images/icon-EditPermission.png',
        cls: 'x-btn-text-icon',
         tooltipType: 'title',
         tooltip: 'Permissions Update: By Group',
        handler:newPermission});
    FtrPge.doLayout();

}

Edit: Coldfusion 2016 and jsEXT 4.1

Answer 1

The problem seems to be that, starting with extjs version 4.0, there were significant changes made to the grid so there is no longer an Ext.PagingToolbar object with an addFill() method. Instead, to add fill you would use the Ext.toolbar.PagingToolbar with the add() method like so:

Ext.toolbar.PagingToolbar.add('->');

See ExtJS 4.0 Docs | Ext.toolbar.PagingToolbar for reference.