extjs - sencha 2: コンテナでデータビューを表示する方法

Question

コントローラーでデータビューを作成しましたが、正常に表示されません。私は煎茶の初心者です。助けが必要です。

app.js

Ext.application({

    name: 'ajmd',
    views: [
        'center'
    ],
    controllers: [
        'center'
    ],
    launch: function() {
        Ext.Viewport.add([{
            xtype:'centerView'
        }]);       
    }
});

center.js (ビュー)

Ext.define("ajmd.view.center", {
    extend: 'Ext.Container',
    xtype: 'centerView'
});

center.js (コントローラー)

Ext.define("ajmd.controller.center", {
    extend: 'Ext.app.Controller',
    config: {
        refs:{
            main:'centerView'
        },
        control:{
            main:{
                initialize:'fnInitial'
            }
        }
    },
    fnInitial:function(item){
        var touchTeam = Ext.create('Ext.DataView', {
            // items:[{
            //  xtype:'panel',
            //  html:'hello world'
            // }],
            store: {
                fields: ['name', 'age'],
                data: [
                    {name: 'Jamie Avins',  age: 100},
                    {name: 'Rob Dougan',   age: 21},
                    {name: 'Tommy Maintz', age: 24},
                    {name: 'Jacky Nguyen', age: 24},
                    {name: 'Ed Spencer',   age: 26}
                ]
            },
            itemTpl:'{name} is {age} years old'
        });
        var myPanel = Ext.create('Ext.Panel', {
            html: 'This will be added to a Container'
        });
        item.add(myPanel);
        item.add(touchTeam);
    }
});

結果

これはコンテナに追加されます

================================================== ====

データビュー内のこれらのアイテムのコメントを外すと、データビューにアイテム (hello world) しか表示できませんが、名前と年齢は常に表示できません。何が問題なのかわかりません。

ありがとう。

Answer 1

ありがとう@未定義、@ベンカ。

幅と高さの設定を追加して問題を解決します。

var touchTeam = Ext.create('Ext.DataView', {
            // fullscreen: true,
            // items:[{
            //  xtype:'panel',
            //  html:'hello world'
            // }],
            width:'100%',
            height:'100%',
            store: {
                fields: ['name', 'age'],
                data: [
                    {name: 'Jamie Avins',  age: 100},
                    {name: 'Rob Dougan',   age: 21},
                    {name: 'Tommy Maintz', age: 24},
                    {name: 'Jacky Nguyen', age: 24},
                    {name: 'Ed Spencer',   age: 26}
                ]
            },
            itemTpl:'<div>{name} is {age} years old</div>'
        });

app.css .x-layout-card{position:relative;overflow:hidden} のブロックによってデータが隠されていることがわかりました

実際、x-layout-card が私の css でカバーされている場合、データは表示できますが、モバイルでも表示できません。しかし、幅と高さの構成を使用すると、電話と Web でデータを表示できます。

皆さんに感謝します。

ここで質問するのは初めてです。それは驚くべきことであり、あなたの応答に感謝します。

Answer 2

,ここの最後から削除しmain:'centerView',ます：

refs:{
    main:'centerView',
},