javascript - ExtJS 仅在条件下显示 RowExpander

标签 javascript extjs grid extjs3

我目前有一个相当大的网格,并成功地使用 RowExpander 插件在某些行上显示补充信息。我的问题是,并非所有行都包含上述补充信息,我不希望 RowExpander 处于事件状态,也不希望在特定数据存储的条目为空时显示它的“+”图标。我尝试在 RowExpander 对象上使用传统的“renderer”属性,但它不起作用。

基本上,只有在特定数据存储的字段 != ""时,您如何才能显示和激活 RowExpander 的图标和双击?

提前致谢! =)

编辑:我找到了解决方案

正如 e-zinc 所说,部分解决方案(至少对我而言)是提供一个自定义渲染器来检查我的条件字段。这是我的 RowExpander:

this.rowExpander = new Ext.ux.grid.RowExpander({
    tpl: ...
    renderer: function(v, p, record) {
                if (record.get('listeRetourChaqueJour') != "") {
                    p.cellAttr = 'rowspan="2"';
                    return '<div class="x-grid3-row-expander"></div>';
                } else {
                    p.id = '';
                    return '&#160;';
                }
    },
    expandOnEnter: false,
    expandOnDblClick: false
});

现在,这里的技巧是对于这个特定的网格,我选择不允许 expandOnEnter 和 expanOnDblClick,因为 RowExpander 有时不会被呈现。此外,将包含“+”图标的网格单元格的 CSS 类是“x-grid3-td-expander”。这是因为 CSS 类自动设置为 x-grid3-td-[id-of-column]。因此,仅当我不渲染 rowExpander 时将 id 设置为 '',我还删除了未渲染单元格的灰色背景。所以,没有双击,没有回车,没有图标,没有灰色背景。对于我的数据存储字段为空的列(当我不想要 RowExpander 时),它真的变得好像完全没有涉及 RowExpander。

这对我有用。对于希望保留单元格 ID 或希望保持双击和输入事件正常工作的人来说,除了扩展我猜的类之外别无他法。希望这可以帮助其他陷入困境的人!

最佳答案

正如 e-zinc 所说,部分解决方案(至少对我而言)是提供一个自定义渲染器来检查我的条件字段。这是我的 RowExpander:

this.rowExpander = new Ext.ux.grid.RowExpander({
    tpl: ...
    renderer: function(v, p, record) {
                if (record.get('listeRetourChaqueJour') != "") {
                    p.cellAttr = 'rowspan="2"';
                    return '<div class="x-grid3-row-expander"></div>';
                } else {
                    p.id = '';
                    return '&#160;';
                }
    },
    expandOnEnter: false,
    expandOnDblClick: false
});

现在,这里的诀窍是对于这个特定的网格,我选择不允许 expandOnEnter 和 expandOnDblClick 特别是因为 RowExpander 有时不会被呈现。此外,将包含“+”图标的网格单元格的 CSS 类是“x-grid3-td-expander”。这是因为 CSS 类自动设置为 x-grid3-td-[id-of-column]。因此,通过仅在我不呈现 rowExpander 时将 id 设置为空字符串,我还删除了不提供任何扩展的单元格的灰色背景。所以,没有双击,没有回车,没有图标,没有灰色背景。对于我的数据存储字段为空的列(当我不想要 RowExpander 时),它真的变得好像完全没有涉及 RowExpander。

这对我有用。对于希望保留单元格 ID 或希望保持双击和输入事件正常工作的人来说,在我看来,除了扩展 RowExpander 类之外别无他法。当然,也可以使用 Ext.override(),但是 RowExpander 的所有实例都会被覆盖命中。

关于javascript - ExtJS 仅在条件下显示 RowExpander,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9130481/

相关文章:

python - 在图像上网格以计算平均颜色

css - 根据数量,用小方 block 填充大方 block (div)内的整个区域

javascript - 如何对数据表进行排序?

javascript - 错误 405 : Method Not allowed flask, ajax

javascript - Sencha Extjs 6 如何禁用数字字段中的小数输入

javascript - extjs 4 中的范围问题

r - 使用 sf 围绕点(质心)创建网格

javascript - 使用 for 循环替换数组中的元素 javascript 未正确替换元素

javascript - React 和 Electron 与 Bablify : Uncaught TypeError: fs. readFileSync 不是一个函数

javascript - 从网格 extjs 任务栏内的按钮调用 servlet