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对象中，您可以定义以下内容.请注意，我正在获取每个记录的type属性来确定其类型.我有一个对象，其中包含我所有不同类型的编辑器，以及用于渲染器的对象，然后根据该类型为该单元格提供不同的编辑器或渲染器.

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屋！