Question

I have copied the exact same code of the grid paging example from the extjs site to my cakephp view which is as follows:

Ext.onReady(function(){
// create the Data Store
var store = new Ext.data.JsonStore({
    root: 'topics',
    totalProperty: 'totalCount',
    idProperty: 'threadid',
    remoteSort: true,

    fields: [
        'title', 'forumtitle', 'forumid', 'author',
        {name: 'replycount', type: 'int'},
        {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
        'lastposter', 'excerpt'
    ],

    // load using script tags for cross domain, if the data in on the same domain as
    // this page, an HttpProxy would be better
    proxy: new Ext.data.ScriptTagProxy({
        url: 'http://extjs.com/forum/topics-browse-remote.php'
    })
});
store.setDefaultSort('lastpost', 'desc');


// pluggable renders
function renderTopic(value, p, record){
    return String.format(
            '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
            value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
    return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}

var grid = new Ext.grid.GridPanel({
    width:700,
    height:500,
    title:'ExtJS.com - Browse Forums',
    store: store,
    trackMouseOver:false,
    disableSelection:true,
    loadMask: true,

    // grid columns
    columns:[{
        id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
        header: "Topic",
        dataIndex: 'title',
        width: 420,
        renderer: renderTopic,
        sortable: true
    },{
        header: "Author",
        dataIndex: 'author',
        width: 100,
        hidden: true,
        sortable: true
    },{
        header: "Replies",
        dataIndex: 'replycount',
        width: 70,
        align: 'right',
        sortable: true
    },{
        id: 'last',
        header: "Last Post",
        dataIndex: 'lastpost',
        width: 150,
        renderer: renderLast,
        sortable: true
    }],

    // customize view config
    viewConfig: {
        forceFit:true,
        enableRowBody:true,
        showPreview:true,
        getRowClass : function(record, rowIndex, p, store){
            if(this.showPreview){
                p.body = '<p>'+record.data.excerpt+'</p>';
                return 'x-grid3-row-expanded';
            }
            return 'x-grid3-row-collapsed';
        }
    },

    // paging bar on the bottom
    bbar: new Ext.PagingToolbar({
        pageSize: 25,
        store: store,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No topics to display",
        items:[
            '-', {
            pressed: true,
            enableToggle:true,
            text: 'Show Preview',
            cls: 'x-btn-text-icon details',
            toggleHandler: function(btn, pressed){
                var view = grid.getView();
                view.showPreview = pressed;
                view.refresh();
            }
        }]
    })
});

// render it
grid.render('topic-grid');

// trigger the data store load
store.load({params:{start:0, limit:25}});});

Now, when I am including the normal ext-base.js and ext-all.js I am getting the error:

b is null

and when I include ext-base-debug.js and ext-all-debug.js I get the error:

ct is null

and on IE I am getting:

Dom is null

Has anybody faced the same problem and has any solution for it?

Answer 1

Sounds like a DOM element is missing, and from the looks of it its in your render call:

grid.render('topic-grid');

You can remove the 'topic-grid' parameter, or create a <div> element with that ID in your markup.