Question

[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架构项目。

MainViewr（初始视图）

Ext.define('MyApp.view.mainView', {
extend: 'Ext.navigation.View',

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

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

});

第二小组

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，这是通过他们的refs在第二个视图上）但是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访问控件是唯一的方法吗？因为我已经读过某个地方，通过ID访问控件在Sencha Touch中做的不是很好。我在这里做错了什么，以便我的代码在内部更改控件的内容和属性，但不会在UI上反映出来。

Answer 1

我检查了您的代码，发现由于导航视图导致此问题。我不知道这个奇怪问题的原因，但将导航视图更改为Container解决了问题。

主要观点： -

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_click上设置表单视图，如下所示： -

 Ext.Viewport.setActiveItem(myformpanel1);

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

1 个答案: