GridPanel 作为 tabPanel 的项目

Posted 2023-02-26

【中文标题】GridPanel 作为 tabPanel 的项目

【英文标题】：GridPanel as item of 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：好电话。我会看看它是否真的被实例化了。

【参考方案1】：

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

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