1

私の Sencha Touch 2 アプリは非常に複雑です。そのため、ここでコード スニペット全体を表示することはできません。何をすべきかを簡単に説明します。私のアプリでは、次のグローバル構造を持っています:

  • メインコンテナ
    • ツールバートップ
    • カードスイッチ
      • リンクされたインスタンスに基づく異なるパネル
  • ツールバーの下部

Cardswitch でリンクされているパネルの 1 つがホーム パネルです。このパネルの構造は次のとおりです。

  • メインコンテナ
    • パネル左 (レイアウト vbox)
      • さらに3つのパネル
    • パネル右 (レイアウト vbox)
      • データビュー付きパネル
      • （*私の問題パネル）動的に生成されたセグメント化されたボタンを持つパネル

すべて正常に動作します。「問題パネル」の動的ボタンは、ストア データに基づいてコントローラー起動関数を介して生成されます。各ボタンは設計され、いくつかの html とカスタム画像で満たされています。

今私の問題：各ボタンはタップ機能も提供します。この関数は、ボタンの位置に基づいてオーバーレイをポップアップする必要があります。したがって、ボタンが生成されるコントローラー関数には、次のようなコードがあります。

...
var panel = this.getContent();
var overlay =  Ext.create('MyApp.view.Overlay');
panel.add(overlay);
...

ご覧のとおり、私のオーバーレイは別のクラスです。var パネルは、ボタンが表示される「問題パネル」です。ボタン項目のタップ機能のコード (うまく機能します) は次のとおりです。

listeners: {
    tap: function() {

       //overlay.showBy(this);
       overlay.show();
    }                                      
}

そしてオーバーレイのコード:

Ext.define('MyApp.view.Overlay', {
    extend: 'Ext.Panel',
    alias: 'widget.Overlay',

    config: {
        centered: true,
        height: 200,
        hidden: true,
        html: 'This is just a overlay',
        id: 'pOverlay',
        ui: 'light',
        width: 200,
        hideOnMaskTap: true,
        modal: true
    }

});

もし私がするなら

panel.add(overlay);

タップ関数を呼び出すだけです

overlay.show();

すべてがうまく高速ですが、押されたボタンに対してオーバーレイがポップアップしません。だから私は使いたい

overlay.showBy(button);

しかし、そうすると、オーバーレイがポップアップするのに約2秒以上かかり、非常に遅くなります（Windows 7 @quadcoreでchromeを使用）。私は sencha-touch 2.0.1.1 を使用しています。オーバーレイをパネルに追加するのではなく、ビューポートに追加してから show を呼び出したときに期待していました。

//panel.add(overlay);
Ext.Viewport.add(overlay);
...
overlay.show();

パネルに追加すると、それほど速くは表示されません。showBy() の機能が必要ですが、アプリケーションよりもはるかに高速です。私に何ができる？アプリケーション全体で行った間違いはありますか? 他に何か？私はこの単純なオーバーレイを3日以上扱っているので、あなたが私を助けてくれることを願っています....

編集：テストのために、Cardswitchコンテナに含まれないように、ホームパネル（問題のあるパネルを含む）を初期ビューとして使用しました。その後、showBy() を実行しましたが、パネル全体がカードスイッチに含まれている場合よりもはるかに高速です。show() 関数だけを使用する場合ほど速くはポップアップしませんが、問題ありません。しかし、パネルを埋め込む必要があるため、それはまだ解決策ではありません。

また、2 つのオプションを持つ単純な選択フィールドを使用してみました。選択フィールドもオーバーレイを使用してオプションを表示しますが、選択フィールドは問題パネルのオーバーレイと同じくらい遅いです。:(

編集 2: 私はここでその問題の同様の説明を見つけました: http://www.sencha.com/forum/showthread.php?203501-ShowBy-with-Flexed-panels-and-a-box-layout-popup-is -slow しかし、そのスレッドの回避策は私にはうまくいきません。showBy() を使用する代わりに、選択フィールドの項目リストを画面の中央に表示するオーバーレイを作成するにはどうすればよいですか?

4

1 に答える 1

2

さて、sencha touch のパフォーマンスの問題 (ここで説明した問題も引き起こします) と数週間戦った後、私はその問題に対する独自の解決策をここで見つけました。

私のパネルのほとんどにはレイアウト「hbox」が適用され、子パネルには hbox レイアウトの新しいパネルでオプション flex がありました。これにより、メイン パネルを show() または hide() すると、ロード時間が非常に長くなります。そのレイアウトもここでその問題を引き起こします。

したがって、私の回避策は、レイアウトをデフォルトに設定し、コンテナーと要素を手動でフローティングし、アプリケーションの起動時に window.innerHeight / width を使用してそれらの要素に初期幅 / 高さを設定することです。

その後、showBy() 関数は本来あるべき速さです。

于 2012-09-03T09:08:41.327 に答える