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

我想在如下列表中创建dataitem：

但我无法用3个组件渲染中间

vbox

部分。 我举这个例子：

以下是我定义数据项的方式：

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不起作用。
我还试图实现一个复杂的数据项布局。我正在hbox项中使用vbox面板，并且能够实现它

看看

演示

试试看，让我知道它是否适合您。
不确定所有内容，但为什么
CartListItemDetails
中只有两项？另外，为什么
标题单元格
a
面板
和
qtyCell
a
组件
？但是，真的，为什么不让
CartListItemDetails
成为一个简单的
面板
，其中包含你用CSS设计的html内容呢？我也会用html模板和CSS魔术来做。那么列表上只有一个itemtap侦听器。在itemtap listener调用的函数中，您可以找出tap事件的目标，从而触发任何其他函数。@jakerella实际上是因为沮丧，我添加/删除/更改了很多东西，因为其中有2个项目而不是3个，还有
面板
和
容器
@tdebaileul我的尝试我计划去模板路线，但我仍然想知道我做错了什么？有些情况下，比如动态增加水平列表，其中模板的使用打乱了sencha的计算，因此某些部分总是隐藏的，所以在这种情况下，如果我不能使用模板，我希望学习dataitem方法