GridPanel作为tabPanel的项目

时间:2011-06-23 20:30:39

标签: javascript sencha-touch extjs tabpanel gridpanel

我很难知道我的语法是否正确。从另一个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命名为{{1 }}?

非常感谢。

1 个答案:

答案 0 :(得分:2)

没有内置的GridPanel附带Sencha Touch。所以,Ext.grid.GridPanel在这里不起作用。但是,您可以使用here中的Simoen的TouchGrid扩展名。

所有源代码均可用here