表格东侧带有静态图像的浮动表格

时间:2012-04-18 11:17:48

标签: extjs4

我在东侧有图像面板编辑产品的表格。我希望该图像的宽度为:200,高度:200。然后浮动它。怎么做?enter image description here

编辑:  您可以在附加图像中看到图像下方的区域为空  这是此窗口的项目部分

items: [{
    xtype: 'tabpanel',
    border: false,
    items: [{
        xtype: 'container',
        title: 'General',
        border: false,
        layout: 'border',
        region: 'left',
        border: false,
        items: [{
            xtype: 'container',
            region: 'center',
            layout: 'border',

            //height: 175,
            flex: 1,
            border: false,
            items: [{
                xtype: 'webposform',
                id: 'productinfo',
                startfocused: true,

                region: 'center',
                items: [{
                    xtype: 'textfield',
                    hidden: true,
                    name: 'id',
                },{
                    xtype: 'textfield',
                    fieldLabel: 'SKU',
                    name: 'sku',
                },{
                    xtype: 'textfield',
                    fieldLabel: 'Product name',
                    name: 'name',
                },{
                    xtype: 'posdecimalfield',
                    fieldLabel: 'Sales Price',
                    name: 'price',
                },{
                    xtype: 'posdecimalfield',
                    fieldLabel: 'Cost Price',
                    name: 'cost',
                },{
                    xtype: 'textfield',
                    fieldLabel: 'EAN',
                    hideTrigger: true,
                    keyNavEnabled: false,
                    name: 'ean',
                },{
                    xtype: 'container',
                    anchor: '100%',
                    layout: 'hbox',
                    bodyPadding: 5,
                    border: false,
                    defaults: {
                        labelWidth: 120,
                        anchor:'100%'
                    },
                    items: [{
                        hidden: true,
                        xtype: 'textfield',
                        name: 'supplier'
                    },{
                        xtype: 'textfield',
                        region: 'center',
                        name: 'supplier_display',
                        fieldLabel: 'Supplier',
                        flex: 1,
                        readOnly: true,
                    },{
                        action: 'selectSupplier',
                        margin: '0 0 0 2',
                        xtype: 'button',
                        width: 25,
                        region: 'west',
                        text: '...',
                    }],
                },{
                    xtype: 'textarea',
                    fieldLabel: 'Description',
                    name: 'description'
                },]
            },{
                xtype: 'panel',
                border: false,
                layout: 'vbox',
                align : 'stretch',
                pack  : 'start',
                region: 'east',
                items: [{
                    xtype: 'panel',

                    id: 'defaultimage',
                    bodyPadding: 5,
                    height: 200,
                    width: 200,
                    margins: '5 5 5 5',
                    region: 'center',
                },{
                    xtype: 'panel',
                    border: false,
                    flex: 1
                }]
            }],
        }],
    },{
        xtype: 'imagepanel',
        title: 'Images',
        layout: 'border',
    }],
}],

1 个答案:

答案 0 :(得分:0)

什么似乎有问题?使用columnhbox布局,将所有字段放入第一列/容器,将图像放入第二列/容器中。

您是否已经尝试过代码?