GridPanel 作为 tabPanel 的项目答案

【问题标题】：GridPanel as item of tabPanelGridPanel 作为 tabPanel 的项目
【发布时间】：2011-06-23 20:30:39
【问题描述】：

我不知道我在语法上是否正确设置了此设置。从另一个thread，我了解将 GridPanel 添加到 tabBar 项目，我在下面这样做。在我的 App.js 中，我定义了一个从 ExtJS 示例 (here) 复制的网格。

var grid = new Ext.grid.GridPanel({
    // Details can be seen at
    // http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.Component?class=Ext.grid.GridPanel
});

在下面，我创建了我的应用程序的一个实例：

appname.App = Ext.extend(Ext.TabPanel, {

fullscreen: true,

tabBar: {
    ui: 'gray',
    dock: 'bottom',
    layout: { pack: 'center' }
},

cardSwitchAnimation: false,

initComponent: function() {

    if (navigator.onLine) {

        // Add items to the tabPanel
        this.items = [{
            title: 'Tab 1',
            iconCls: 'tab1',
            xtype: 'tab1',
            pages: this.accountPages
        }, {
            title: 'Tab 2',
            iconCls: 'tab2',
            xtype: 'tab2',
            pages: this.accountPages
        },
        grid];
    } else {
        this.on('render', function(){
            this.el.mask('No internet connection.');
        }, this);
    }

    appname.App.superclass.initComponent.call(this);
}

});

该应用程序通常可以正常加载，但添加 grid 后，它会中断并且没有加载。

从语法上讲，我是否应该在应用实例化中定义网格，例如 A)grid: ...、B)this.grid = new ... 或 C)，因为我将它作为常规的 var 命名为 grid？

非常感谢。

【问题讨论】：

在高层次上，您的方法似乎没有错。两个sn-ps是在同一个js文件吗？
事实上是这样。理想情况下，我会重构。我只是想测试将网格实现为选项卡项。
您的错误控制台中是否出现错误？你能验证网格面板是否真的被创建了吗？
是 Sencha Touch 应用程序还是 ExtJS 应用程序？
@Swar：这是 Sencha Touch（我会修复标签）。 @joekrell：好电话。我会看看它是否真的被实例化了。

标签： javascript sencha-touch extjs tabpanel gridpanel

【解决方案1】：

Sencha Touch 没有内置的 GridPanel。所以，Ext.grid.GridPanel 在这里不起作用。但是，您可以使用来自 here 的 Simoen 的 TouchGrid 扩展。

所有源代码都可以在here获取。

【讨论】：