extjs - sencha 2：如何在容器中显示数据视图

Question

我在控制器中创建了数据视图，但它不能正常显示。我是sencha的新手，需要帮助。

应用程序.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);
    }
});

结果

这将被添加到容器中

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

如果我在数据视图中取消注释这些项目，它只能在数据视图中显示项目（你好世界），但名称和年龄不能一直显示。我无法弄清楚有什么问题。

谢谢。

Answer 1

Ext4中没有Ext.dataview.DataView组件。

尝试使用Ext.DataView。

检查工作代码 -

http://jsfiddle.net/f9SXF/1/

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'
});

Answer 2

谢谢@Undefined，@Benka。

我通过添加宽度和高度配置来解决问题。

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 覆盖，则可以显示数据，但也无法在移动设备上显示。但是如果我使用宽度和高度配置，数据可以显示在手机和网络中。

感谢大家。

这是我第一次在这里提问。太棒了，感谢您的回复。

Answer 3

,从这里的末尾删除main:'centerView',：

refs:{
    main:'centerView',
},