Sencha Touch 2 で フォームウィジェットとリスト表示を混ぜたくてできなかった話→できた話！！！！

Sencha Touch

はい

出オチ

設定画面的なものを連想していた

設定画面ではいくかのトグルウィジェットやボタンやリスト表示にしたものをつらねた画面を作ろうとしていたが、どうやら Ext.Panel 内の items で xtype: list は使えないっぽい感じだった。具体的なコードを書いていこう。

Ext.define('MyApp.view.Settings', {
    extend: 'Ext.Panel',

    requires: [
        'Ext.dataview.List',
        'Ext.data.Store',
        'Ext.field.Toggle',
        'Ext.Button'
    ],

    config: {
        fullscreen: true,
        scrollable: true,
        title: '設定',
        iconCls: 'settings',
        layout: 'vbox',

        items: [
          {
            xtype: 'togglefield',
            name: 'hoge',
            label: 'hoge',
            labelWidth: '30%'
          },
          {
            xtype: 'togglefield',
            name: 'moge',
            label: 'moge',
            labelWidth: '30%'
          },
          {
            xtype: 'togglefield',
            name: 'toge',
            label: 'toge',
            labelWidth: '30%'
          },
          {
            xtype: 'sliderfield',
            name: 'hani',
            label: 'hani'
          },
          {
            xtype: 'list',
            // ここ！！！！
            // height: 300,
            fullscreen: false,
            itemTpl: '{text}',
            data: [
              {text: 'hoge'},
              {text: 'moge'}
            ]
          },
          {
            xtype: 'button',
          },
        ]
    }
});

こういう感じで Ext.dataview.List や Ext.List はどうやら使えないようだった。どうにか実現できないか探したら、以下の記事が見つかった。
Sencha Touch 2.0 Dataview in Panel - Stack Overflow
ただこの widget をつかうって方法を試したけど、なんか動かなかった。おれがわるいのか、そうなのか。

代替案

ラベルウィジェットを使うしかないんじゃないかなぁ。まあ探す。たぶん Ext.List 関係はもうそういうリストビューにするってのが前提であって、画面内要素としては組み込めないって話なのかなぁ

とおもったら

height 指定したらできたよ！！！！どうやらこういうのって height 指定しないとうごかないとかあるらしい。iOS でもそういうことがあるようだ。