Dataviewのカスタムコンポーネント

Question

ストアの各レコードにカスタムUIコンポーネントを表示したいとします。

これを行う最も良い方法はDataViewのようです。 DataViewItemを使用してこれがどのように可能であるかを示す古いリンクがたくさんありますが、現在のドキュメントでは何も見つかりません（バージョン6.0.2を使用しています）。これはextjs6と関係がありますか？

var myTpl= new Ext.XTemplate(
    '<tpl for=".">', 
     '<div>My object is too complex to be displayed with simple html<div>', 
    '</tpl>' 
); 

Ext.define('MyProject.view.main.MyList', { 
    extend: 'Ext.DataView', 
    xtype: 'mylist', 

    requires: [ 
     'MyProject.view.main.MyViewModel' 
    ], 

    viewModel: { 
     type: 'myviewmodel' 
    }, 

    bind: { 
     store: '{store}' 
    }, 

    // I don't want to do this. I would rather have something like this: 
    // itemXType: 'myitem' 
    itemTpl: myTpl, 

}); 

それがない唯一のことは、プロキシストアを定義しているので、私はViewModelに実装を残してきた：ここで私は今、テンプレートを使用しているものです。必要ならば追加することができます。

これを達成する別の方法はありますか？たぶんデータビュー以外の何か？

Answer 1

ExtJS 6.0.2で可能です。 Touch 2.4 exampleをご覧ください。 Touch 2.4の例ですが、現代のツールキットでExtJS 6.0.2でも動作します。これを参照してくださいSencha fiddle（私はちょうどTouchの例からコードをコピーし、ExtJS 6.0.2 - Modern toolkitを選択しました）。ドキュメントについて：古典的なツールキットのドキュメントを見ているかもしれません。そこにはExt.DataViewはありませんが、あなたはショートバージョン代わり

をExt.view.Viewを使用することができます。あなたのDataViewで 使用

config: { 
       defaultType: 'mydataitem', 
       useComponents: true 
      } 

。

Ext.dataview.component.DataItem 

を拡張し、そこにご希望のコンポーネントを追加するカスタムのDataItemを作成します。