how set selected row in checkbox grid panel extjs depends textfield value - extjs

Question

i have a grid panel and i want checked the row same as the value of text field.
anyone can help me.?
this is my code:
var check = new Ext.selection.CheckboxModel({
checkOnly : true,
listeners: {
change: function(checkbox, value) {
}
}
});
Ext.create('Ext.form.Panel', {
renderTo: "example-grid",
bodyStyle: 'padding: 5px 5px 0 5px;',
items: [
{
xtype: 'textfield',
fieldLabel: 'Group Fields ',
value:'a',
readOnly: true,
inputId: 'group'
}]
});
var grid1 = Ext.create('Ext.grid.Panel', {
title: 'Group Fields',
id:'gridPanel',
selModel: check,
store: Ext.data.StoreManager.lookup('tes'),
columns: [{
text: 'Field',
dataIndex: 'field',
flex: 1
}],
viewConfig: {
markDirty: false
},
height: 200,
width: 200
});
my fiddle example:
http://jsfiddle.net/y0uzha/f73kx37e/1/

Answer 1

Looks like you just need one-way binding so I would suggest to apply a selectionchange listener to the selectionModel to set the value of the groupField. See grid1#listeners#viewready. Note: I added an id to the form panel so that you can get a handle on it.
Generally speaking you should not use the id propery on child components, so they can be reusable. It would be better practice to use a viewport or a global parent container that has an id. Also, it would be best practice to use a controller to wire all this business logic together. Enjoy!
var check = new Ext.selection.CheckboxModel({
checkOnly: true
});
Ext.create('Ext.form.Panel', {
id: 'formPanel',
renderTo: "example-grid",
bodyStyle: 'padding: 5px 5px 0 5px;',
items: [{
itemId: 'groupField',
xtype: 'textfield',
fieldLabel: 'Group Fields ',
readOnly: true,
inputId: 'group'
}]
});
var grid1 = Ext.create('Ext.grid.Panel', {
title: 'Group Fields',
id: 'gridPanel',
selModel: check,
store: Ext.data.StoreManager.lookup('tes'),
columns: [{
text: 'Field',
dataIndex: 'field',
flex: 1
}],
viewConfig: {
markDirty: false
},
listeners: {
viewready: function() {
var selModel = this.getSelectionModel();
//Bind the groupField's value to the selected records
selModel.on('selectionchange', function(selModel, selections, eOpts) {
var groupField = Ext.getCmp('formPanel').queryById('groupField'),
groupValues = Ext.pluck(Ext.pluck(selections, 'data'), 'field');
groupField.setValue(Ext.Array.sort(groupValues).toString());
});
//Initially selects the first item in the grid
selModel.selectRange(0, 0);
}
},
height: 200,
width: 200
});