煎茶タッチ・スワップパネル

Question

私は最近、煎茶タッチを使用して開始し、これまでのところ、私はこれが組み込まれて持っている：
app.js：

Ext.regApplication({ 
    name: 'app', 
    launch: function() { 
     this.launched = true; 
     this.mainLaunch(); 
    }, 
    mainLaunch: function() { 
     if (!device || !this.launched) {return;} 
     this.views.viewport = new this.views.Viewport(); 
    } 
}); 

Viewport.js：

app = Ext.extend(Ext.TabPanel, { 
    fullscreen: true, 
    sortable: false, 
    tabBar: { 
     dock: 'bottom', 
     layout: {pack: 'center'} 
    }, 
    cardSwitchAnimation: { 
     type: 'slide', 
     cover: true 
    }, 
    initComponent: function() { 
     Ext.apply(app.views, { 
      searchListTab: new app.views.SearchListTab(), 
      searchTab: new app.views.SearchTab(), 
      mapTab: new app.views.MapTab(), 
      infoTab: new app.views.InfoTab() 
     }); 
     Ext.apply(this, { 
      items: [ 
       app.views.searchTab, 
       app.views.mapTab, 
       app.views.infoTab 
      ] 
     }); 
     app.views.Viewport.superclass.initComponent.apply(this, arguments); 
    } 

}); 

SearchTabを。 JS

app.views.SearchTab = Ext.extend(Ext.Panel, { 
    title: 'Search', 
    iconCls: 'search', 
    dockedItems: [{ 
     xtype: 'toolbar', 
     title: 'Search' 
    }], 
    items: [ 
     { 
      xtype: 'button', 
      ui: 'round', 
      text: 'Hledej', 
      listeners: { 
       tap: function() { 
        Ext.dispatch({ 
         controller: app.controllers.main, 
         action: 'search', 
         animation: {type:'slide', direction:'right'} 
        }); 
       } 
      } 
     } 
    ], 
    initComponent: function() { 
     app.views.SearchTab.superclass.initComponent.apply(this, arguments); 
    } 
}); 

SearchListTab.js

app.views.SearchListTab = Ext.extend(Ext.Panel, { 
    title: 'Search', 
    iconCls: 'search', 
    dockedItems: [{ 
     xtype: 'toolbar', 
     title: 'Search Results' 
    }], 
    items: [{ 
     xtype: 'list', 
     store: app.stores.results, 
     itemTpl: '{titul}', 
     grouped: false 
     //onItemDisclosure: function (record) { 
      //Ext.dispatch({ 
      // controller: app.controllers.contacts, 
      // action: 'show', 
      // id: record.getId() 
      //}); 
     //} 
    }], 
    initComponent: function() { 
     app.stores.results.load(); 
     app.views.SearchListTab.superclass.initComponent.apply(this, arguments); 
    } 
}); 

とsearch.js

app.controllers.main = new Ext.Controller({ 

    search: function(options) { 
     app.views.searchTab.setActiveItem(
      app.views.searchListTab, options.animation 
     ); 
    } 

}); 

、今は重要ではありませんいくつかの他のもの。だから、基本的に私はタブパネルであるメインビューポートを持っているし、その項目であるパネルはほとんどなく、最初からどこにもないパネルがある。ここで、searchTabのボタンをクリックすると、searchTabパネルをsearchListTabパネルと交換したいと考えています。問題は、私がapp.views.viewport.setActiveItem（...）を使うときです。それは正常に動作しますが、タブパネルに新しいタブを追加します。現在のタブパネルを別のパネルにスライドしたいのですが、ここに投稿したコードを使用すると、app.views.searchTab.setActiveItem（...）;それは何もしません。
何が間違っていますか？ありがとう。

Answer 1

私はこれを達成するためにネスティングの別のレイヤーを導入する必要があると思います。

私は、あなたのSearchTabを別のExt.Panelにカードレイアウトで入れ子にし、必要に応じてSearchListTabをこのパネルに追加し、次にsetActiveItem（）メソッドを使用してスライドさせたいと考えます。これにより、タブ内のサブビュー間を移動しながらTabPanelが表示されます。

私はそれをよりよく説明しようとするために、小さな図を描きました！黒いボックスは、TabPanelに直接追加されたアイテムとしてSearchTabを置き換える新しいパネルです。このことができますし、

希望は明らかです！