2

SenchaTouch2アプリ内でプロファイルビューを使用する方法がわかりません。

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」を追加します。次に、その特定のプロファイルがロードされると、それらの追加のビューのみがロードされます。

私が抱えている問題は、Senchaが両方のプロファイルからファイルをロードして実行していることです

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

電話プロファイルがアクティブである間、それは実際にタブレットのバージョンのxtypeをプッシュします。ここで何が起こっているのですか？

4

2 に答える 2

2

これらは、Sencha Touch 2 アプリケーションでプロファイルを作成するためのさまざまな手順です:

次のコードを含む app/profile/Base.js を作成します

アプリの起動時に両方のプロファイルに対して同じコードを実行する場合は、基本プロファイルが必要になる可能性が高くなります。したがって、この手順は必須です

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

  launch: function () {

    /* Custom Code */

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

});

次のコードを含む app/profile/Phone.js を作成します

Ext.app.Profileベースコントローラーを使用しない場合は、次の代わりに必ず拡張してApp.profile.Baseください。

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

次のコードを含む app/profile/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();
  }
});

次のコードを含む app/view/phone/Main.js を作成します

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

  extend: 'Ext.Container',

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

次のコードを含む app/view/tablet/Main.js を作成します

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

  extend: 'Ext.Container',

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

それでおしまい。あなたはすべて準備ができているはずです。

これが役に立ったことを願っています

于 2012-11-21T19:24:41.530 に答える
1

同じxtypeを2回使用しています。

xtypeは、コンポーネントの短縮名と考えてください。各コンポーネントには一意の短縮名が必要です。そうでない場合は、最新の定義によって上書きされます。

xtype: 'tabletcompare'上記の2つのコンポーネントをとのようなものに変更しxtype: 'phonecompare'ます。

と

this.getAview().push({xtype:'tabletcompare'}) <br>

または

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

オブジェクトを参照するとき。

お役に立てれば！

于 2012-11-21T18:17:36.390 に答える