Passing data to another view from controller and set a label's value in sencha touch

Question

I have a controller, and I want to pass a simple string value to the next View.

For that, I am creating the View like this.

var nextView = Ext.create('MyApp.view.NextView', {
    content: 'value'
});
Ext.Viewport.add(nextView);
Ext.Viewport.animateActiveItem(nextView, {
    type: 'slide',
    direction: 'left'
});

On the NextView, I have a label and I want to set the HTML property of the label to the value that I am passing from the controller. ie. value.

My NextView looks like this.

Ext.define('MyApp.view.NextView', {
    extend: 'Ext.form.Panel',
    config: {
        content: 'null',
        items: [{
            xtype: 'label',
            html: 'value'
        }]
    }
});

I am not sure how to proceed from here. I can't have the NextView as a form. I just need to pass one string value in this situation.

What's the best way to achieve this?

Answer 1

Use initialize method to access config data like this:

Ext.define('MyApp.view.NextView', {
    extend: 'Ext.form.Panel',
    config: {
        content: 'null',
        items: [
            {
                xtype: 'label',
                html: 'value'
            }
        ]
    },
    initialize : function(){
        this.callParent();
        var val = this.config.content;
        this.down('label').setHtml(val);
    }
});

PS Feel free to use your favourite selector in down function

Answer 2

I know the question has been answered. But I just digged up a pretty natural way to pass data from controller to a view (using view's constructor). I use this in my integration of web desktop to my app.

In controller, pass data to the constructor of the view as followed:

loiTab = Ext.create('Iip.view.giips.admission.DetailedLoiTab', {closable: true, selectedLoiData: selected[0].data});

In the view, spin up a constructor as followed:

constructor: function(selectedLoiData) {
    Ext.applyIf(this, selectedLoiData);
    this.callParent();
},

The following method lives in the same file as the constructor. You can access selectedLoiData from any where in the view the constructor lives as followed:

initComponent: function(){
    console.log(this.selectedLoiData);
}