javascript - cakephp + extjs = b 为空 || ct 为空

Question

我已将网格分页示例的完全相同的代码从 extjs 站点复制到我的 cakephp View ，如下所示:

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}});});

现在，当我包含正常的 ext-base.js 和 ext-all.js 时，我收到错误:

b is null

当我包含 ext-base-debug.js 和 ext-all-debug.js 时，出现错误:

ct is null

在 IE 上我得到:

Dom is null

有人遇到过同样的问题并有解决办法吗？

Answer 1

听起来好像缺少 DOM 元素，从它的外观来看，它在渲染调用中:

grid.render('topic-grid');

您可以删除 'topic-grid'参数，或创建 <div>标记中具有该 ID 的元素。