[CLOSED] Grid panel getEditor. [Archive]

sveins12

Sep 15, 2016, 3:53 AM

The method getEditor is being called but, the editor is not changing. The component returned from the first call is always being used.

Please run the example and double click in the "Editor" column on the first row. There will come a textfield. Then try to edit the second row. The editor is still a textfield, even though the getEditor method returned a checkbox.

Then run the example again and try to double click the second row first, and both rows will get checkbox-editor.

Is it possible to get around this?

Another thing is that the getEditor-method is being called 2-3 times each time the editor is being made.

@{
var x = Html.X();
var list = "textfield checkbox".Split(' ').Select(o=>new{xt=o}).ToList();
}
@(
x.GridPanelFor(list)
.Plugins(x.CellEditing())
.ColumnModel(
x.Column()
.Text("Editor")
.CustomConfig(c => c.Add(new ConfigItem("getEditor", @"
function(record){
console.log(record.data.xt);
return { xtype: record.data.xt };
}", ParameterMode.Raw)))
)
)

fabricio.murta

Sep 16, 2016, 1:49 AM

Hello @sveins12!

That's not really a bug. The cell editing plugin methods fetch the editor in different places, so they need to query it again to be sure. Of course, there's always room for improvement, but as long as you don't have a very slow getEditor() implementation, it shouldn't be a problem.

There are of course many ways to implement a same behavior in different scenarios. It just looked to me more straightforward to use the EditorStrategy to dynamically choose between the predefined editors. And well, it seems to work pretty well on your scenario. Besides, it saves the implicit assumption that the components are destroyed and re-instantiated whenever needed -- what not always is the case. Here you will be using the editor you defined. You may also want to update the displayed value in the editor, perhaps, will depend on your use case as you develop it.

Well, here's my suggestion for you to get your panel working, I hope it is an acceptable solution for you:

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Dynamically switch the editor type in cells -- depending on their data</title>
<script type="text/javascript">
var chooseCellEditor = function (record, column, editors, panel) {
var wantedEditor = record.data.xt,
chosenEditorIndex = 0,
availableEditor;

for (var i = 0; i < editors.length; i++) {
availableEditor = editors[i].field.xtype;
if (wantedEditor == availableEditor) {
chosenEditorIndex = i;
}
}

return chosenEditorIndex;
}
</script>
</head>
<body>
<div>
@Html.X().ResourceManager()

@{
var x = Html.X();
var list = "textfield checkboxfield".Split(' ').Select(o => new { xt = o }).ToList();
}
@(
x.GridPanelFor(list)
.Plugins(x.CellEditing())
.Editor(
x.TextField(),
x.Checkbox()
)
.EditorStrategy(s => s.Fn = "chooseCellEditor")
.ColumnModel(
x.Column()
.Text("Editor")
)
)
</div>
</body>
</html>

You may see I did a rather complex step to cycle thru the editors, but you may want to map the value of the records to the actual editor index (in the order you define in lines 39-42) so no loop is necessary (and just return record.data.editorIndex for example).

Hope this helps!

sveins12

Sep 16, 2016, 2:32 AM

Brilliant.