如何在復選框網格面板extjs中設置所選行取決於文本字段值

Question

我有一個網格面板，我想檢查與文本字段值相同的行。 任何人都可以幫助我。 這是我的代碼：

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
});

我的小提琴示例： http : //jsfiddle.net/y0uzha/f73kx37e/1/

Answer 1

看起來您只需要單向綁定，因此我建議將selectionchange偵聽器應用於selectionModel來設置groupField的值。 請參閱grid1＃listeners＃viewready 。 注意：我在表單面板中添加了一個ID，以便可以在其上獲取一個句柄。

一般來說，您不應在子組件上使用id屬性，因此它們可以重用。 最好使用具有ID的視口或全局父容器。 同樣，最佳實踐是使用控制器將所有這些業務邏輯連接在一起。 請享用！

 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 });