Sencha Touch: Accessing the controls in view and calling their functions via their refrences in controller

Question

[Sencha Touch 2.4.0]

I have a problem where .setHtml and .setValue function called against the refrences of labels and textfields are not doing anything ie the change is not showcasing in UI as desired but after the line of code is executed If I run .getHtml or .getValue in the console of the browser the change is visible in the output of the console but nothing changes in the UI.

My scenario in this Test Application is I have 3 labels [lbl1,lbl2 and lbl3] and 3 textfields [txt1,txt2 and txt3] I access the lbl1,lbl3,txt1,txt3 via their refrences in the controller. I desire to change the content of the lbl1 and txt1 if user clicks the button in the same panel. I have another form [initial view] with only button. what It does is opens the panel with 3 labels, 3 textfields and a button as I have described above but before pushing this Panel I want to set lbl3 and txt3. In all the cases .setValue and .setHtml is not updating the UI. Can anyone help me what am I doing wrong in here? I have also attached the sencha architecture project in zip.

MainViewr (initial view)

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

});

2nd Panel

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

 });

Controller for the 1st View. Here I want to change the content of the label and textfield (lbl3 and txt3 which is on the 2nd view via thier refs) but setValue and setHtml or even calling other functions against their refs like hide() or setHidden(true) does not show on the UI but if I do getValue(), getHtml, getHidden in the browser's console thier hidden property and content is changed but it is not reflected on 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"
                });
}

});

Controller for 2nd View. As you can see I have tried to change the content of lbl1,lbl2,txt1 and txt2 in the button click but the content of only lbl2 and txt2 are changing because I have accessed them via their ID and not via reference.

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");
}

});

Is accessing controls via their IDs is the only way? because I have read somewhere that accessing the controls via ID is not very good thing to do in Sencha Touch. What am I doing wrong in here so that my code changes the content and properties of the controls internally but not reflected on UI as desired.

Answer 1

I checked your code and found out that this problem is causing because of the navigation view. I don't know the reason for this weird problem but changing the navigation view to Container solved the problem.

Main View :-

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

});

Set the form view on btnlogin_click like this:-

 Ext.Viewport.setActiveItem(myformpanel1);

---