Sencha复杂的布局

Question

我对sencha touch有点新意，我想实施以下图片请帮忙。 我已经摸不着头脑了一个星期，我找不到实现这个的方法:(

我希望它周围的图像和文本框是固定的，如果我可以使用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!');
                }
            }]
        }]
    },
});

thnx回答以下问题：Adding a click event to an element?