今度は縦にいろいろデータが並んで、ドラッグでスクロールできるようなリストを作ってみます。

いつものように app/view/Main.js を書き換えます。
まずはシンプルなリストです。

Ext.define('Funini.view.Main', {
    extend: 'Ext.dataview.List',
    xtype: 'main',
    id: 'mylist',
    config: {
        itemTpl: '{name}',
        data: [
            { name: 'か'},
            { name: 'かめ'},
            { name: 'かもめ'},
        ],
    },
});

まずは Ext.dataview.List を画面全体に表示しています。 リストはデータの配列を表示するので、データはどこか別に置くこともできますが、今回は data: で直接指定しています。 リストの中身は物によって違うので、それをどのように展開するかを itemTpl: の部分で指定しています。
こんな感じになります。

この itemTpl の部分は、html の文法で好きなように変更することができます。 例えば、以下のように書くと、リストも変わります。

Ext.define('Funini.view.Main', {
    extend: 'Ext.dataview.List',
    xtype: 'main',
    id: 'mylist',
    config: {
        itemTpl: '名前: {name} さん',
        data: [
            { name: 'か'},
            { name: 'かめ'},
            { name: 'かもめ'},
        ],
    },
});

itemTpl で返すのは HTML なので、タグを使ったり、img の中に入れたりもできます。