css - Sencha 复杂布局

Question

我对sencha touch有点陌生，我想实现下图请帮助。我已经为此绞尽脑汁一个星期了，我找不到实现这个的方法:(

我想修复它周围的图像和文本框，如果我可以使用 css 做到这一点，那也很好，但我也找不到在 css 中实现它的方法，因为图像会根据在屏幕尺寸上，文本框不会相应移动:(

Answer 1

我找到了感兴趣的人的答案:

最终我不得不使用 css 进行手动调整，我无法使其动态化，所以我固定了宽度和高度，并使用 css 手动调整。

然后我可以使用以下代码绑定(bind)我的 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?