如何在 Sencha touch 2.1 中创建复杂的数据项？

Posted 2023-02-25

【中文标题】如何在 Sencha touch 2.1 中创建复杂的数据项？

【英文标题】：How to create complex dataitem in Sencha touch 2.1?

【发布时间】：2013-03-08 12:49:15

【问题描述】：

我想在如下所示的列表中创建数据项：

但我无法使用 3 个组件渲染中间 vbox 部分。 我正在关注这个例子：http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/

这就是我定义数据项的方式：

Ext.define('MyTabApp.view.CartListItem', 
    extend  : 'Ext.dataview.component.DataItem',
    alias   : 'widget.cartlistitem',
    requires: [
               'Ext.Img'
    ],
    config  : 
        cls: 'cart-list-item',
        layout: 
            type: 'hbox',
            align: 'center'
        ,
        image: true,
        details: 
            cls: 'x-details',
            flex: 3,
        ,
        pricing: 
            cls: 'x-pricing',
            flex: 1
        ,
        removeButton: 
            iconCls     : 'delete',
            iconMask    : true,
            ui          : 'astonvilla',
            style       : 'margin-left: 5px; margin-top:10px; padding:5px;'
        ,
        moveButton: 
            iconCls     : 'reply',
            iconMask    : true,
            ui          : 'astonvilla',
            style       : 'margin-left: 5px; margin-top:10px; padding:5px;'
        ,
        editButton: 
            iconCls     : 'compose',
            iconMask    : true,
            ui          : 'astonvilla',
            style       : 'margin-left: 5px; margin-top:10px; padding:5px;'
        ,
        dataMap: 
            getImage: 
                setSrc          : 'itemImage'
            ,

            getDetails: 
                setItemTitle    : 'title',
                setQuantity     : 'quantity'
            ,

            getPricing: 
                sethtml         : 'totalPrice'
            ,
        ,
    ,
    applyImage: function(config) 
        return Ext.factory(config, Ext.Img, this.getImage());
    ,

    updateImage: function(newImage, oldImage) 
        if (newImage) 
            this.add(newImage);
        

        if (oldImage) 
            this.remove(oldImage);
        
    ,

    applyDetails: function(config) 
        console.log("applyDetails");
        var details = Ext.factory(config, MyTabApp.view.CartListItemDetails, this.getDetails());
        console.log("applyDetails done");
        console.log(details);
        return details;
    ,

    updateDetails: function(newDetails, oldDetails) 
        console.log("updateDetails");
        if (newDetails) 
            this.add(newDetails);
        

        if (oldDetails) 
            this.remove(oldDetails);
        
    ,

    applyPricing: function(config) 
        return Ext.factory(config, Ext.Component, this.getPricing());
    ,

    updatePricing: function(newPricing, oldPricing) 
        if (newPricing) 
            this.add(newPricing);
        

        if (oldPricing) 
            this.remove(oldPricing);
        
    ,

    applyRemoveButton: function(config) 
        return Ext.factory(config, Ext.Button, this.getRemoveButton());
    ,

    updateRemoveButton: function(newRemoveButton, oldRemoveButton) 
        if (oldRemoveButton) 
            this.remove(oldRemoveButton);
        

        if (newRemoveButton) 
            // add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method
            // when it happens
            newRemoveButton.on('tap', this.onRemoveButtonTap, this);

            this.add(newRemoveButton);
        
    ,

    onRemoveButtonTap: function(button, e) 
        var record = this.getRecord();

        Ext.Msg.alert(
            record.get('title'), // the title of the alert
            "Id of this item is: " + record.get('itemId') // the message of the alert
        );
    ,

    applyEditButton: function(config) 
        return Ext.factory(config, Ext.Button, this.getEditButton());
    ,

    updateEditButton: function(newEditButton, oldEditButton) 
        if (oldEditButton) 
            this.remove(oldEditButton);
        

        if (newEditButton) 
            // add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method
            // when it happens
            newEditButton.on('tap', this.onEditButtonTap, this);

            this.add(newEditButton);
        
    ,

    onEditButtonTap: function(button, e) 
        var record = this.getRecord();

        Ext.Msg.alert(
            record.get('title'), // the title of the alert
            "Id of this item is: " + record.get('itemId') // the message of the alert
        );
    ,

    applyMoveButton: function(config) 
        return Ext.factory(config, Ext.Button, this.getMoveButton());
    ,

    updateMoveButton: function(newMoveButton, oldMoveButton) 
        if (oldMoveButton) 
            this.remove(oldMoveButton);
        

        if (newMoveButton) 
            // add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method
            // when it happens
            newMoveButton.on('tap', this.onMoveButtonTap, this);

            this.add(newMoveButton);
        
    ,

    onMoveButtonTap: function(button, e) 
        var record = this.getRecord();

        Ext.Msg.alert(
            record.get('title'), // the title of the alert
            "Id of this item is: " + record.get('itemId') // the message of the alert
        );
    
);

