デスクトップ向けに現在構築されているSencha ExtJSプロジェクトの設定方法は、モバイルでも使えますか？

Question

私たちはデスクトップ用の動的Webページを構築するために、これまでのデフォルトのclassicビルド記述子を使用して開発してきました。

モバイルと連携するためには同じアプリケーションが必要ですが、デスクトップやモバイルの負荷で同じホームページを持つ必要はありません。

ユーザは、デスクトップブラウザを使用してhttp://example.comページにアクセスします。次に、彼はデスクトップの表示レイアウトを見る
ユーザーはモバイルブラウザを使用してhttp://example.comページにアクセスします。それから彼は

（総別のビューファイルすることができる）、モバイル用のビューのレイアウトを見ている私たちは多くの助けなしでドキュメント内のこのページを発見：https://docs.sencha.com/extjs/6.0/core_concepts/tablet_support.html

実際に切り替えたときに、現在のデスクトップに完全にOK取り組んでいるページをクロームシミュレータ（例えばAppleのiPadのシミュレータを設定する）私たちは、コンソールに次のエラーを取得する：

我々は、セットアップを正しくそれに必要ないくつかの手順が必要になります。

Answer 1

あなたはExtJSに6で新しいアプリケーションを作成するときは、煎茶cmdをアセスおよびコール：「煎茶アプリNameApp ../folderAppを生成」

すると、次のような構造が作成されます。Click here to see the structure

私はあなたのコードが作成された構造について知りませんが、デスクトップやモバイルデバイスで作業するためには、sencha cmdによって生成されたこの構造にする必要があります。

この構造を取得した後（新しいアプリケーションを生成する方がよい）、「extjjs 6.0のリジッドモデル」を頭に入れておく必要があります。 ExtJSはMVCまたはMVVMのアーキテクチャを可能にします。 MVCアーキテクチャは、基本的に、アプリケーションのすべてのコンポーネントを制御できる大規模なコントローラによって制御されます。一方、MVVMアーキテクチャーには、各ビューのコントローラがあります。ビューがインスタンス化されるとインスタンス化され、ビューが破棄されると破棄されます。このアーキテクチャはExtJS、特に最後のバージョンで推奨されています。

これで、実際のアプリケーションで実行されたコードを新しいアプリケーションとアーキテクチャに転送しました。すべてのビュー構造をNameApp> classic> src>ビューに配置します。各ビューの新しいフォルダを開きます。このフォルダには、ビューとこのビューのコントローラが含まれている必要があります。たとえば、のは、リストビューを作成してみましょう：

NameApp>古典> SRC>ビュー>一覧> List.js

NameApp>古典> SRC>ビュー>一覧> ListController.js

などなど...

モバイル> src>ビューフォルダで、モバイルモデルとコントローラを別々に作成することができます。モデルは従来のモデルと同じですが、モバイルツールキットのコンポーネントを使用する必要があります。

ここまでは、別々のモバイルアプリとクラシックアプリが同じコードで作成されています。しかし、コードを最適化するために、ExtJS 6のパワーをappフォルダの汎用クラスを拡張して使用することができます。たとえば、古典と現代のフォルダに延長される特定のビュー、のための一般的なコントローラを作成することができます

NameApp>アプリ>ビュー>一覧> ListControllerGeneric.js

Ext.define('NameApp.app.view.list.ListControllerGeneric', { 
    extend: 'Ext.app.ViewController', 
    //here you put code using in modern and classic both 
}); 

NameApp>古典> SRC>ビュー>一覧> ListController.js

Ext.define('NameApp.app.view.list.ListController', { 
    extend: 'NameApp.app.view.list.ListControllerGeneric', 
    //here you put code using in classic only 
}); 

NameApp>近代> SRC>ビュー>一覧> ListController.js

Ext.define('NameApp.app.view.list.ListController', { 
    extend: 'NameApp.app.view.list.ListControllerGeneric', 
    //here you put code using in modern only 
}); 

クラッシュを避けるために重要なことは、実際にモバイルで使用していない場合でも、クラシックフォルダから最新のフォルダにすべてのビューを作成することです。また、デスクトップとモバイルの両方を使用する場合は、古典と現代の両方をテストするために、現代の時計を使用する必要がありますが、両方をビルドするにはsenchaアプリをビルドする必要があります。

この説明が役に立つと願っています。 煎茶に非常に新しいのおかげ

Answer 2

質問は非常に幅広く、あなたがしたことや失敗した理由を見ることができません。あなたのリンクの背後にあるタッチサポートは、古典的なツールキット用であり、現代用ではないので、現代のツールキットを使用したい場合は、そのリンクを忘れてください。

これらのフレームワークの変更のほとんどは、新しいアプリケーション環境（sencha generate app）を作成し、ソースコードを移植（コピー）することをお勧めします。新しいアプリケーション環境を生成するときは、ツールキットの設定を行わないでください。そうすれば、汎用アプリケーションが作成されます。

次に、すべてのコードを1つのディレクトリに入れるだけではありません。既存のコードファイルは、「両方のツールキットに使用する」と「古典のみに使用する」の2つの部分に分解する必要があります。ビューは通常クラシックのみですが、一部のモデルやストアは普遍的かもしれません。 2つの部分は、ユニバーサル部分の場合はsrc、クラシック部分の場合はclassic/srcという2つの異なるディレクトリに移動します。

モダンツールキット（modern/srcに入れてください）だけを書いてください。すべてがうまくコンパイルされるはずです。

Answer 3

イム、私は使用していることを指摘したい：私が使用している場合でも、

sencha app watch 

はappフォルダ上のすべての私のファイルを見つけるためにtryiedまたは使用「現代の？」モバイルユーザーエージェントとしてのクロム開発者。使用

：

sencha app watch modern 

は、問題を解決しました。このコマンドは、ユーザーエージェントまたは "？modern"と "？classic"タグをチェックし、正しいファイルを要求します。

この回答はもともと@Albanir Nevesの回答でしたが、私はここでそれをより明確にしました。