ExtJS扩展：扩展grid之toolbar button禁用表达式

最新推荐文章于 2025-08-07 21:48:39 发布

weixin_34187822

最新推荐文章于 2025-08-07 21:48:39 发布

阅读量112

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tubo/p/3419465.html

本文介绍如何在ExtJS Grid中通过记录数据动态禁用Toolbar按钮，包括基于表达式的禁用方法及其实现原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前一篇文章我们扩展了grid通过选中记录数来禁用toolbar上的按钮，有时候我们需要通过记录中的数据来决定是否禁用按钮，今天我们就来扩展它。

照例，最新的代码和例子都在github上：ExtJsExtend

先看看使用代码（这里只有部分代码，可以结合前一篇文章来阅读或者直接通过github获取最新代码）：

 
                buttonDisable: { 
                    noSelection: ['Edit', 'Delete', 'Print'], 
                    moreSelections: ['Edit'], 
                    expressions: { 
                        Edit: '$phone == "555-222-1254"' 
                    } 
                },

（这里重构了前一篇文章中的用法，将noSelectionDisable、oneSelectionDisable、moreSelectionsDisable整合进buttonDisable中了）。

expressions就是表达式，用item的name或itemId作为Key，表达式就是javascript的表达式，需要注意的是要在field的名称前加$(因为最终要替换$，通过eval来运行表达式)。来看看效果：

嗯，这条记录是可以编辑的。

这条记录不能编辑，因为phone== “555-222-1254”。

看看这部分扩展的代码：

 
            if (me.buttonDisable.expressions) { 
                var exps = me.buttonDisable.expressions; 
                for (var btn in exps) { 
                    var exp = exps[btn]; 
                    for(var i = 0, il = records.length;i<il;i++) { 
                        var data = records[i].data; 
                        exp = exp.replace(/\$/g, 'data.'); 
                        var disabled = eval(exp); 
                        if (disabled === true) { 
                            disables[btn] = true; 
                            break; 
                        } 
                    } 
                } 
            }