Extjs получить доступ к одному виду от другого

Question

В Extjs я пытаюсь получить доступ к некоторому набору данных на одном представлении из другого представления. Оба представления отображаются на одной странице. Я создал небольшое приложение в sencha fiddle, которое показывает, что я пытаюсь сделать. Когда вы нажимаете на второе текстовое поле, оно должно отображать данные из первого текстового поля.

Я хочу, чтобы вытащить его, используя его эталонное значение

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 

     Ext.create('Ext.panel.Panel', { 
      title: 'Hello', 
      reference: 'HelloPanel', 
      width: 200, 
      html: '<input type="text">', 
      renderTo: Ext.getBody() 
     }); 

     Ext.create('Ext.panel.Panel', { 
      title: 'Hello2', 
      reference: 'fooGrid', 
      width: 200, 
      html: '<input type="text">', 
      renderTo: Ext.getBody(), 
      listeners: { 
       click: { 
        element: 'el', 
        fn: function() { 
         alert('Show data from HelloPanel1'); 
        } 
       } 
      } 


     }); 

    } 
}); 

Answer 1

Посмотрите на это. Только что внесли некоторые изменения: Поскольку есть только Представленное представление, вам необходимо определить referenceHolder.

Ниже приведен пример слишком тривиального, чтобы показать силу ссылки. Для этого вам нужно сделать ViewController. Bind представил представление контроллеру с конфигурацией controller. Затем в контроллере вы можете сделать что-то вроде этого this.lookupReference('superAwesomeTextbox');. И теперь у вас есть привязка к этому компоненту в контроллере. Следует отметить, что referenceHolder не требуется для ViewController. Простой, как есть.

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 

     var panel1 = Ext.create('Ext.panel.Panel', { 
      title: 'Hello', 
      referenceHolder: true, 
      reference: 'HelloPanel', 
      width: 300, 
      items:[{ 
       xtype: 'textfield', 
       fieldLabel: 'textbox', 
       reference: 'superAwesomeTextbox' 
      }], 
      renderTo: Ext.getBody() 
     }); 

     var panel2 = Ext.create('Ext.panel.Panel', { 
      title: 'Hello2', 
      reference: 'fooGrid', 
      referenceHolder: true, 
      width: 300, 
      items:[{ 
       xtype: 'textfield', 
       fieldLabel: 'textbox', 
       reference: 'superAwesomeTextbox2', 
       listeners: { 
        focus: function(comp){ 
         var textbox = panel1.lookupReference('superAwesomeTextbox'); 
         comp.setValue(textbox.getValue()); 
        } 
       } 
      }], 
      renderTo: Ext.getBody(), 
     }); 

    } 
});