[CLOSED] Dynamic editor in GridPanel

  1. #1

    [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

    <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
    Attached Thumbnails Click image for larger version. 

Name:	error.gif 
Views:	41 
Size:	15.5 KB 
ID:	5679  
    Last edited by Baidaly; Feb 22, 2013 at 10:09 PM. Reason: Please, use [CODE] tag
  2. #2
    Hello,

    There appears to be an issue with your code formatting. Can you correct this issue by wrapping your code sample in [CODE] tags?
    Geoffrey McGill
    Founder
  3. #3
    Quote Originally Posted by geoffrey.mcgill View Post
    Hello,

    There appears to be an issue with your code formatting. Can you correct this issue by wrapping your code sample in [CODE] tags?
    Here is the code, thank you!

    
    <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",
    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;
    }
    }
  4. #4
    Please see the following sample
    https://examples2.ext.net/#/TreePanel/Basic/Editors/

    It is tree sample but it is actual for GridPanel also because grid and tree use the same code
  5. #5
    Quote Originally Posted by Vladimir View Post
    Please see the following sample
    https://examples2.ext.net/#/TreePanel/Basic/Editors/

    It is tree sample but it is actual for GridPanel also because grid and tree use the same code
    I have seen this example, but still don't understand.
    How is it possible to set the CustomAttribute 'editor' in a grid or in a column?

    Can you give me an example please?

    Thank you
  6. #6
    You don't need CustomAttribute, just use any model field in the model
    For example, i see that in your sample you use 'record.data.ParameterTypeString'
    Just use that field in the EditorStrategy
    
    <EditorStrategy Handler="if(record.data.ParameterTypeString == 'String') {return 0;}else{return 1;}" />
    EditorStrategy should return index of editor from Editor collection
  7. #7
    Quote Originally Posted by Vladimir View Post
    You don't need CustomAttribute, just use any model field in the model
    For example, i see that in your sample you use 'record.data.ParameterTypeString'
    Just use that field in the EditorStrategy
    
    <EditorStrategy Handler="if(record.data.ParameterTypeString == 'String') {return 0;}else{return 1;}" />
    EditorStrategy should return index of editor from Editor collection
    Now the way it works is much clearer and it works perfectly!!!!!!!!

    Thank you very much for your help!

Similar Threads

  1. [CLOSED] Dynamic Editor in a Column
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Jan 18, 2012, 6:01 PM
  2. [CLOSED] Combox Editor- Dynamic Combo box list Value
    By vali1993 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 22, 2010, 8:02 PM
  3. Replies: 18
    Last Post: Apr 14, 2010, 2:00 PM
  4. [CLOSED] GridPanel Dynamic Editor Fields
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Jan 18, 2010, 2:13 PM
  5. [CLOSED] Dynamic Text Editor in grid error
    By CMA in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 18, 2009, 8:19 AM

Tags for this Thread

Posting Permissions