Set Triggerfield value from controller - model-view-controller

Question

I try to binding data from window grid that show by trigger field click.
this is my form with triggerfield :
Ext.define('ResApp.view.group.Detail', {
extend: 'Ext.window.Window',
alias:'widget.groupdetail',
floating: true,
hidden: false,
width: 450,
//height: 400,
resizeable: false,
title: 'Detail Group',
modal: true,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
....other config...
items: [
{
xtype: 'form',
itemId: 'groupDetailForm',
border: false,
layout: {
type: 'auto'
},
bodyPadding: 10,
preventHeader: true,
title: 'My Form',
items: [
....other items...
{
xtype: 'triggerfield',
padding: '0 0 5 0',
width: 350,
fieldLabel: 'Nama Kontak',
name: 'namaJamaah',
itemId: 'namaLead',
triggerCls: ' x-form-search-trigger',
onTriggerClick: function(){
Ext.widget('listjamaahgroup').show();
}
},
....other items...
]
}
]
});
me.callParent(arguments);
}});
next, my window with grid to list data :
Ext.define('ResApp.view.group.ListJamaahGroup', {
extend: 'Ext.window.Window',
alias:'widget.listjamaahgroup',
height: 400,
width: 750,
title: 'Daftar Jamaah',
modal: true,
hidden: false,
floating: true,
resizeable: false,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items : [
{
xtype: 'gridpanel',
autoScroll: true,
border:false,
title: 'Daftar Anggota',
itemId: 'gridAnggota',
preventHeader: true,
forceFit: true,
flex: 1,
store: 'Jamaah',
allowDeselect : true,
viewConfig: {
autoScroll: true
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
cls:'border-bottom',
items: [
{
xtype: 'button',
text: 'Pilih',
iconCls:'edit',
action: 'selectJamaahGrp',
itemId: 'selectJamaahGrp'
},
{
xtype: 'button',
text: 'Baru',
iconCls:'add'
}
]
}
],
columns: [
....Grid columns...
]
}
]
});
me.callParent(arguments);
}});
and this is my controller :
Ext.define('ResApp.controller.GroupDetails', {
extend: 'Ext.app.Controller',
stores: [
'Group', 'Jamaah'
],
models: [
'Group', 'Jamaah'
],
views:[
'group.Detail',
'group.ListJamaahGroup'
],
init: function(){
this.control({
...
'button[action=selectJamaahGrp]': {
click: this.selectJamaahGrp
},
...
});
},
... other functions ...
selectJamaahGrp: function(button, e, options) {
//windowDetail.hide();
var grid = button.up('grid');
if (grid) {
var windowDetail = Ext.widget('groupdetail');
var form = windowDetail.down('form');
var sm = grid.getSelectionModel();
var rs = sm.getSelection();
if (!rs.length) {
Ext.Msg.alert('Info', 'Pilih salah satu');
return;
}
var data = grid.getSelectionModel().getSelection()[0];
//how to setValue to triggerfield from here
}
button.up('listjamaahgroup').destroy();
},
batalSelClick: function(button, e, options) {
button.up('listjamaahgroup').destroy();
}
... other functions ...})
my problem is, i can't figure how to setValue the triggerfield from my controller. Or there's another way to do it?

Answer 1

Just define a ref in your controller (refs: [ { ref: 'trigger', selector: 'triggerfield' } ]) and then perform this.getTrigger().setValue().