[CLOSED] DropDownField error when used in a PropertyGrid

  1. #1

    [CLOSED] DropDownField error when used in a PropertyGrid

    I am trying to use a DropDownField control as a property grid editor so I can display a color selector (as similar to the example in a grid - http://forums.ext.net/showthread.php...idPanel-Column). When you click into the property area where the editor would be displayed an error is generated. The actual error is:

    Error: 'this.component' is null or not an object

    Should it be possible to use the DropDownField within the Property Grid?

    Sample code
    <ext:PropertyGridParameter Name="Background Color">
        <Editor>        
            <ext:DropDownField ID="DDFieldEditor" runat="server" Editable="false">
                <Component>
                    <ext:Panel ID="Panel2" runat="server" AutoWidth="true" AutoHeight="true">
                        <Items>
                            <ext:ColorPalette ID="ColorPalette1" runat="server">
                                <Listeners>
                                    <Select Fn="selectColor"/>
                                </Listeners>
                            </ext:ColorPalette>
                        </Items>
                    </ext:Panel>
                </Component>
            </ext:DropDownField>
        </Editor>
    </ext:PropertyGridParameter>
    Using ext.net version 1.0.4098.35288
    Last edited by Daniil; Mar 25, 2011 at 9:51 AM. Reason: [CLOSED]
  2. #2
    Hi,

    It should work, but DropDownField is rendered wrong.

    But I was able to get it working.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
        <script type="text/javascript">
            var colorRenderer = function (value, metaData) {
                metaData.style += "background-color: " + value + ";";
                return value;
            }
    
            var selectColor = function (cp, color) {
                DDFieldEditor.setValue("#" + color);
            }
    
            var ce = {
                "color" :
                    new Ext.grid.GridEditor(
                        new Ext.net.DropDownField({
                            id : "DDFieldEditor",
                            xtype : "netdropdown",
                            editable : false,
                            component : {
                                xtype : "panel",
                                autoHeight : true,
                                autoWidth : true,
                                items : {
                                    xtype : "colorpalette",
                                    listeners : {
                                        select : {
                                            fn : selectColor
                                        }
                                    }
                                },
                                layout : "auto"
                            }
                        })
                    )
            }
        </script>
    
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:PropertyGrid
            ID="PropertyGrid1"
            runat="server" 
            Width="300" 
            AutoHeight="true">
            <Source>
                <ext:PropertyGridParameter Name="color" Value="#800080">
                    <Renderer Fn="colorRenderer" />
                </ext:PropertyGridParameter>
                <ext:PropertyGridParameter Name="test" Value="test" />
            </Source>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
            <CustomConfig>
                <ext:ConfigItem Name="customEditors" Value="ce" Mode="Raw" />
            </CustomConfig>
        </ext:PropertyGrid>
        </form>
    </body>
    </html>
  3. #3
    Hi,

    The fix is added to SVN. Now your original code should works correctly. Please update and retest
  4. #4
    Confirmed, this works fine with the latest sources (revision #3512)

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
     
        <script type="text/javascript">
            var colorRenderer = function (value, metaData) {
                metaData.style += "background-color: " + value + ";";
                return value;
            }
     
            var selectColor = function (cp, color) {
                DDFieldEditor.setValue("#" + color);
            }
        </script>
     
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:PropertyGrid
            ID="PropertyGrid1"
            runat="server"
            Width="300"
            AutoHeight="true">
            <Source>
                <ext:PropertyGridParameter Name="color" Value="#800080">
                    <Renderer Fn="colorRenderer" />
                    <Editor>       
                        <ext:DropDownField ID="DDFieldEditor" runat="server" Editable="false">
                            <Component>
                                <ext:Panel runat="server" AutoWidth="true" AutoHeight="true">
                                    <Items>
                                        <ext:ColorPalette runat="server">
                                            <Listeners>
                                                <Select Fn="selectColor"/>
                                            </Listeners>
                                        </ext:ColorPalette>
                                    </Items>
                                </ext:Panel>
                            </Component>
                        </ext:DropDownField>
                    </Editor>
                </ext:PropertyGridParameter>
                <ext:PropertyGridParameter Name="test" Value="test" />
            </Source>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
        </ext:PropertyGrid>
        </form>
    </body>
    </html>
  5. #5
    Many thanks for the rapid response and fix for this. I am able to create the control as required.

    Regards.

Similar Threads

  1. [CLOSED] PropertyGrid error
    By Marcelo in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 12, 2012, 10:31 PM
  2. Replies: 9
    Last Post: Jul 18, 2011, 6:55 AM
  3. Error in example PropertyGrid > Basic > Overview
    By george.paoli in forum Bugs
    Replies: 1
    Last Post: Nov 17, 2010, 9:05 PM
  4. Replies: 2
    Last Post: May 31, 2010, 5:27 AM
  5. Several error in PropertyGrid
    By Kaido in forum Bugs
    Replies: 0
    Last Post: Sep 29, 2009, 5:02 AM

Posting Permissions