在Grid中使用RowEditing和CheckBoxSelectionModel失败

时间：2014-07-04 07:31:19

标签： gxt

在GXT Grid中，我尝试使用RowEditing和CheckBoxSelectionModel。 Sencha Explorer Demo在Row Editable Grid和CheckBox Grid示例中有这些示例，但它们没有显示包含这些功能组合的示例。当我在同一网格上使用这两个功能时，我没有得到我预期的行为。如果我点击＆＃34;选择＆＃34;复选框行被置于编辑模式，我希望复选框只是从选中更改为未选中，反之亦然。此外，当行被置于编辑模式时，该行上存在损坏。以下是在单击该行中的任何值之前网格中的一行示例：

enter image description here

以下是点击其中一个值后的那一行：

enter image description here

有没有人有这方面的经验？

更新

这是一个演示该问题的示例类：

package org.greatlogic.gxtgrid.client;

import java.util.ArrayList;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.sencha.gxt.core.client.IdentityValueProvider;
import com.sencha.gxt.core.client.ValueProvider;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.data.shared.ModelKeyProvider;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.form.TextField;
import com.sencha.gxt.widget.core.client.grid.CheckBoxSelectionModel;
import com.sencha.gxt.widget.core.client.grid.ColumnConfig;
import com.sencha.gxt.widget.core.client.grid.ColumnModel;
import com.sencha.gxt.widget.core.client.grid.Grid;
import com.sencha.gxt.widget.core.client.grid.GridView;
import com.sencha.gxt.widget.core.client.grid.editing.GridRowEditing;

public class GXTGrid implements EntryPoint {
//-------------------------------------------------------------------------
@Override
public void onModuleLoad() {
  ListStore<Pet> listStore = new ListStore<>(new ModelKeyProvider<Pet>() {
    @Override
    public String getKey(Pet pet) {
      return Integer.toString(pet.getPetId());
    }
  });
  IdentityValueProvider<Pet> ivp = new IdentityValueProvider<>();
  CheckBoxSelectionModel<Pet> sm = new CheckBoxSelectionModel<>(ivp);
  ArrayList<ColumnConfig<Pet, ?>> ccList = new ArrayList<>();
  ccList.add(sm.getColumn());
  ColumnConfig<Pet, String> cc1;
  cc1 = new ColumnConfig<>(Pet.getPetNameValueProvider(), 100, "Name");
  ccList.add(cc1);
  ColumnModel<Pet> columnModel = new ColumnModel<>(ccList);
  Grid<Pet> grid = new Grid<>(listStore, columnModel);
  grid.setSelectionModel(sm);
  grid.setView(new GridView<Pet>());
  GridRowEditing<Pet> gre = new GridRowEditing<>(grid);
  gre.addEditor(cc1, new TextField());
  listStore.add(new Pet(1, "Lassie"));
  listStore.add(new Pet(2, "Scooby"));
  listStore.add(new Pet(3, "Snoopy"));
  ContentPanel contentPanel = new ContentPanel();
  contentPanel.add(grid);
  RootLayoutPanel.get().add(contentPanel);
}
//-------------------------------------------------------------------------
private static class Pet {
private int _petId;
private String    _petName;
public static ValueProvider<Pet, String> getPetNameValueProvider() {
  return new ValueProvider<Pet, String>() {
    @Override
    public String getPath() {
      return "Pet.PetName";
    }
    @Override
    public String getValue(Pet pet) {
      return pet._petName;
    }
    @Override
    public void setValue(Pet pet, final String value) {
      pet._petName = value;
    }
  };
}
public Pet(int petId, final String petName) {
  _petId = petId;
  _petName = petName;
}
public int getPetId() {
  return _petId;
}
}
//-------------------------------------------------------------------------
}

2 个答案:

答案 0 :(得分：1)

使用CheckBoxSelectionModel进行GridRowEditing的这种行为是完全正常的。

我用你的代码来尝试一些东西。我认为，正如我猜测的那样，使用GridRowEditing和CheckBoxSelectionModel的最佳方式是双击开始编辑，因为只需点击一下即可完成任何操作。为此，只需添加

gre.setClicksToEdit(ClicksToEdit.TWO);

否则，如果您真的不想使用两次点击开始编辑，也可以使用InlineRowEditing，这样您就可以根据需要使用CheckBoxSelectionModel。

最终，您可以覆盖GridRowEditing的整个行为，仅在一次点击时正确处理CheckBoxSelectionModel，但它会更复杂，需要更多我没有的GXT框架的特定知识。

答案 1 :(得分：1)

