0

[煎茶触摸2.4.0]

我有一个问题，即针对标签和文本字段的引用调用的 .setHtml 和 .setValue 函数没有做任何事情，即更改没有按照需要在 UI 中显示，但是在执行代码行之后如果我运行 .getHtml 或 .getValue in浏览器的控制台 更改在控制台的输出中可见，但 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 甚至针对它们的 refs 调用其他函数，如 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 访问控件是唯一的方法吗？因为我在某处读到过，在 Sencha Touch 中通过 ID 访问控件并不是一件好事。我在这里做错了什么，所以我的代码在内部更改了控件的内容和属性，但没有根据需要反映在 UI 上。

4

1 回答 1

0

我检查了您的代码，发现这个问题是由于导航视图引起的。我不知道这个奇怪问题的原因，但是将导航视图更改为 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);
于 2014-11-13T07:08:01.337 回答