Question

Since Sencha Touch has all the interface elements, I decided to use it. Can someone tell me how to integrate the existing value in an items “HTML” config?

Codes are showing below:

I’ve got a form1

var form1 = new Ext.form.FormPanel({
    id: 'form1',
    standardSubmit : false,
    scroll:'vertical',
    dockedItems: [
        form1topToolBar
    ],
    items: [
        {
            xtype: 'textfield',
            name: 'form1One',
            label: 'Name'
        }
    ]    
});

I’ve also got a form2

var form2 = new Ext.form.FormPanel({
    id: 'form2',
    standardSubmit : false,
    scroll:'vertical',
    dockedItems: [
        form2topToolBar
    ],
    items: [
        {
            html: [
                '<table class="outputTable">',
                '<tr>',
                '<td>form1.getValues().form1One</td>',  <-------- Here is the value that I want. 
                '</tr>',
                '</table>'
            ]
        }
    ]    
});

Answer 1

I’m going to assume you are trying to update the <td> element when the user changes values. Here is the code to do that:

    var form1 = new Ext.form.FormPanel({
        id: 'form1',
        standardSubmit : false,
        scroll:'vertical',
        dockedItems: [
            form1topToolBar
        ],
        items: [
            {
                xtype: 'textfield',
                name: 'form1One',
                label: 'Name',
                listeners: {
                    'change' : {
                        fn : function (field, newValue, oldValue, eOpts) {
                            var myUpdatedText;  // example of calculated text
                            myUpdatedText = form1.getValues().form1One;
                            myUpdatedText += form2.getValues().form2Two;
                            Ext.getCmp('form2ChangingField').update({
                                updatedText : myUpdatedText
                            });
                        }
                    }
                }
            }
        ]    
    });       

    // other code here... then definition of form2 starts here

    var form2 = new Ext.form.FormPane({
        id: 'form2',
        standardSubmit : false,
        scroll:'vertical',
        dockedItems: [
            form2topToolBar
        ],
        items: [
            {
                xtype: 'textfield',
                name: 'form2Two'
            },
            {
                id: 'form2ChangingField',
                tpl: new Ext.Template('<table class="outputTable">'+
                                      '<tr>'+
                                      '<td>{updatedText}</td>'+
                                      '</tr>'+
                                      '</table>'
                );
            }
        ]
    });  

Go here to learn more about templates.