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。

不知道为什么我的子类控件没有显示出来

1 个答案: