ExtJS 3：如何根据行中的值对不同的行定义不同的操作？

Posted 2023-02-26

【中文标题】ExtJS 3：如何根据行中的值对不同的行定义不同的操作？

【英文标题】：ExtJS 3: How to define different actions to different rows based on the values in the row?

【发布时间】：2015-04-09 19:38:11

【问题描述】：

在支持添加、编辑和删除行的grid panel 中，我想根据行中的值对不同的行定义不同的操作。喜欢，

在add 上，网格中将添加一个新行。我的网格中有一个column，其中有一个combo editor（我可以选择yes 或no）。如果值为no，我将禁用作为文本字段的下一列以及具有超链接按钮的另一列。 如果值为yes，我希望启用文本字段和按钮。

我试图获取文本字段和按钮 通过使用Ext.getCmp() 并使用disable()，但随后会发生action 将应用于网格所有行中的列，而我希望它仅应用于我拥有的特定行选择了值。

为了更清楚，让我用一个例子来解释一下。假设我用于存储电话号码条目的网格有 3 列，

第 1 栏 - Has phone number? 第 2 栏 - Provide phone number 第 3 栏 - Look up the user name

在这里，我将第 1 行添加到网格中，为 has phone number 标志选择值 no，因此根据我的代码，我将使用 Ext.getCmp 并获取文本字段和按钮并调用 disable 方法，因此第 2 列和第 3 列被禁用。

在第 2 行，我将为标志选择值 yes，所以理想情况下我应该能够修改第 2 行的第 2 列和第 3 列。

但是，发生的情况是，与第 2 行一起，第 1 行中的列也被启用，因为我这次选择了yes。

所以，我想知道如何根据特定行的值对行的列应用一些操作。下一行应该独立于应用于当前行的操作...在解决此问题时寻求一些帮助/指导。

我正在使用 Ext JS 3.4 版

谢谢

【参考方案1】：

您可以在getClass 和handler 方法中访问当前记录，以根据行更改列的外观和操作：

new Ext.grid.GridPanel(
store: myStore,
columns: [
    
        xtype: 'actioncolumn',
        width: 50,
        items: [
            
                getClass: function(v, meta, rec)   // Or return a class from a function
                    if (rec.get('change') < 0) 
                        this.items[1].tooltip = 'Do not buy!';
                        return 'alert-col';
                     else 
                        this.items[1].tooltip = 'Buy stock';
                        return 'buy-col';
                    
                ,
                handler: function(grid, rowIndex, colIndex) 
                    var rec = store.getAt(rowIndex);
                    alert("Buy " + rec.get('company'));
                
            
        ]
    
    //any other columns here
]
);

【讨论】：

即使不是actioncolumn也可以使用上述方法吗？？

否，但您可以使用渲染器配置：docs.sencha.com/extjs/3.4.0/#!/api/Ext.grid.Column-cfg-renderer

【参考方案2】：

您可以尝试在编辑前或 cellclick 之前对事件设置条件。

因此，如果不遵守条件，则返回 false，用户将无法编辑。

示例：

听众： 编辑前：函数（e） //获取前一列的值 var befCol = e.row[indexofBefCol]; //检查你的情况 如果（befCol.getValue（）===“否”） 返回假； //返回false停止编辑

我还没有测试我的代码，也许你需要修改它，但我认为你可以用它做点什么。

希望对您有所帮助。

祝你好运！

【讨论】：

我已经尝试过类似的方法，但该操作适用于所有列，而不是特定行！

添加 if 条件或 switch case 以对特定列执行操作