我调用details 的中间部分定义为自定义视图，vbox 布局定义如下：

Ext.define('MyTabApp.view.CartListItemDetails', 
    extend  : 'Ext.Component',
    alias   : 'widget.cartlistitemdetails',
    config  : 
        cls     : 'x-details',
        flex    : 3,
        layout  : 'vbox',
        titleCell: null,
        qtyCell: null,
        items   : [
            xtype   : 'panel',
            flex    : 1,
            itemId  : 'titleCell',
            html    : 'blahblah'
        ,
        
            xtype   : 'component',
            flex    : 1,
            itemId  : 'qtyCell',
            html    : 'blahblah'
        ],
    ,
    setItemTitle    : function(title)
//      this.down('#titleCell').setHtml(title);
        console.log(this.getItems());
        this.getItems()[0].html = title;
    ,
    setQuantity : function(qty)
//      this.down('#qtyCell').setHtml(qty);
        console.log(this.getItems());
        this.getItems()[0].html = qty;
    
);

这是呈现带有图像、定价和水平对齐按钮的列表项。不呈现自定义组件的中间部分。如果我检查元素，它就是生成 html 的方式：

<div class="x-details x-layout-box-item x-flexed x-stretched" id="ext-cartlistitemdetails-1" style="-webkit-box-flex: 3;"></div>

正如你所看到的，这个 div 里面没有任何东西，这就是它的呈现方式：

似乎我很接近，因为 setItemTitle 方法被调用但仍然 this.down('#titleCell').setHtml(title) 或 this.getItems()[0].html = title; 不起作用。

【问题讨论】：

不确定，但为什么CartListItemDetails 中只有两个项目？另外，为什么titleCell 是panel 和qtyCell 是component？但实际上，为什么不将CartListItemDetails 制作成一个简单的panel，其中包含您使用 CSS 设置样式的 html 内容？

我也会使用 HTML 模板和 CSS 魔法来实现。然后，您将在列表中只有一个 itemtap 侦听器。在 itemtap 监听器调用的函数中，您可以找出点击事件的目标，从而触发任何其他函数。

@jakerella 实际上是因为沮丧，我添加/删除/更改了很多东西，因为有 2 项而不是 3 项，还有 panel 和 container。

@TDeBailleul 经过我所有的尝试，我打算去模板路线，但我仍然很想知道我做错了什么？在某些情况下，例如动态增加水平列表，其中模板的使用会扰乱 sencha 的计算，因此某些部分总是被隐藏，所以在我不能使用模板的情况下，我很想学习 dataitem 方法

【参考方案1】：

我也在尝试实现一个复杂的数据项布局。我在 hbox 项中使用 vbox 面板并且能够实现它。

检查一下 https://github.com/tomalex0/senchatouch-complex-dataitem

演示 http://tomalex0.github.io/senchatouch-complex-dataitem/

试试看，如果它适合你，请告诉我。