Sencha touch Sencha Touch：访问视图中的控件，并通过控制器中的引用调用其功能

[Sencha Touch 2.4.0]

我有一个问题，针对标签和文本字段的引用调用的.setHtml和.setValue函数没有做任何事情，即更改没有按要求显示在UI中，但在执行代码行后，如果我在浏览器的控制台中运行.getHtml或.getValue，则更改在控制台的输出中可见，但什么都没有UI中的更改

我在这个测试应用程序中的场景是，我有3个标签[lbl1、lbl2和lbl3]和3个文本字段[txt1、txt2和txt3]，我通过它们在控制器中的引用访问lbl1、lbl3、txt1和txt3。如果用户单击同一面板中的按钮，我希望更改lbl1和txt1的内容。我有另一个表单[初始视图]，只有一个按钮。它所做的是打开带有3个标签、3个文本字段和一个按钮的面板，正如我前面所述，但在按下此面板之前，我想设置lbl3和txt3。在所有情况下，.setValue和.setHtml都不会更新UI。谁能帮我一下我在这里做错了什么？我还附上了zip中的sencha架构项目

主视图（初始视图）

第二小组

Ext.define('MyApp.view.MyFormPanel1', {
extend: 'Ext.form.Panel',
alias: 'widget.myformpanel1',

requires: [
    'Ext.Panel',
    'Ext.Button',
    'Ext.field.Text',
    'Ext.Label'
],

config: {
    itemId: 'myformpanel1',
    scrollable: true,
    items: [
        {
            xtype: 'panel',
            docked: 'top',
            height: '100%',
            scrollable: true,
            items: [
                {
                    xtype: 'button',
                    itemId: 'mybutton',
                    text: 'MyButton'
                },
                {
                    xtype: 'textfield',
                    itemId: 'txt3',
                    label: 'Field'
                },
                {
                    xtype: 'textfield',
                    id: 'txt2',
                    itemId: 'txt2',
                    label: 'Field',
                    name: 'txt2'
                },
                {
                    xtype: 'textfield',
                    itemId: 'txt1',
                    label: 'Field'
                },
                {
                    xtype: 'label',
                    html: 'Name 3',
                    itemId: 'lbl3'
                },
                {
                    xtype: 'label',
                    html: 'Name 2',
                    id: 'lbl2',
                    itemId: 'lbl2'
                },
                {
                    xtype: 'label',
                    html: 'Name1',
                    itemId: 'lbl1'
                }
            ]
        }
    ]
}

 });

第一个视图的控制器。在这里，我想更改标签和文本字段的内容（lbl3和txt3，通过它们的引用显示在第二个视图上），但是setValue和setHtml，甚至对它们的引用调用其他函数，如hide（）或setHidden（true），都不会显示在UI上，但是如果我执行getValue（），getHtml，getHidden在浏览器控制台中，其隐藏属性和内容已更改，但未反映在UI上

Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',

config: {
    refs: {
        mainView: 'navigationview#mynavigationview',
        lbl3: 'label#lbl3',
        txt3: 'textfield#txt3',
        myFormPanel1: 'formpanel#myformpanel1'
    },

    control: {
        "button#mybutton1": {
            tap: 'btnlogin_click'
        }
    }
},

btnlogin_click: function(button, e, eOpts) {
                var myformpanel1 = Ext.create('widget.myformpanel1');
                lbl3 = this.getLbl3();
                txt3=this.getTxt3();

                mainView = this.getMainView();

                 txt3.setValue('Hello');
                 lbl3.setHtml('Hello');
                mainView.push({
                   xtype: "myformpanel1",
                   title: "Dashboard"
                });
}

});

第二视图的控制器。如您所见，我已尝试在按钮单击中更改lbl1、lbl2、txt1和txt2的内容，但只有lbl2和txt2的内容正在更改，因为我通过它们的ID而不是通过引用访问它们

Ext.define('MyApp.controller.MyController1', {
extend: 'Ext.app.Controller',

config: {
    refs: {
        lbl1: 'label#lbl1',
        txt1: 'textfield#txt1'
    },

    control: {
        "button#mybutton": {
            tap: 'setText_Click'
        }
    }
},

setText_Click: function(button, e, eOpts) {
            lbl1 = this.getLbl1();
            txt1 = this.getTxt1();

            Ext.getCmp('txt2').setValue("Hello");
            Ext.getCmp('lbl2').setHtml("Hello");

            txt1.setValue("Hello");
            lbl1.setHtml("Hello");
}

});

---

通过其ID访问控件是唯一的方法吗？因为我在某个地方读到，在SenchaTouch中，通过ID访问控件不是一件很好的事情。我在这里做错了什么，以至于我的代码在内部更改了控件的内容和属性，但没有按照需要反映在UI上。

我检查了您的代码，发现这个问题是由导航视图引起的。我不知道这个奇怪问题的原因，但将导航视图更改为容器解决了这个问题

主要观点：-

Ext.define('MyApp.view.MainView', {
    extend: 'Ext.Container',
    xtype: 'main',

    requires: [
    'Ext.form.Panel',
    'Ext.Button'
    ],

    config: {
        itemId: 'mynavigationview',
        items: [
        {
            xtype: 'button',
            itemId: 'mybutton1',
            text: 'MyButton1'
        }
        ]
    }

});

在

btnlogin\u上设置表单视图，单击如下所示：-

 Ext.Viewport.setActiveItem(myformpanel1);

您可以查看此答案-谢谢您的回复。我在另一个问题中尝试了你的答案，但没有任何新的效果。结果是一样的。在参考文献中，我做了lbl3:'label[itemId=“lbl3”]”，txt3:'textfield[name=“txt3”]”，但控制台给出了一个错误，称txt3未定义。id在另一个控制器中也做了类似的精简，lbl1:'label[itemId=“lbl1”]”，txt1:'textfield[name=“txt1”]”，但它没有给出任何错误，并且在控制台txt1中。getValue也更改了它的值，但它再次没有反映在UI上。txt3带有未定义的错误，但不是txt1。好的，请给我一些时间。我正在测试您的代码。您好，这确实更新了MyContainer1（或myformpanel1）中的内容，但没有导航栏。这样做对吗？如果我必须添加多个容器，是否必须在每个容器中放置导航栏？我希望“后退”按钮也能在我的应用程序上工作。我从不使用“导航视图”，因为和你一样，我在使用它时也遇到了很多问题，所以我总是避免使用它。为了使后退按钮工作，我分别为所有按钮编写代码。为了让android设备的后退按钮正常工作，我在我的应用程序中使用了路由。谢谢你的建议。
 Ext.Viewport.setActiveItem(myformpanel1);