我还没有使用CheckBoxSelectionModel找到解决此问题的方法，所以我决定尝试另一种方法，即在包含复选框的网格中添加一列，并处理状态手动选择。要做到这一点，我发现我需要回应一些事情，这并不是太糟糕。这是示例代码的新版本，它应该为实际实现提供一个起点：

import java.util.ArrayList;
import java.util.TreeSet;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.sencha.gxt.cell.core.client.form.CheckBoxCell;
import com.sencha.gxt.core.client.ValueProvider;
import com.sencha.gxt.core.client.dom.XElement;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.data.shared.ModelKeyProvider;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.form.CheckBox;
import com.sencha.gxt.widget.core.client.form.Field;
import com.sencha.gxt.widget.core.client.form.TextField;
import com.sencha.gxt.widget.core.client.grid.CellSelectionModel;
import com.sencha.gxt.widget.core.client.grid.ColumnConfig;
import com.sencha.gxt.widget.core.client.grid.ColumnModel;
import com.sencha.gxt.widget.core.client.grid.Grid;
import com.sencha.gxt.widget.core.client.grid.GridView;
import com.sencha.gxt.widget.core.client.grid.editing.GridRowEditing;

public class GXTGrid implements EntryPoint {
//-------------------------------------------------------------------------
private ListStore<Pet>   _listStore;
private TreeSet<Integer> _selectedPetIdSet;
//-------------------------------------------------------------------------
@Override
public void onModuleLoad() {
  _selectedPetIdSet = new TreeSet<>();
  _listStore = new ListStore<>(new ModelKeyProvider<Pet>() {
    @Override
    public String getKey(Pet pet) {
      return Integer.toString(pet.getPetId());
    }
  });
  final CellSelectionModel<Pet> sm = new CellSelectionModel<>();
  ArrayList<ColumnConfig<Pet, ?>> ccList = new ArrayList<>();
  ValueProvider<Pet, Boolean> selectValueProvider;
  selectValueProvider = new ValueProvider<GXTGrid.Pet, Boolean>() {
    @Override
    public String getPath() {
      return "SelectCheckBox";
    }
    @Override
    public Boolean getValue(Pet pet) {
      return _selectedPetIdSet.contains(pet.getPetId());
    }
    @Override
    public void setValue(Pet pet, final Boolean selected) { //
    }
  };
  ColumnConfig<Pet, Boolean> cc0 = new ColumnConfig<>(selectValueProvider, 23, "");
  CheckBoxCell checkBoxCell = new CheckBoxCell() {
    @Override
    protected void onClick(XElement parent, final NativeEvent event) {
      super.onClick(parent, event);
      Pet pet = sm.getSelectedItem();
      if (!_selectedPetIdSet.remove(pet.getPetId())) {
        _selectedPetIdSet.add(pet.getPetId());
      }
    }
  };
  cc0.setCell(checkBoxCell);
  cc0.setFixed(true);
  cc0.setHideable(false);
  cc0.setMenuDisabled(true);
  cc0.setResizable(false);
  cc0.setSortable(false);
  ccList.add(cc0);
  ColumnConfig<Pet, String> cc1;
  cc1 = new ColumnConfig<>(Pet.getPetNameValueProvider(), 100, "Name");
  ccList.add(cc1);
  ColumnModel<Pet> columnModel = new ColumnModel<>(ccList);
  Grid<Pet> grid = new Grid<>(_listStore, columnModel);
  grid.setSelectionModel(sm);
  grid.setView(new GridView<Pet>());
  GridRowEditing<Pet> gre = new GridRowEditing<>(grid);
  Field<Boolean> checkBox = new CheckBox();
  checkBox.setEnabled(false);
  gre.addEditor(cc0, checkBox);
  gre.addEditor(cc1, new TextField());
  _listStore.add(new Pet(1, "Lassie"));
  _listStore.add(new Pet(2, "Scooby"));
  _listStore.add(new Pet(3, "Snoopy"));
  ContentPanel contentPanel = new ContentPanel();
  contentPanel.add(grid);
  RootLayoutPanel.get().add(contentPanel);
}
//-------------------------------------------------------------------------
private static class Pet {
private int _petId;
private String    _petName;
public static ValueProvider<Pet, String> getPetNameValueProvider() {
  return new ValueProvider<Pet, String>() {
    @Override
    public String getPath() {
      return "Pet.PetName";
    }
    @Override
    public String getValue(Pet pet) {
      return pet._petName;
    }
    @Override
    public void setValue(Pet pet, final String value) {
      pet._petName = value;
    }
  };
}
public Pet(int petId, final String petName) {
  _petId = petId;
  _petName = petName;
}
public int getPetId() {
  return _petId;
}
}
//-------------------------------------------------------------------------
}
相关问题
最新问题