web-dev-qa-db-ja.com

Ext JS：xtypeは何に適していますか？

Ext JSには、Ext JSオブジェクトを実際に作成する代わりに、xtypeプロパティを持つオブジェクトリテラルが渡される例がたくさんあります。

これは何に適していますか？とにかくオブジェクトが作成される場合、パフォーマンス向上はどこにありますか（それが理由である場合）？

extjs
29
flybywire

xtypeは、特定のコンポーネントを識別するための簡単な方法です：panel = Ext.Panel、textfield = Ext.form.TextFieldなど。ページまたはフォームを作成する場合、オブジェクトをインスタンス化するのではなく、これらのxtypesを使用できます。例えば、

items: [{
   xtype: 'textfield',
   autoWidth: true,
   fieldLabel: 'something'
}]

さらに、、この方法でページを作成すると、Ext JS ページを遅延表示する が許可されます。ここに「パフォーマンスの向上」が見られます。 Ext JSは、アプリの読み込み時に多数のコンポーネントを作成する代わりに、ユーザーがコンポーネントを表示する必要があるときにコンポーネントをレンダリングします。ページが1つの場合は大した問題ではありませんが、タブやアコーディオンを利用すると、最初は多くのページが非表示になっているため、アプリの読み込みが速くなります。

さらに、選択したxtypeを作成する新しいコンポーネントを作成および登録できます。 Ext JSも同様にコンポーネントを遅延レンダリングします。

IDでコンポーネントを取得することもできます。コンポーネント（およびExt JSコンポーネント）は多くのNice動作を提供する場合があるため、単純なDOM要素やノードではなく、コンポーネントを検索して取得する方が便利な場合があります。

つまり、xtypeはコンポーネントを識別し、コンポーネントはExt JSの重要な側面です。

54
Upperstage

私はSencha/Ext JSを使い始めたばかりですが、現時点では、UIコンポーネントのみに簡略化された定義識別子文字列を使用するという奇妙な概念は、レガシーユーザーを満足させるためのものでなければならないと思います。

ここの「xtypesのリスト」を見てください： http://docs.sencha.com/touch/2-0/#!/guide/components

「クラス」の名前として、同じではあるがまったく同じではない文字列識別子を、省略定義識別子として使用するのに適切な理由はありますか？私はそうは思いません。

Sencha touchのxtypeからクラス名へのマッピングの次のサンプルを確認してください。

  • video-外部ビデオ
    わかりました。これは理にかなっています-「クラス」名の小文字バージョン
  • carousel-Ext.carousel.Carousel
    ここに同じパターン
  • carouselindicator-Ext.carousel.Indicator
    ええと、OK-パッケージも含めます
  • navigationview-Ext.navigation.View
    そしてここでも
  • datepicker-Ext.picker.Date
    OK、wtf？

上記のforxtypeの引数の一部は、コンポーネントの遅延インスタンス化を許可していました。私はそれは完全に無関係であると思います-遅延インスタンス化を可能にするのは、Sencha/Ext JSがビュー階層のインスタンス化されたコンポーネントの代わりに文字列識別子の指定をサポートするという事実です。

特定の文字列から後でインスタンス化される可能性のある特定のコンポーネントへのマッピングは完全に任意です-そして、Sencha/Ext JSの場合、残念ながらばかげています（上記の例を参照）。

少なくとも実用的なパターンに従ってください。たとえば、Ext.LabelにLabelの "xtype"を設定できないのはなぜですか。単純すぎます？

実際には、なぜよく読めるxtype名を作成したかが原因です-機能しない繰り返しクラス名が多数あり（Ext.PanelおよびExt.tab.Panel）、pickerDateは愚かに聞こえるだけです。

しかし、私はまだそれが好きではありません-それはそれが役立つよりも難読化する奇妙な小さな一貫性のないショートカットです。

8
sksizer

私はジョーと同じ質問をしましたが、答えが見つかりました。 xtypeを使用する場合の1つのアプローチは、同じオブジェクトでitemIdも指定することです。

{itemId： 'myObject'、xtype： 'myClass' ...}

次に、getComponent()を使ってそれを見つけることができます

this.getComponent('myObject');
3
lwe

クラスを宣言してxtypeを指定した場合、後でExt.ComponentQuery.query()を使用してクエリできます

例えば：

Ext.create('MyApp.view.MyButton', {
    xtype: 'mybutton',
    .....
});

あなたのコードの後半で、あなたがするなら：

var buttonArray = Ext.ComponentQuery.query('mybutton');

buttonArrayには、そのクラスタイプのコンポーネントの配列が含まれます。コンポーネントをインラインで作成する場合、コンポーネントのクエリはより複雑になります。

Xtypesのもう1つの利点は、クラスを移動した場合（たとえば、「view」の下に別のサブディレクトリを追加することです：MyApp.view.button.MyButton）、xtypeは変更されないため、コンポーネントクエリは同じままです。プロジェクトが大きくなると、サブディレクトリの作成とクラスの移動を開始します。

2
Patrick Chu

xtypeは、単にクラスを表すために付けられた名前です。これは、アプリケーションの任意の部分で使用するときにインスタンス化する必要がない定義オブジェクトです。

xtypeを登録するときは、Ext.reg(<xtype name>,<classname>)という構文を使用します。ただし、クラス名にnewキーワードを使用していません。これは、Component Mgrが必要な場合にのみ、このクラスのインスタンスを自動的に作成するためです。クリックなどのイベントに応答して。

xtypeを登録した後、 'Component Mgr'はそのxtypeが表すクラスのインスタンスを自動的に作成するため、インスタンスを手動で取得する必要はありません。アプリケーションまたはそれが他で使用されていない場合は、単にそのクラスをインスタンス化しません。コンポーネントマネージャは次のコードを実行します。

_create : function(config, defaultType){
    return new types[config.xtype || defaultType](config);
}
_

xtype _Ext.Ready_の実行時にクラスをインスタンス化しないでください。ただし、new Ext.Container()は、_Ext.Ready_の実行時にすべてのインスタンスを作成します。したがって、xtypeを使用すると、大規模なアプリケーションがガベージオブジェクトを取り除くのに役立ちます。

1
Mr.Kool