森查复杂布局

Question

我有点新的感觉触摸，我想实现以下图片请帮助。这一周来，我一直在绞尽脑汁，却想不出办法来实现它：

我想把图像和文本框固定在它周围，如果我可以用css来实现，那也很好，但我也找不到在css中实现它的方法，因为图像根据屏幕大小调整大小，文本框不会相应地移动:(

​

​

Answer 1

我找到了对谁感兴趣的答案：

最后，我不得不使用css进行手动调优，无法使其具有动态性，所以我确定了宽度和高度，并使用css手动调优。

然后，我能够使用以下代码绑定我的html代码：

Ext.define('PECO.view.Aanhaalmoment', {
    extend: 'Ext.Container',
    xtype: 'Aanhaalmoment',
    title: "Home View",
    autoscroll: true,
    style: 'background-color: white',
    config: {
        scrollable: true,
        items:[{
        html: '<div class="container-div" >'+
            '<div class="bg-container">' +
                '<img class="bg" src="/peco/resources/images/screw-bkg.png"/>' +
            '</div>' +
            '<table>' +
                '<tr>' +
                    '<td valign="middle" class="left"> Incubus sleutelwijdte [mm](s) </td> ' +
                    '<td valign="middle" align="center" class="right"> <input type="text" disabled class="inputfield"></td>' +
                '</tr>' +
                '<tr>' +
                    '<td valign="middle" class="left"> ø Inbusboutkop [mm](dk) </td>' +
                    '<td valign="middle" align="center" class="right"> <input type="text" disabled class="inputfield"></td>' +
                '</tr>' +
                '<tr>' + 
                    '<td valign="middle" class="left"><span style="color: red;"> Boutmaat [mm](d) </span> </td> ' +
                    '<td valign="middle" align="center" class="right"> ' +
                        '<button class="arrow left" id="btnLeft"></button>' +
                        '<button class="arrow right"></button>' +
                        '<span class="number middle"> 23 </span>' +
                    '</td>' +
                '</tr>'+                
            '</table>' +
        '</div>',

        listeners: [
            {   
                element: 'element',
                delegate: 'button.arrow.left',
                event: 'tap',
                fn: function() {
                    console.log('I need to increase some [j] index of some array!');
                }
            },
            {   
                element: 'element',
                delegate: 'button.arrow.right',
                event: 'tap',
                fn: function() {
                    console.log('I need to decrease some [j] index of some array!');
                }
            }]
        }]
    },
});

回答如下：Adding a click event to an element?