EXTJS ||在 GridPanel 中实施复​​选框选择模型时需要帮助

Posted 2023-02-26

【中文标题】EXTJS ||在 GridPanel 中实施复​​选框选择模型时需要帮助

【英文标题】：EXTJS || Need help in implementing the Checkbox Selection Model in the GridPanel

【发布时间】：2014-01-08 14:15:54

【问题描述】：

我在 EXTJS 4.1 中实现以下提到的功能时遇到了问题：

我已实现 Ext.selection.CheckboxModel 以使用户能够从 GridPanel 的现有行中选择任何行。 单击此选择模型的复选框时，用户将在网格本身的复选框旁边看到编辑和删除按钮提示。 点击编辑，相应（选中）行中的数据将移动到下面的FormPanel。从而赋予用户更改输入数据的权限。 点击删除后，相应的（选中的）行将从 GridPanel 中删除。

我能够使用 CheckboxModel 在网格中创建复选框，但无法继续满足要求。

我尝试了 Sencha/Google 提供的各种示例和建议，但仍然找不到任何解决方案。

在这种情况下，任何示例/指针都将受到高度赞赏。

【问题讨论】：

你能分享一些相关的代码，说明你到目前为止得到了什么以及你尝试了什么？

您在执行方面有什么特别的困难？您是否能够将记录加载到表单中？代码将是有益的。

您可以使用action 列代替按钮（用于编辑和删除），您可以在其中放置一个带有适当点击事件的简单图标！

【参考方案1】：

这就是我解决这个问题的方法：

在复选框列旁边放置一个带有两个按钮的actioncolumn。给动作列一个固定的宽度。为两个项目（按钮）设置自定义样式，就像在选定的节目上一样。使用 css 为按钮设置样式以仅在选定的行上显示。

columns: [
    xtype: 'actioncolumn',
    width: 40,
    items: [
        iconCls: 'onselect-show',
...

css:

.onselect-show display: none; // hide
.x-grid-row-selected .onselect-show display: inline; // restore default

顺便说一句，我发现您的要求存在矛盾。 The buttons you're talking about don't make sense when more than one row is selected, but the checkbox selection model is specifically intended for multiple selection. 将 onfocused-show 与 x-grid-row-focused 一起使用怎么样？这将允许进行多项选择，并且仍然只在一行上显示按钮，即具有焦点的那一行。