Sencha touch 2 Sencha Touch 2-在项目中嵌入带有xtype的组件，但不起作用

最近我试着自己学习ST2，然后事情发生了。 我创建了一个Ext.Component视图，然后将其放在一个父视图中，该父视图扩展了Ext.Container。 不幸的是，在我的页面中除了空气什么都没有。有人帮我吗？比X多得多。下面是我的代码

---

app.js Viewport.js-视图 GoodsList.js-view GoodsListItem.js-view Goods.js-模型

---

---

ST版本-Touch 2.1.1

您似乎缺少了在Sencha Touch中使用列表的一些基本概念

你的GoodsList视图实际上没有一个视图，所以你什么都看不到。 更换滤芯：

{
    xtype: 'goodslistitem'
}

使用列表组件，类似于：

{
    xtype: 'list'
}

现在让我们将其全屏显示，并使用您在

GoodsListItem.js

中定义的

{
    xtype: 'list',
    fullscreen: true,
    itemTpl: new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="s-row">',
                '<div class="s-col {[xindex % 2 === 0 ? "s-c2" : "s-c1"]}">',
                    '<img src="{thumb}" />',
                    '<h1>{#}. {pname}</h1>',
                    '{price}',
                '</div>',
            '</div>',
        '</tpl>'
    )

}

这将为您指明正确的方向。如果你问我，你正试图从零开始完成一些相当复杂的事情，我建议你从一个基本的列表示例开始：

Ext.create('Ext.List', {
    fullscreen: true,
    itemTpl: '{title}',
    data: [
        { title: 'Item 1' },
        { title: 'Item 2' },
        { title: 'Item 3' },
        { title: 'Item 4' }
    ]
});

---

然后在步骤中添加更复杂的内容，例如绑定到

Ext.data.Store

，使用

Ext.Template

作为itemTpl，然后使用

Ext.XTemplate

。。。结果应该是什么？@NicoGrunfeld，你好，我只想在我的页面上显示一个列表，如你所见，结果应该显示在GoodsListItem.js-viewThanx@Andrea中，我接受了你的建议，我使用itemTpl和Ext.DataView来修复我的错误代码。最后，我用baseCls为我的列表设置样式，最后，它显示了我想要的正确UI。@很快请阅读关于接受答案的页面：关于这个网站的工作原理。

Ext.define('myAPP.store.GoodsList', {
    extend: 'Ext.data.Store',

    config: {
        model: 'myAPP.model.Goods',

        storeId: 'goodsliststore',

        data: [
            {
                pname: 'Goods',
                price: '5RMB',
                thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
            },
            {
                pname: 'Goods',
                price: '15RMB',
                thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
            },
            {
                pname: 'Goods',
                price: '25RMB',
                thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
            },
            {
                pname: 'Goods',
                price: '35RMB',
                thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
            }
        ]
    }
});

Ext.define('myAPP.model.Goods', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            { name: 'pname', type: 'string' },
            { name: 'price', type: 'int' },
            { name: 'thumb', type: 'string' }
        ]
    }
});

{
    xtype: 'goodslistitem'
}

{
    xtype: 'list'
}

{
    xtype: 'list',
    fullscreen: true,
    itemTpl: new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="s-row">',
                '<div class="s-col {[xindex % 2 === 0 ? "s-c2" : "s-c1"]}">',
                    '<img src="{thumb}" />',
                    '<h1>{#}. {pname}</h1>',
                    '{price}',
                '</div>',
            '</div>',
        '</tpl>'
    )

}

{
    xtype: 'list',
    fullscreen: true,
    itemTpl: new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="s-row">',
                '<div class="s-col {[xindex % 2 === 0 ? "s-c2" : "s-c1"]}">',
                    '<img src="{thumb}" />',
                    '<h1>{#}. {pname}</h1>',
                    '{price}',
                '</div>',
            '</div>',
        '</tpl>'
    ),
    store: 'GoodsList'
}

Ext.create('Ext.List', {
    fullscreen: true,
    itemTpl: '{title}',
    data: [
        { title: 'Item 1' },
        { title: 'Item 2' },
        { title: 'Item 3' },
        { title: 'Item 4' }
    ]
});