ExtJS 编辑器网格内的自定义编辑控件 [英] Custom Edit control inside a ExtJS Editor grid

问题描述

遇到问题，需要您的建议

Got an issue, and need your advices

我刚刚开始编写一个编辑器网格.(我实际上将使用此网格作为搜索过滤器编辑器，即具有条件名称、运算符和值的列).现在，对于值字段，我想为不同的行设置不同的编辑控件.例如，当条件类型是字符串时，我想显示一个文本框，当它是日期时间时，我想要一个日期时间编辑器.所以事实是，我需要在编辑开始之前控制编辑控件创建/显示".它应该在行之间不同.与我发现的针对列固定的示例不同.

I just started writing an editor grid. (I will actually use this grid as a search filter editor, i.e. columns with criteria name, operators and values). Now, for the value field, I want to have different edit controls for different rows. For instance, when a criteria type is string I want to display a text box, when it's date time, I want a datetime editor. So the fact is, I need to control the "edit control creation/display" just before editing starts. and it should be different among rows. Unlike the examples I found which are fixed for the columns.

为了实现这一点，你们能建议我需要做的步骤吗?如果你们中的一个人可以指导我，我可能会弄清楚.

In order to implement this, can you guys please suggest the steps I need to do? I can probably figure out it if one of you can direct me a way.

谢谢和最好的问候

推荐答案

实际上，您可以通过根据您所在的列动态返回不同的编辑器和渲染来轻松实现此目的.在您的 ColumnModel 对象中，您可以定义如下所示的内容.请注意，我正在获取每条记录的类型属性以确定其类型.我有一个包含我所有不同类型编辑器的对象，渲染器也是如此，然后根据类型，我为该单元格提供不同的编辑器或渲染器.

Actually you can easily accomplish this by dynamically returning different editors and renders depending on the column you're in. In your ColumnModel object you can define something like this below. Note that i'm getting a type property of each record to determine its type. I have an object containing all my different types of editors, and the same for renderers, and then based on the the type i dish out a different editor or renderer for that cell.

editors: { 'default': {xtype:'textfield'},
           texttype: {xtype:'textfield'},
           numbertype: {xtype:'numberfield'},
           combotype: {xtype:'combo'}....... etc. } 

getCellEditor: function(colIndex, rowIndex) {
            var store = Ext.getCmp('mygrid').getStore();
            var field = this.getDataIndex(colIndex);
            var rec = store.getAt(rowIndex);
            var type = rec.get('type');
            if (type in this.editors) {
                return this.editors[type];
            } else {
                return this.editors['default'];
            }

        },

这篇关于ExtJS 编辑器网格内的自定义编辑控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！