如何使用Sencha Touch在“HTML”配置中使用现有值？

Question

由于Sencha Touch拥有所有界面元素，我决定使用它。有人能告诉我如何将现有值集成到“HTML”配置项中吗？

代码显示如下：

我有一个form1

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

我还有一个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

我将假设您在用户更改值时尝试更新<td>元素。以下是执行此操作的代码：

    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>'
                );
            }
        ]
    });  

转到here了解有关模板的详情。