Question

我有一个包含一些文本字段的表单。其中一个是图像上传按钮。我需要将图像预览框（div）放在字段的右侧（在字段按钮之后）。

我已经通过在afterrender事件中创建div来完成艰苦的工作：

    listeners: {
        afterrender: function ( cmp ) {
            var container = this.body.dom.id;
            $("#" + container ).append('<div style="position:absolute;
                   left:DONTKNOW;top:DONTKNOW" id="myPictureDiv"></div>');
        }
    }

如何在ExtJS表单中定位元素？我可以使用position:absolute吗？但是如何找到按钮位置？如何调整表单大小？

编辑：用于说明scebotari解决方案对齐问题的图片：

Answer 1

对此的一个解决方案是将附加div创建为组件，并将其放在带有主字段的“fieldcontainer”中。

{
    xtype: 'fieldcontainer',
    layout: 'hbox',
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Picture'
    },{
        xtype: 'component',
        autoEl: 'div',
        width: 32,
        height: 32,
        margin: '0 0 0 5',
        style: 'border: 1px solid #d0d0d0; border-radius: 50%'
    }]
}

这是一个说明这个概念的fiddle

Answer 2

这是表单字段

    fieldLabel: 'My Field',
    width: 330,
    id: 'displayColumn',
    name: 'displayColumn',
    allowBlank : false,
    value : '#CACACA',

这是表单监听器：

    listeners: {
        afterrender: function ( cmp ) {
            // Get the Window Container
            var container = this.body.dom.id;

            // Get the Component (ExtJS way)
            var comp = Ext.getCmp("displayColumn");
            // The ExtJS field ID is not the same you gave
            var el = comp.getEl();
            // Get the real Field ID 
            var displayColumnId = el.id;            
            // If you need its value...
            var initialColor = comp.getValue();

            // If you need to hide the field to make room to your div...
            // I mean if you want to replace the field and keep the label...
            // <YOUR_FIELD_ID>-triggerWrap
            $("#displayColumn-triggerWrap").css("display","none");

            // Append your div to the field container
            // <YOUR_FIELD_ID>-bodyEl
            $("#displayColumn-bodyEl").append(YOUR_DIV);
       }
}

根据需要为div做一些风格

将图像放在表单中的文本字段旁边

2 个答案: