Transferring data to another view from the controller and setting the label value in sencha touch

Question

I have a controller and I want to pass a simple string value to the following view.

To do this, I create a 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 NextView , I have a label, and I want to set the value of the HTML label property that I pass from the controller. i.e. 'Value'.

My NextView is as follows.

  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 cannot have NextView as a form. I just need to pass a single string value in this situation. What is the best way to achieve this?

Answer 1

Use the initialize method to access configuration data as follows:

 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 favorite selector in the down function

Answer 2

I know the answer was given. But I just dug up a pretty natural way to pass data from the controller to the view (using the view constructor). I use this when integrating the web desktop into my application.

In the controller, pass data to the view constructor as follows:

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

In the view, expand the constructor as follows:

 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 anywhere in the view the builder lives in:

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