Question

我对Sencha 2 Touch完全不熟悉。这是我玩它的第二天。

我有一个自定义类（app / view / Howdy.js）：

Ext.define('MyApp.view.Howdy', {
  extend: 'Ext.Panel',
  xtype: 'howdy', // <--- this creates the 'howdy' xtype reference right?
  requires: [
    'Ext.SegmentedButton'
  ],

  config: {
    fullscreen: true,
    html: ['Hello Word.'].join("")  
  }
});

我现在正试图在点击时将其加载到标签中：

Ext.define('MyApp.view.Main', {
   extend: 'Ext.tab.Panel',

   config: {
     fullscreen: true,
     tabBarPosition: 'bottom',

     items: [
        {
            title: 'TAB 1',
            iconCls: 'star',
            xtype: 'howdy', // <--- WHY IS THIS CRASHING MY APP?
        },
    ]
}
});

如果我删除TAB 1中的xtype声明并用html替换它一切正常。一旦我尝试将自定义视图加载到选项卡中，我得到的就是浏览器中的白色屏幕，控制台显示没有错误???

P.S是的，所有内容都已在App.js中正确设置：

views: ['Howdy','Main'],

请帮忙！

Answer 1

更新此线程的时间较晚，但解决方案只是从 MyApp.view.Howdy 中的配置中删除 fullscreen：true 声明。

Answer 2

我希望这会对你有所帮助：

MyApp.view.Howdy

Ext.define('MyApp.view.Howdy', {
  extend: 'Ext.Container',
  xtype: 'howdy',
  requires: [
    'Ext.SegmentedButton'
  ],

  config: {
    incoCls: 'star',
    title: 'TAB 1',

    html: ['Hello Word.'].join("")  
  }
});

MyApp.view.Main

Ext.define('MyApp.view.Main', {
   extend: 'Ext.tab.Panel',

   config: {
     fullscreen: true,
     tabBarPosition: 'bottom',

     items: [
        {xclass: 'MyApp.view.Howdy'},
    ]
}
});

Answer 3

您应该使用别名：widget.XTYPE

Ext.define('MyApp.view.Howdy', {
  extend: 'Ext.Panel',
  alias: 'widget.howdy', // <--- this creates the 'howdy' xtype reference right?
  requires: [
    'Ext.SegmentedButton'
  ],

  config: {
    fullscreen: true,
    html: ['Hello Word.'].join("")  
  }
});

Answer 4

有几件事。首先，如果您要立即添加xtype，则使用xtype定义类型...如果您尚未使用Ext.create定义它。如果您已经创建了它，那么您不需要它。创建面板时，每个项目都包含自身，标题，图标，所有内容的所有信息。然后，只需将项目添加到tabPanel：

var a = Ext.create('Ext.Panel',{
  iconCls:'star',
  title:'tab1',
  html:'tab one content'
});
var b = Ext.create('Ext.Panel',{
  iconCls:'star',
  title:'tab2',
  html:'tab two content'
});


var panel = Ext.create('Ext.TabPanel',{
    items:[a,b]
});

Sencha Touch 2.x - 如何将自定义视图加载到选项卡面板？使用xtype？

4 个答案: