简单煎茶 2.0 mvc 列表答案

【问题标题】：Simple Sencha 2.0 mvc list简单煎茶 2.0 mvc 列表
【发布时间】：2012-06-23 13:14:41
【问题描述】：

我正在尝试编写我的第一个简单的 mvc 应用程序。我有一个主视图和一个产品视图。我也有一个主控制器。我的产品视图扩展了 Ext.List。我的问题是即使我设置了数据和 itemTpl，列表也没有显示任何内容。这是我的代码：

app.js

Ext.application({
    name: 'SenchaTest',


    controllers: ['Main'],


    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        Ext.create('SenchaTest.view.Main');
    },
});

查看/Main.js

Ext.define('SenchaTest.view.Main', {
    extend: 'Ext.TabPanel',
    requires:['Ext.data.Store'],

    config: {
        fullscreen: true,
        items:[
            {
                xtype:'productspage',
                title:'Products',
                data: [
                        { title: 'Item 1' },
                        { title: 'Item 2' },
                        { title: 'Item 3' },
                        { title: 'Item 4' }
                ],
                itemTpl:'{title}'
            }
        ]
    },

    initialize: function() {
        console.log('Main view initialize');
    }

});

查看/Products.js

Ext.define('SenchaTest.view.Products', {
    extend: 'Ext.List',
    xtype: 'productspage',

    initialize: function() {
        console.log('Products view initialize');
    },

});

控制器/Main.js

Ext.define('SenchaTest.controller.Main',{
    extend: 'Ext.app.Controller',
    config:{
        views:['Main', 'Products'],
    },

    launch: function() {
        console.log('Main Controller launch');
    },

    init: function() {
        console.log('Main Controller init');
    }
});

这是我的控制台中显示的内容：

Main Controller init 
Products view initialize 
Main view initialize 
Main Controller launch

所以我的视图和控制器被启动。但我的产品列表中没有显示任何内容。列表组件似乎已加载，因为拖动它时我可以看到滚动条。

奇怪的是，如果我将 xtype: 'productspage' 更改为 xtype:'list' .... 它可以工作....但是我的产品视图扩展了 Ext.List ... 所以不是一样吗？

【问题讨论】：

标签： model-view-controller extjs sencha-touch-2

【解决方案1】：

尝试为您的主视图设置布局

config: {
    fullscreen: true,
    layout:'fit', <---------- the item is gonna fit the screen
    items:[
        {
            xtype:'productspage',
            title:'Products',
            data: [
                    { title: 'Item 1' },
                    { title: 'Item 2' },
                    { title: 'Item 3' },
                    { title: 'Item 4' }
            ],
            itemTpl:'{title}'
        }
    ]
}

【讨论】：

好的，如果你能做一个 Senchafiddle 那就太好了，那么帮助你会容易得多。
另外，尝试检查 DOM 以查看列表是否存在但高度为 0px，或者它是否根本不存在。
检查 dom 似乎显示列表的宽度和高度为 100%。
我试过 SenchaFiddle，我似乎无法让它工作。它看起来不像在我的机器上表现得一样。我会尝试使它与 senchafiddle 一起使用。

【解决方案2】：

让我们尝试将所有配置（标题、数据、itemTpl）放入您的 productsPage 定义中。

【讨论】：

是的，也试过了。这真的很奇怪。奇怪的是 xtype:'list'，它可以工作，但是当我切换到 productspage 时，没有显示任何数据。但是列表组件加载时没有数据。当我将产品页面扩展到一个简单的面板并在配置中有 html 时。它确实显示了html。所以所有点一切都设置正确，但没有数据....
"奇怪的是 xtype:'list'，它可以工作，但是当我切换到 productspage 时没有显示数据。但是列表组件加载时没有数据"？我不明白这个
是的，当 xtype:'productspage' 时，列表组件显示但没有数据。尝试滚动列表时可以看到滚动条。但是当我只更改 xtype:'list' 而不是 xtype:'productspage' 时，就会出现数据。

【解决方案3】：

终于找到问题了.. omg，这都是因为视图 Products.js 的初始化覆盖没有调用基本方法...

【讨论】：

嗨，你能描述得更详细一点吗？你究竟做了什么来摆脱这个错误？因为我遇到了同样的问题:(