GridPanel Editor Width

  1. #1

    GridPanel Editor Width

    Hi there,

    I am having trouble with grid panel cell editor width. I have a colorpicker editor for a column. Grid column width must be small becasue I am only rendering a sample of the color. On the other hand, color picker editor is displayed only to fit in edited column width. Is it possible to tell column editor width independent of the editing column width? (I tried the property width but has no effect.)

    Below is a sample image.

    Thank you.

    Click image for larger version. 

Name:	extnet-colorpickereditor.png 
Views:	136 
Size:	14.2 KB 
ID:	5479
  2. #2
    Hello!

    Can you provide sample of your problem?

    http://forums.ext.net/showthread.php...ation-Required
  3. #3
    Quote Originally Posted by Baidaly View Post
    Hello!

    Can you provide sample of your problem?

    http://forums.ext.net/showthread.php...ation-Required
    Of course I can. See below please.

    <%@ Page Language="C#" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store1.DataSource = new object[]
                    {
                        new object[] { "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.", "#FF0000","Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum."},
                        new object[] { "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.", "#00FF00","Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum."},
                        new object[] { "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.", "#0000FF","Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum."}
                    };
                Store1.DataBind();
            }
        }        
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>"Editor width issue"</title>
        <script type="text/javascript">
            var colorRenderer = function(value, metadata) {
                metadata.style = 'background-color:' + value + ';';
                return value;
            }    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server"/>
        <div>
            <ext:Window ID="Window1" runat="server" Hidden="false" Layout="FitLayout" Width="800" MinHeight="200" Resizable="false" Title="Configuration">
                <Items>              
                    <ext:GridPanel ID="GridPanel1" runat="server"> 
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model ID="Model2" runat="server" IDProperty="Nick">
                                        <Fields>
                                            <ext:ModelField Name="LotsOfWords1" Type="String"></ext:ModelField>
                                            <ext:ModelField Name="Color" Type="String"></ext:ModelField>
                                            <ext:ModelField Name="LotsOfWords2" Type="String"></ext:ModelField>
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>                    
                        </Store>                                       
                        <ColumnModel runat="server" ID="ColumnModel1">
                            <Columns>
                                <ext:Column ID="Column1" runat="server" Text="Col 1" DataIndex="LotsOfWords1" Align="Left"  Flex="1" Wrap="true">
                                    <Editor>
                                        <ext:TextField ID="TextField1" runat="server" AllowBlank="false"></ext:TextField>                                            
                                    </Editor>
                                </ext:Column>
                                <ext:Column ID="Column2" runat="server" Text="Color" DataIndex="Color" Align="Center" Width="100">
                                    <Renderer Fn="colorRenderer"/>
                                    <Editor>
                                        <ext:DropDownField ID="DropDownField1" runat="server" Editable="false">
                                            <Component>
                                                <ext:Panel ID="Panel1" runat="server" Width="100" Height="100">
                                                    <Items>
                                                        <ext:ColorPicker ID="ColorPicker1" runat="server">
                                                            <Listeners>
                                                                <Select Handler="item.ownerCt.dropDownField.setValue('#' + color);"/>
                                                            </Listeners>
                                                        </ext:ColorPicker>
                                                    </Items>
                                                </ext:Panel>
                                            </Component>
                                        </ext:DropDownField>                                                                                
                                    </Editor>
                                </ext:Column>
                                <ext:Column ID="Column3" runat="server" Text="Col 2" DataIndex="LotsOfWords2" Align="Left"  Flex="1" Wrap="true">
                                    <Editor>
                                        <ext:TextField ID="TextField2" runat="server" AllowBlank="false"></ext:TextField>                                            
                                    </Editor>
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                        <Plugins>
                            <ext:CellEditing ID="CellEditing1" runat="server">
                            </ext:CellEditing>
                        </Plugins>
                    </ext:GridPanel>                                                            
                </Items>
            </ext:Window>    
        </div>
        </form>
    </body>
    </html>
    resulting image:

    Click image for larger version. 

Name:	grid-editor-width.jpg 
Views:	158 
Size:	107.6 KB 
ID:	5484

    I am using Ext.Net 2.1.1.18167 build.
    Thank you.
  4. #4
    Try to use the following markup:

    <ext:DropDownField ID="DropDownField1" runat="server" Editable="false" MatchFieldWidth="False">
    	<Component>
    		<ext:Panel ID="Panel1" runat="server" Width="150" Height="100">
    			<Items>
    				<ext:ColorPicker ID="ColorPicker1" runat="server">
    					<Listeners>
    						<Select Handler="item.ownerCt.dropDownField.setValue('#' + color);"/>
    					</Listeners>
    				</ext:ColorPicker>
    			</Items>
    		</ext:Panel>
    	</Component>
    </ext:DropDownField>
  5. #5
    Quote Originally Posted by Baidaly View Post
    Try to use the following markup:

    <ext:DropDownField ID="DropDownField1" runat="server" Editable="false" MatchFieldWidth="False">
    	<Component>
    		<ext:Panel ID="Panel1" runat="server" Width="150" Height="100">
    			<Items>
    				<ext:ColorPicker ID="ColorPicker1" runat="server">
    					<Listeners>
    						<Select Handler="item.ownerCt.dropDownField.setValue('#' + color);"/>
    					</Listeners>
    				</ext:ColorPicker>
    			</Items>
    		</ext:Panel>
    	</Component>
    </ext:DropDownField>
    That's it ! Thank you.
    I configured AutoWidth= true and AutoHeight=true for Panel1. It seems OK.
    Thank you again.

Similar Threads

  1. Replies: 1
    Last Post: Jun 11, 2012, 11:59 AM
  2. Replies: 2
    Last Post: Nov 07, 2011, 7:13 AM
  3. [1.0] The row editor fields disappear as resizing column width
    By thchuong in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 21, 2011, 8:12 AM
  4. Replies: 6
    Last Post: Jun 11, 2010, 12:47 PM
  5. Replies: 4
    Last Post: Aug 04, 2009, 11:37 AM

Posting Permissions