針對不同配置文件加載不同視圖

Question

我不確定我瞭解如何在Sencha Touch 2應用中使用配置文件視圖。

Ext.define(App.view.phone.PhonePanel, { 
    extend: 'Ext.tab.Panel', 
    xtype: 'Compare' 
    config: { 
     items: [ 
      { xtype: 'PanelA' }, 
      { xtype: 'Panel B' } 
     ] 
    } 
}) 

Ext.define(App.view.tablet.TabletPanel, { 
    extend: 'Ext.Panel', 
    xtype: 'Compare' 
    config: { 
     layout: 'vbox', 
     items: [ 
      { xtype: 'PanelA', flex: 1 }, 
      { xtype: 'Panel B', flex: 1 } 
     ] 
    } 
}) 

然後在手機配置文件，它增加了「PhonePanel」作爲視圖，以及平板配置文件添加了「TabletPanel」;然後當這個特定的配置文件被加載時，它只會加載這些額外的視圖。

我遇到的問題是，煎茶從兩個配置文件加載文件，並做

this.getAview().push({xtype:'Compare'}); 

當手機情景模式後，它實際上推動了平板電腦的版本的xtype的。這裏發生了什麼？

Answer 1

您正在使用相同的xtype兩次。

將xtype想象爲組件的短名稱。每個組件都需要有一個唯一的短名稱，否則它只會被更新的定義覆蓋。

將上面的兩個組件改爲xtype: 'tabletcompare'和xtype: 'phonecompare'之類的東西。

和

或者

this.getAview().push({xtype:'phonecompare'}) 

引用對象時。

希望這會有所幫助！

Answer 2

這些都是不同的步驟在煎茶觸摸應用程序2創建配置文件：

創建一個包含下面的代碼

你可能更需要一個基礎的應用程序/型材/ Base.js配置文件，如果您在啓動應用程序時爲這兩個配置文件執行相同的代碼。所以這一步是必須的

Ext.define('App.profile.Base', { 
    extend: 'Ext.app.Profile', 

    launch: function() { 

    /* Custom Code */ 

    Ext.fly('booting').destroy(); 
    } 

}); 

創建應用程序/配置文件包含以下代碼

如果你選擇去無底座控制器，那麼一定要，而不是延長Ext.app.Profile的App.profile.Base/Phone.js：

Ext.define('App.profile.Phone', { 
    extend: 'App.profile.Base', 

    config: { 
    controllers: ['Main'], 
    views: ['Main'] 
    }, 

    isActive: function() { 
    return Ext.os.is.Phone; 
    }, 

    launch: function() { 
    Ext.create('App.view.phone.Main'); 
    this.callParent(); 
    } 
}); 

創建應用程序/簡檔/ Tablet.js包含以下代碼

如果你選擇去無底座控制器，那麼一定要，而不是延長Ext.app.Profile的App.profile.Base：

Ext.define('App.profile.Tablet', { 
    extend: 'App.profile.Base', 

    config: { 
    controllers: ['Main'], 
    views: ['Main'] 
    }, 

    isActive: function() { 
    return Ext.os.is.Tablet || Ext.os.is.Desktop; 
    }, 

    launch: function() { 
    Ext.create('App.view.tablet.Main'); 
    this.callParent(); 
    } 
}); 

創建應用程序/視圖/電話/主。包含下面的代碼

Ext.define('App.view.phone.Main', { 

    extend: 'Ext.Container', 

    config: { 
    fullscreen: true, 
    items: [{ 
     html:'This is the main view for the phone profile' 
    }] 
    } 
}); 

JS創建應用程序/視圖/片/包含以下代碼

Ext.define('App.view.tablet.Main', { 

    extend: 'Ext.Container', 

    config: { 
    fullscreen: true, 
    items: [{ 
     html:'This is the main view for the tablet profile' 
    }] 
    } 
}); 

就是這樣Main.js。你應該都準備好了。

希望這會有所幫助