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的视口或全局父容器。此外，最佳做法是使用控制器将所有这些业务逻辑连接在一起。享受！

＆＃13;

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

＆＃13;

如何在复选框网格面板extjs中设置选定的行取决于textfield值

1 个答案: