(求高人解答)ExtJS 将一个gridPanel放到tablePanel时报错

Question

gridPanel放到tablePanel时，在这个tablePanel中还有一个toobar和一个bbar，我最开始是将这3个组件分开放，2个菜单组件放的时候都没问题，但是放gridPanel后，马上这整个页面全部报错（前面的tablePanel只是页面的下层），然后我又将2个菜单栏整合到gridPanel中，页面依旧报错但是这3个组件还是可以在页面上显示，只是每个页面多了东西（截图不好弄，故没有上传），然后我又用ExtDesigner来设计布局，然后将源码拷贝到项目中，问题依旧存在！！！！

Answer 1

//交退费
MyGridUi = Ext.extend(Ext.grid.GridPanel,{
    title: '交退费管理',
    width: 646,
    height: 489,
    frame: true,
    initComponent: function() {
        this.columns = [
            {
                xtype: 'gridcolumn',
                header: '交退费',
                sortable: true,
                resizable: true,
                width: 100,
                dataIndex: 'string'
            },
            {
                xtype: 'gridcolumn',
                header: '费用类型',
                sortable: true,
                resizable: true,
                width: 100,
                dataIndex: 'string'
            },
            {
                xtype: 'gridcolumn',
                header: '金额',
                sortable: true,
                resizable: true,
                width: 100,
                dataIndex: 'string'
            },
            {
                xtype: 'gridcolumn',
                header: '经办人',
                sortable: true,
                resizable: true,
                width: 100,
                dataIndex: 'string'
            },
            {
                xtype: 'gridcolumn',
                header: '时间',
                sortable: true,
                resizable: true,
                width: 100,
                dataIndex: 'string'
            }
        ];
        this.tbar = {
            xtype: 'toolbar',
            items: [
                {
                    xtype: 'button',
                    text: '添加',
                    handler:function(){
                     addForm.show();
                    }
                },
                {
                    xtype: 'button',
                    text: '删除'
                }
            ]
        };
        this.bbar = {
            xtype: 'paging',
            items: [
                {
                    xtype: 'label',
                    text: '预算金额:'
                },
                {
                    xtype: 'tbtext',
                    text: 'null'
                },
                {
                    xtype: 'label',
                    text: '决算金额:'
                },
                {
                    xtype: 'tbtext',
                    text: 'null'
                },
                {
                    xtype: 'label',
                    text: '已交金额:'
                },
                {
                    xtype: 'tbtext',
                    text: 'null'
                },
                {
                    xtype: 'label',
                    text: '未交金额:'
                },
                {
                    xtype: 'tbtext',
                    text: 'null'
                }
            ]
        };
        MyGridUi.superclass.initComponent.call(this);
    }
});GridUi = new MyGridUi();
这是用Ext designer做的界面源码，这部分应该没问题

Answer 2

/* 当前操作里的显示项 */
var operateTabs = new Ext.TabPanel({
activeTab : 0,
deferredRender : false,// 延迟渲染
layoutOnTabChange : true,// ****选项卡改变同时改变布局
border : false,
items : [{
id : 'jilu',
title : '跟踪记录',
closable : false,
layout : 'fit',
items : jilu
},{
id : 'huifang',
title : '工程回访',
closable : false,
layout : 'fit',
items : visitForm
}, {
id : 'delPlan',
title : '工程放弃',
closable : false,
layout : 'fit',
items : del
}, {
id : 'changOffer',
title : '更改预约',
closable : false,
layout : 'fit',
items : chang
},{
id : 'costMoney',
title : '交退费',
closable : false,
layout : 'fit',
items:GridUi
}]
});
/* 下层主标签窗体 */
var mainTabPanel = new Ext.TabPanel({
maximizable : true,
activeTab : 0,
border : false,
height : 300,
items : [{
title : '当前操作',
iconCls : 'order_solution',
layout : 'fit',
items : operateTabs
}, {
title : '工程日志',
iconCls : 'order_activites',
layout : 'fit',
items : grid
}]
});
然后就是这部分了，在mainPanel里面的第一个items加入operateTabs，operateTabs里面的items加入GridUi，就是这样的流程，代码实在是看不处哪里错了。可能是以前别人写的代码对我现在的有影响吧，或者是我写错了。希望高人能帮忙解答下，困扰很久了！

Answer 3

建议分段调试，我以前做过EXT项目，放在JSP页面里没问题，放在一个JS页面里就不行了，后来是发现少了个分号，那叫一个痛苦

Answer 4

......恶心了，将界面封装，少了灵活的自由行以及个性化，Ext将来也许在大型的项目中会比较受青睐，小项目我个人觉得完全不必用，就算用嘴原始的html+css我都觉得比Ext好，不过还是谢谢各位了