Feb 21, 2013, 3:22 PM
[CLOSED] Dynamic editor in GridPanel
Hi,
I'm trying to convert a editable Grid from ExtNet1 to Extnet2
Only one column must be editable and the type of the editor must change
according to the type of the value loaded into the cell.
I managed to make it work; when I double click the cell, the editor is correcly displayed and I'm able
to change the value. However after 2/3 times that I click the same cell to recall the editor
(actually the error seems to happen randomly) I get an error from Ext.NET 2 javascript and none of the
editors work anymore; the only way is to reload the page.
The error I have is in the attached gif file.
(where g.childItems is an empty array and g is the Ext.layout.ContextItem object)
I really don't understand which is the problem, even because it happens only after 3/4 times that I double click
the cell to get the editor and not at the beginning.
Can you help me? May be I'm doing something wrong.
Below is the markup of the Grid and the setEditor function called on the BeforeEdit event
Alessandra
I'm trying to convert a editable Grid from ExtNet1 to Extnet2
Only one column must be editable and the type of the editor must change
according to the type of the value loaded into the cell.
I managed to make it work; when I double click the cell, the editor is correcly displayed and I'm able
to change the value. However after 2/3 times that I click the same cell to recall the editor
(actually the error seems to happen randomly) I get an error from Ext.NET 2 javascript and none of the
editors work anymore; the only way is to reload the page.
The error I have is in the attached gif file.
(where g.childItems is an empty array and g is the Ext.layout.ContextItem object)
I really don't understand which is the problem, even because it happens only after 3/4 times that I double click
the cell to get the editor and not at the beginning.
Can you help me? May be I'm doing something wrong.
Below is the markup of the Grid and the setEditor function called on the BeforeEdit event
<ColumnModel ID="ColumnModel1" runat="server" >
<Columns>
<ext:Column runat="server" Header='<%$ I18n: Label.Name %>' Width="200" DataIndex="Name" />
<ext:Column runat="server" Header='<%$ I18n: Label.Description %>' Width="200" DataIndex="Description" />
<ext:Column runat="server" Header='<%$ I18n: Label.Type %>' Width="200" DataIndex="TypeName" />
<ext:CheckColumn runat="server" Header='<%$ I18n: Label.ChangeOnExecution %>' Width="150" DataIndex="CanChange" />
<ext:Column runat="server" ColumnID="Value" Header='<%$ I18n: Label.Value %>' DataIndex="Value" Flex="1">
<Renderer Fn="valueAsStringRenderer" />
<Editor>
<ext:TextField ID="TextField1" runat="server"/>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server">
<Listeners>
<BeforeEdit Fn="setEditor"></BeforeEdit>
</Listeners>
</ext:CellEditing>
</Plugins>
var setEditor = function (editor, e, eOpts ) {
var ed = e.column.getEditor() || {}
if (!e.record.get("CanChange")) {
return false;
}
switch (e.record.data.ParameterTypeString) {
case "String":
//if (ed.id != "field1") {
e.column.setEditor(new Ext.form.TextField({
id: "field1",
//width: 300,
flex: 1,
selectOnFocus: true
}));
//}
break;
case "Date":
//if (ed.id != "field2") {
e.column.setEditor(new Ext.form.DateField({
id: "field2",
width: 200,
format: "d-m-Y",
selectOnFocus: true
}));
//}
break;
case "Boolean":
if (ed.id != "field4") {
e.column.setEditor(new Ext.form.Checkbox({
id: "field4"
}));
}
break;
case "Decimal":
var isInteger = e.record.get("ParamIsInteger");
if (isInteger) {
//if (ed.id != "field5") {
e.column.setEditor(new Ext.form.NumberField({
id: "field5",
width: 100,
allowDecimals: false,
selectOnFocus: true
}));
//}
}
else {
//if (ed.id != "field6") {
e.column.setEditor(new Ext.form.NumberField({
id: "field6",
width: 100,
allowDecimals: true,
selectOnFocus: true
}));
//}
}
break;
case "combo":
if (ed.id != "field3") {
e.column.setEditor(new Ext.form.ComboBox({
id: "field3",
mode: "local",
triggerAction: "all",
displayField: "text",
valueField: "id",
store: new Ext.data.SimpleStore({
fields: ['id', 'text'],
data: [
["id1", "text1"],
["id2", "text2"],
["id3", "text3"]
]
})
}));
}
break;
default:
return false;
}
}
Thank you!Alessandra
Last edited by Baidaly; Feb 22, 2013 at 10:09 PM.
Reason: Please, use [CODE] tag