如何在复选框网格面板 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
});

我的fiddle例子： http://jsfiddle.net/y0uzha/f73kx37e/1/

Answer 1

看起来您只需要单向绑定，所以我建议将 selectionchange 侦听器应用于 selectionModel 以设置值组字段。请参阅 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
});

如何在复选框网格面板 extjs 中设置选定行取决于文本字段值

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

extjs