今度は縦にいろいろデータが並んで、ドラッグでスクロールできるようなリストを作ってみます。
☆ ここまでは view 下の Main.js を書き換える方法で実装してきたのですが、もっと上の app.js を書き換える方がとりあえずテストするには楽なことがわかったので、このページでは app.js を書き換えるものにしてあります。

いきなりコードとサンプル

サンプル

まずはシンプルなリストです。

Ext.application({
    name: 'Funini',
    requires: [
	'Ext.Panel',
	'Ext.tab.Panel',
	'Ext.dataview.NestedList',
    ],
    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',
            items: [
                {
                    xtype: 'nestedlist',
                    title: 'メンバー一覧',
                    iconCls: 'compose',
                    displayField: 'name',
                    store: {
                        type: 'tree',
                        fields: ['name', 'path',{name: 'leaf', defaultValue: true}],
                        root: { leaf: false },
						data: [
							{
								'name':'か',
								'path': 'resources/ka.png',
							},
							{
								'name':'かめ',
								'path': 'resources/kame.png',
							},
							{
								'name':'かもめ',
								'path': 'resources/kamome.png',
							},
						],
					},

                    detailCard: {
                        xtype: 'panel',
                        scrollable: true,
                        styleHtmlContent: true,
                    },
					
					getItemTextTpl: function(recordnode) {
						return '<img src="{path}" style="width: 50px; height: 50px" />{name}';
					},
					
                    listeners: {
                        itemtap: function(nestedList, list, index, element, post) {
							var html = '<img src="';
							html += post.get('path');
							html += '" style="width: 100%; max-width: 300px" />';
                            this.getDetailCard().setHtml(html);
                        }
                    }
                }
            ]
        });
    }
});

表示結果です。

いくつかのポイント

NestedList で並んでいるアイテムをここでは画像のサムネイルとテキストを並べています。これは、普通の list の場合は itemTpl プロパティで定義しますが、NestedList の場合は getItemTextTpl として関数を定義します。スタイルは index.html のスタイルシート部分に書いてもいいですし、この例のように style で書いてもいいと思います。
リストの末端は "leaf" と呼びます。リストは一覧ですが、leaf はたいてい一つのコンテンツが大写しになるので違った表示をしたくなります。nestesList では、detailCard として leaf の中身を表現しています。 fields の中でも leaf だけ特別扱いの定義をしています。
今回は nestedlist を

NestedList を使って、階層的なメニューを作る(サムネイル付き)

いきなりコードとサンプル

いくつかのポイント