sencha-touch - 不知道为什么我的子类控件没有出现

Question

我正在尝试在我的应用程序中创建详细的订单项表单。我创建了一个 Ext.Panel 的子类，其中包含三个表单控件。然后我开始将该控件添加到我的可视面板中。只有一个出现过。其他的设置为 0 的高度。这是代码：

app.views.Forms.materialsLineItem = Ext.extend(Ext.Panel, {
    layout: {
        type: 'hbox',
        pack: 'center'
    },
    items: [
        new Ext.form.Spinner({
            width: 150
        }),
        new Ext.form.Text({
            placeHolder: 'Description',
            width: 400
        }),
        new Ext.form.Text({
            placeHolder: 'Price',
            width: 150
        })
    ]
});

app.views.Forms.Materials = new Ext.Panel({
    fullscreen: true,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [
        new app.views.Forms.materialsLineItem(),
        new app.views.Forms.materialsLineItem(),
        new app.views.Forms.materialsLineItem()
    ]
});

Answer 1

嗯，如果您使用对象字面量声明表单组件，则它可以工作，如下所示：

app.views.Forms.materialsLineItem = Ext.extend(Ext.Panel, {
    layout: {
        type: 'hbox',
        pack: 'center'
    },
    items: [{
        xtype: 'spinnerfield',
        width: 150
    }, {
        xtype: 'textfield',
        placeHolder: 'Description',
        width: 400
    }, {
        xtype: 'textfield',
        placeHolder: 'Price',
        width: 150
    }]
});

我的猜测是，您的方式只创建了一次字段，而 sencha 不允许您将相同的组件添加到多个容器中，因此前两个面板实际上没有任何内容。

如果您查看 Chrome 的 JavaScript 控制台中的元素，您应该会看到前两个面板只是空的 div。