Sencha Touch 2。如何将自定义视图加载到选项卡面板中?使用xtype吗?

I am completely new to Sencha 2 Touch. This is my second day playing with it.

我对Sencha 2 Touch完全陌生。这是我第二次玩它。

I have a custom class (app/view/Howdy.js):

我有一个自定义类(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("")  
  }
});

and I am now trying to load it into a tab when clicked:

我现在试着把它加载到一个选项卡中点击:

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?
        },
    ]
}
});

If I remove the xtype declaration inside TAB 1 and replace it with an html everything works fine. As soon as I try and load my custom view into the tab all I get is a white screen in my browser and console shows no errors ???

如果我在选项卡1中删除了xtype声明，并将其替换为html，那么一切正常。当我尝试将我的自定义视图加载到选项卡中时，我的浏览器和控制台中的白色屏幕显示没有错误?

P.S Yes everything is setup correctly already in App.js:

P。是的，所有的东西都正确地安装在App.js中:

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

HELP PLEASE!

请帮助!

4 个解决方案

#1

Late to update this thread but the solution was simply to remove the fullscreen: true declaration from inside the config in MyApp.view.Howdy.

更新这个线程的时候很晚，但是解决方案只是移除fullscreen: MyApp.view.Howdy中的config中的true声明。

#2

I hope that this will help you:

MyApp.view.Howdy

我希望这能帮助你: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'},
    ]
}
});

#3

You should use alias: widget.XTYPE

您应该使用别名: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("")  
  }
});

#4

A couple of things. First, xtype is what you use to define the type if you're adding it instantly...if you haven't already defined it with Ext.create. If you've already created it, then you don't need it. When creating panels, each item contains all the info for itself, title, icon, everything. Then, just add the item(s) into a tabPanel:

几件事情。首先，xtype是用来定义类型的，如果您立即添加它…如果您还没有使用Ext.create来定义它。如果您已经创建了它，那么您就不需要它了。在创建面板时，每个项目都包含了自己的所有信息，标题、图标和所有内容。然后，将项目(s)添加到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]
});

#1