cakephp + extjs = b為null || ct為null

Question

我已經將網格分頁示例的完全相同的代碼從extjs站點復制到我的cakephp視圖，如下所示：

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為空

當我包含ext-base-debug.js和ext-all-debug.js時，我得到錯誤：

ct為null

在IE上我得到：

Dom無效

有沒有人遇到同樣的問題並有任何解決方案？

Answer 1

聽起來像缺少DOM元素，從它的外觀來看它在渲染調用中：

grid.render('topic-grid');

您可以刪除'topic-grid'參數，或在標記中創建帶有該ID的<div>元素。

Answer 2

b為空

可能，你會忘記在面板中使用用於div id和renderTo的相同id名稱。 ie <div id="ltGrid"/>和renderTo : 'ltGrid'