Sending values from a view to another using EXTJS

Question

Im' using EXT 4.2.0.

I have 2 views : view 1 and view 2.

In view 1 i have a Ext.grid.Panel which (in his associated controller) contains a selectionchange event lisetner .

After selectionchange is triggred, i go the the view 2 in which i have a form. My need is to have control on the from of the view 2 from view 1.

I mean by control sending values, disabling buttons ...

For information, concerning sending values issue, i'v already tried

Ext.getCmp('view2ID').getForm().loadRecord(this.getMyVar());

But this seems not to be working and i don't know why ! Could you help me please ? :)

To be more clear,are you creating form(yourView2) on selection change? — Dev, Feb 06 '14 at 11:47
I don't have the elements to know why it doesn't work in your case, but the scenario you describe seems quite basic. Have a method of your controller called by the event on view 1, that modifies view 2. — Lorenz Meyer, Feb 06 '14 at 11:53
I think i did understand what do you mean by 'creating'. In fact, a have an other method in an other controller (colled main in my case) which loads View2 — Monster, Feb 06 '14 at 11:59
I meant to say that are you creating new instance of your class(View2) on selection change event.But anyways I think you could use config property:http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.Class-cfg-config — Dev, Feb 06 '14 at 12:01

score 0 · Answer 1 · answered Feb 06 '14 at 12:44

Option 1 : As said by @Lorenz,call the method in your controller

selectionchange:function( record, selected, eOpts ){
     //getController
   controller = globalVar.getController('Controller');
   controller.onSelectionChangeEvent(record);
}

Option2 : You can pass config object to the View2 when creating a instance In view1,mention config property;

 //View 1....
 config :{
       recordObj : ''
   },
  .........
 selectionchange:function( record, selected, eOpts ){
     var form = Ext.create('My.view.Form',{recordObj :record});
 }
 ............

//Your View2 might be like 
Ext.define('My.view.Form', {
extend      : 'Ext.form.Panel',

   config :{
       recordObj : ''
   },

  initComponent : function() {
   var record = this.getRecordObj(); 
   this.items = [

               ];
     this.callParent();
     //Set form values
       this.getForm().setValues(record);
   }
});

score 0 · Answer 2 · answered Feb 06 '14 at 15:41

The problem was quiet difficult : Actions sent from View1 were executed befaure view 2 is rendred ! Even if my code was some think like this :

ControllerOfView1
{
CodeToLoadView2;
InstructionsToControlView2;
}

The solution was to add a listeners on my View2 and parametrize afterrender. So the code hase become :

 afterrender: function() {
            this.loadRecord(this.getMyVar2());
        }

score 0 · Answer 3 · answered Feb 11 '14 at 08:12

You can use the custom fire event , in that you can send the data you want and the component reference.

app.fireEvent('selectionChanged',view1.grid);

you need the listen for the selectionChanged in the view2. something like

app.on("selectionChanged",onSelectionChanged)

onSelectionChanged : function(grid){
            console.log(grid);
}

Sending values from a view to another using EXTJS

3 Answers3