Sencha Complicated layout

Question

I am kinda new to sencha touch, i would like to implement the following picture please help. I have been scratching my head around this for a week, i couldn't find a way to implement this :(

i want to have the image and text boxes around it fixed, if i can do that using css, it would be good too, but i also couldn't find a way to implement it in css, because the image resizes based on the screen size, and the textboxes won't move accordingly :(

enter image description here

score 0 · Accepted Answer · edited May 23 '17 at 10:25

I found the answer to who is interested:

Eventually i had to do a manual tuning using css, i couldn't make it dynamic, so i fixed the width and height, and manually tuned things using css.

and then i was able to bind my html code using the following code:

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 to the following answer: Adding a click event to an element?

Sencha Complicated layout

1 Answers1