1

Sencha Touch 2にMVCマルチアイテムとページ画像カルーセルがあります。これは、initのビューポートに追加するとそれ自体で完全に機能します。

しかし、私が今抱えている問題は、それを私のタブパネルスタイルのアプリにどのように適応させるかです。特定のタブをクリックすると起動するコントローラーのinitまたは（推測では）どこにコードを配置する必要があるのか​​、少しわかりません。私のタブパネルスタイルのアプリはGithub（Sencha touch 2ボイラープレートテンプレート）からダウンロードされました。

私の作業中のMVCカルーセルは、app.jsで次のように呼び出します。

  controllers: ['Main'], 
  views: ['Carousel', 'Page'], 
  stores: ['Thumbnails'], 
  models: ['Thumbnail'], 

  launch: function () {
var carousel = Ext.create('Ext.Carousel');
Ext.Viewport.add(carousel);

Ext.getStore('Thumbnails').load(function (apps) {
  var cols = 4, rows = 4; // todo: change for tablets
  var page;
  var btn;
  var iPage = 0;
  var iApp = 0;
  var x = 1, y = 1, z = 0;
  var row, grid, bottomrow;
  var firstpage = 0;

など....読みやすさのためにコードをカットしました。

基本的に、このカルーセルは、最初はビューポートに表示されるのではなく、タブパネルの2番目のタブに表示されるようにします。おそらく、タブパネルのそのタブにいるときに起動するコントローラーに動作する起動コードが必要ですか？これに取り組む最善の方法がわかりません。

これが私のタブパネルアプリの起動機能です。

    launch: function() {
    Ext.create('TCApp.view.Viewport', {fullscreen: true});

//ビューポートの作成後にこの機能する起動コードを追加しようとしましたが、コントローラーにあるはずですか？しかし、私はそれについてどうやって行くのかわかりません...

    var carousel = Ext.create('Ext.Carousel');  

    Ext.Viewport.add(carousel);


   Ext.getStore('Thumbnails').load(function (apps) {
 var cols = 4, rows = 4; // todo: change for tablets
 var page;
 var btn;
 var iPage = 0;
 var iApp = 0;
 var x = 1, y = 1, z = 0;
 var row, grid, bottomrow;
 var firstpage = 0;

どんな助けでも大歓迎です！

4

2 に答える 2

2

カルーセルをに追加しますExt.Viewport。これは、アプリケーションのブートストラップでデフォルトでインスタンス化されるコンポーネントです。Ext.Viewport.add(carousel);したがって、を使用してビューポート自体に追加する代わりに、

tabpanel.add(carousel);

タブパネルインスタンスへの参照はどこtabpanelにありますか。このようにして、カルーセルを最初に利用可能なカードに追加します。Ext.tab.Panel

于 2012-05-12T12:23:23.010 に答える
0

Grgurに感謝します、それは助けになりました。最終的にはこの方法で解決しました。タイトルとiconClsがあることを確認してください。そうしないと、カルーセルアイテムをタブパネルに追加するときにコンソールでエラーが発生します。

var carousel = Ext.create('Ext.Carousel', {
title: 'Carousel',
iconCls: 'info'
});

var MyTabPanel = Ext.getCmp('mytabpanel');
MyTabPanel.add(carousel);
于 2012-12-16T19:45:24.193 に答える