Sencha Touch 2.x - カスタムビューをタブパネルに読み込む方法xtypeを使用しますか？

Question

私は全く新しいSencha 2 Touchです。これは私の2日目の演奏です。

私はカスタムクラス（アプリ/ビュー/ Howdy.js）を持っている：私は削除した場合

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

：

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("") 
    } 
}); 

と、私は今クリックしたときにタブにロードしようとしていますTAB 1内のxtype宣言をhtmlで置き換えると、すべて正常に動作します。私が試してみると、私のカスタムビューをタブにロードすると、ブラウザには白い画面が表示され、コンソールにエラーは表示されませんか？

P.SはいすべてがApp.jsに正しくすでにセットアップされている：

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

助けてください！ 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 1

このスレッドを更新するには遅くなりましたが、解決策は単にフルスクリーンを削除することでした：true config内のm MyApp.view.Howdyです。

Answer 2

エイリアスを使用する必要があります。最初に、xtypeは、即座に追加する場合に型を定義するために使用するものです。もしあなたが既にExt.createで定義していなければ、型を定義します。既に作成している場合は、必要ありません。パネルを作成するとき、各項目は、それ自身、タイトル、アイコン、すべてに関するすべての情報を含みます。すると、ちょうどタブパネルに項目（複数可）を追加します。

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

Answer 3

物事のカップル：

Answer 4

私は、これはあなたを助けることを願っています：

MyApp.view.Howdy

をMyApp.view.Main

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

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

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

を

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

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

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