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

Posted 2023-02-25

【中文标题】Sencha Touch 2 - 在项目中嵌入带有 xtype 的组件但不起作用

【英文标题】：Sencha Touch 2 - embed a Component with xtype in items but not work

【发布时间】：2013-07-29 15:52:32

【问题描述】：

最近我尝试自己学习 ST2，然后发生了错误。 我创建了一个 Ext.Component 视图，然后将它放到扩展 Ext.Container 的父视图中。 不幸的是，我的页面中除了空气之外什么都没有。有人帮我吗？非常感谢。下面是我的代码。

---

app.js

Ext.application(
    name: 'myAPP',

    requires: [
        'Ext.MessageBox'
    ],

    models: [
        'Goods'
    ],

    views: [
        'Viewport',
        'GoodsList',
        'GoodsListItem'
    ],

    controllers: [],

    stores: [
        'GoodsList'
    ],
    // some basic codes...
);

Viewport.js - 查看

Ext.define('myAPP.view.Viewport', 
    extend: 'Ext.tab.Panel',

    xtype: 'viewport',

    config: 
        fullscreen: true,

        tabBarPosition: 'bottom',

        defaults: 
            stylehtmlContent: true
        ,

        items: [
            
                title: 'Series',
                iconCls: 'list',
                xtype: 'goodslist'
            
        ]
    
);

GoodsList.js - 查看

Ext.define('myAPP.view.GoodsList', 
    extend: 'Ext.Container',

    requires: [
        'Ext.TitleBar',
        'myAPP.view.GoodsListItem'
    ],

    xtype: 'goodslist',

    config: 
        layout: 
            type: 'fit'
        ,

        items: [
            
                xtype: 'titlebar',

                title: 'GoodsList',

                docked: 'top',

                items: [
                    
                        iconCls: 'more',
                        align: 'right'
                    
                ]
            ,
            
                xtype: 'goodslistitem'
            
        ]
    
);

GoodsListItem.js - 查看

Ext.define('myAPP.view.GoodsListItem', 
    extend: 'Ext.Component',

    xtype: 'goodslistitem',

    config: 
        store: 'goodsliststore',

        tpl: 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>'
        )
    
);

GoodsList.js - 商店

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

Goods.js - 模型

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

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

---

ST 版-Touch 2.1.1

【问题讨论】：

...应该是什么结果？

@NicoGrunfeld，嗨，我只想在我的页面上显示一个列表，如您所见，结果应该与 GoodsListItem.js - 视图中的 tpl 数据一起显示

【参考方案1】：

您似乎遗漏了一些在 Sencha Touch 中使用列表的基本概念。

您的 GoodsList 视图实际上没有 Ext.dataview.List，所以这就是您看不到任何内容的原因。 替换元素：

    xtype: 'goodslistitem'

使用列表组件，例如：

    xtype: 'list'

现在让我们全屏显示，让我们使用您在GoodsListItem.js 中定义的XTemplate 作为您列表的itemTpl：

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

您实际上可以删除您的 GoodsListItem.js 视图。 如果您真的想使用可以使用组件布局的单独列表项，则应设置defaultType 配置，但这会降低性能并增加一定程度的复杂性。如果您有兴趣，请查看Using Dataviews 上的指南。

注意：我假设您的 Ext.XTemplate 语法是正确的。

[编辑] 我的代码可能无法正常工作：检查 this question 关于使用 XTemplate 作为 itemTpl

最后我们要说 Sencha Touch 绑定到列表的哪个 Store，这是通过 store 配置来完成的：

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

然后逐步添加更复杂的内容，例如绑定到 Ext.data.Store，使用 Ext.Template 作为 itemTpl，然后是 Ext.XTemplate

【讨论】：

Thanx @Andrea，我接受了您的建议，并使用带有 Ext.DataView 的 itemTpl 来修复我的错误代码。最后，我用 baseCls 为我的列表设置样式，最后，它显示了我想要的正确 UI。

@Soon 请阅读有关接受答案的页面：***.com/about，了解本网站的工作原理。