[CLOSED] Problem with Dropdown field in column header of GridPanel

  1. #1

    [CLOSED] Problem with Dropdown field in column header of GridPanel

    Hello,

    I have a problem with a layout of a DropDown Field in column header of GridPanel Ext.Net 2

    In Ext.Net 1.5, the beavior of the dropdown was wider than the column width. But in Ext.Net 2 when the field is diplaying, the field width is the same as the column width, and not the specified width for the display item.


    Code Ext 1.5

    <ext:HeaderColumn Cls="x-small-editor">
                                                    <Component>
                                                        <ext:DropDownField ID="ddfFecha" AllowBlur="true" runat="server" Editable="false"
                                                             Mode="ValueText"  Icon="Find" TriggerIcon="SimpleArrowDown" CollapseMode="Default" >
                                                            <Component>
                                                                <ext:FormPanel ID="FormPanel2" runat="server" Height="100" Width="270" 
                                                                    Frame="true" LabelWidth="50" ButtonAlign="Left" BodyStyle="padding:2px 2px;">
                                                                    <Items>
                                                                        <ext:CompositeField ID="CompositeField4" runat="server" FieldLabel="De" LabelWidth="50">
                                                                            <Items>
                                                                                <ext:DateField ID="ff_date_from" Vtype="daterange" runat="server" Flex="1" Width="100" CausesValidation="false">
                                                                                    <CustomConfig>
                                                                                        <ext:ConfigItem Name="endDateField" Value="#{ff_date_to}" Mode="Value" />
                                                                                    </CustomConfig>
                                                                                    <Listeners>
                                                                                        <KeyUp Fn="validateDateRange" />
                                                                                    </Listeners>
                                                                                </ext:DateField>
                                                                                <ext:TimeField ID="ff_time_from" runat="server" Flex="1" Width="80" CausesValidation="false" />
                                                                            </Items>
                                                                        </ext:CompositeField>
                                                                        <ext:CompositeField ID="CompositeField2" runat="server" FieldLabel="Hasta" LabelWidth="50">
                                                                            <Items>
                                                                                <ext:DateField ID="ff_date_to" runat="server" Vtype="daterange" Width="100">
                                                                                    <CustomConfig>
                                                                                        <ext:ConfigItem Name="startDateField" Value="#{ff_date_from}" Mode="Value" />
                                                                                    </CustomConfig>
                                                                                    <Listeners>
                                                                                        <KeyUp Fn="validateDateRange" />
                                                                                    </Listeners>
                                                                                </ext:DateField>
                                                                                <ext:TimeField ID="ff_time_to" runat="server" Width="80" />
                                                                            </Items>
                                                                        </ext:CompositeField>
                                                                    </Items>
                                                                    <Buttons>
                                                                        <ext:Button Text="Ok" Icon="Accept" runat="server">
                                                                            <Listeners>
                                                                                <Click Handler="
                                                                                    setFecha();
                                                                                    " />
                                                                            </Listeners>
                                                                            <DirectEvents>
                                                                                <Click OnEvent="ApplyFilter">
                                                                                    <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="#{GridPanel1}" />
                                                                                </Click>
                                                                            </DirectEvents>
                                                                        </ext:Button>
                                                                        <ext:Button Text="Clear" Icon="Cancel" runat="server">
                                                                            <Listeners>
                                                                                <Click Handler="
                                                                                    clearFecha();
                                                                                    " />
                                                                            </Listeners> 
                                                                            <DirectEvents>
                                                                                <Click OnEvent="ApplyFilter">
                                                                                    <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="#{GridPanel1}" />
                                                                                </Click>
                                                                            </DirectEvents>
                                                                        </ext:Button>
                                                                    </Buttons>
                                                                </ext:FormPanel>
                                                            </Component>
                                                            <Listeners>
                                                                <Collapse Handler="setFecha();" />
                                                            </Listeners>
                                                        </ext:DropDownField>
                                                    </Component>
                                                </ext:HeaderColumn>

    Code Ext 2.0
    <ext:Column ID="Column5" runat="server" Header="Fecha" DataIndex="CREATED" Width="180">
                                            <HeaderItems>
                                                <ext:DropDownField ID="ff_CREATED" AllowBlur="true" runat="server" Editable="false"
                                                    Mode="ValueText" Icon="Find" Width="180">
                                                    <Component>
                                                        <ext:FormPanel ID="FormPanel2" runat="server" Height="100" Frame="true" Width="180"
                                                            LabelWidth="50" ButtonAlign="Left" BodyStyle="padding:2px 2px;">
                                                            <Items>
                                                                <ext:FieldContainer ID="FieldContainer1" runat="server" FieldLabel="De" LabelWidth="50" 
                                                                    Layout="ColumnLayout">
                                                                    <Items>
                                                                        <ext:Container ColumnWidth=".7" runat="server">
                                                                            <Items>
                                                                                <ext:DateField ID="ff_date_from" runat="server" Vtype="daterange" EndDateField="ff_date_to"
                                                                                    EnableKeyEvents="true" Format="m-d-yyyy">
                                                                                    <Listeners>
                                                                                        <KeyUp Fn="onKeyUp" />
                                                                                    </Listeners>
                                                                                </ext:DateField>        
                                                                            </Items>
                                                                        </ext:Container>
                                                                        <ext:Container ColumnWidth=".3" runat="server">
                                                                            <Items>
                                                                                <ext:TimeField ID="ff_time_from" runat="server" Width="80" CausesValidation="false" />
                                                                            </Items>
                                                                        </ext:Container>
                                                                    </Items>
                                                                </ext:FieldContainer>
                                                                <ext:FieldContainer ID="FieldContainer2" runat="server" FieldLabel="Hasta" LabelWidth="50"
                                                                    Layout="ColumnLayout">
                                                                    <Items>
                                                                        <ext:Container ColumnWidth=".7" runat="server">
                                                                            <Items>
                                                                                <ext:DateField ID="ff_date_to" runat="server" Vtype="daterange" StartDateField="ff_date_from"
                                                                                    EnableKeyEvents="true" Format="m-d-yyyy">
                                                                                    <Listeners>
                                                                                        <KeyUp Fn="onKeyUp" />
                                                                                    </Listeners>
                                                                                </ext:DateField>    
                                                                            </Items>
                                                                        </ext:Container>
                                                                        <ext:Container ColumnWidth=".3" runat="server">
                                                                            <Items>
                                                                                <ext:TimeField ID="ff_time_to" runat="server" Width="80" />
                                                                            </Items>
                                                                        </ext:Container>
                                                                    </Items>
                                                                </ext:FieldContainer>
                                                            </Items>
                                                            <Buttons>
                                                                <ext:Button ID="Button1" Text="Ok" Icon="Accept" runat="server">
                                                                    <Listeners>
                                                                        <Click Handler="setFecha()"></Click>
                                                                    </Listeners>
                                                                    <DirectEvents>
                                                                        <Click onevent="ApplyFilter">
                                                                            <eventmask showmask="true" target="CustomTarget" customtarget="#{GrdBloqueoCajas}" />
                                                                        </Click>
                                                                    </DirectEvents>
                                                                </ext:Button>
                                                                <ext:Button ID="Button2" Text="Clear" Icon="Cancel" runat="server">
                                                                    <Listeners>
                                                                        <Click Handler="clearFecha()" />
                                                                    </Listeners>
                                                                </ext:Button>
                                                            </Buttons>
                                                        </ext:FormPanel>
                                                    </Component>
                                                </ext:DropDownField>
                                            </HeaderItems>
                                        </ext:Column>
    Attached Thumbnails Click image for larger version. 

Name:	Dropdown ext2.0.png 
Views:	123 
Size:	85.6 KB 
ID:	5120   Click image for larger version. 

Name:	Dropdown ext1.5.png 
Views:	118 
Size:	80.6 KB 
ID:	5119  
    Last edited by Baidaly; Nov 17, 2012 at 11:50 PM. Reason: [CLOSED]
  2. #2
    Hello!

    This behavior can be changed by setting False in the MatchFieldWidth attribute.

    <ext:DropDownField ID="ff_CREATED" AllowBlur="true" runat="server" Editable="false" MatchFieldWidth="False"
    	Mode="ValueText" Icon="Find">
    	<Component>
    		<ext:FormPanel ID="FormPanel2" runat="server" Height="100" Frame="true" Width="500"
    			LabelWidth="50" ButtonAlign="Left" BodyStyle="padding:2px 2px;">
    			<Items>
    				<ext:FieldContainer ID="FieldContainer1" runat="server" FieldLabel="De" LabelWidth="50"
    					Layout="ColumnLayout">
    					<Items>
    						<ext:Container ColumnWidth=".7" runat="server">
    							<Items>
    								<ext:DateField ID="ff_date_from" runat="server" Vtype="daterange" EndDateField="ff_date_to"
    									EnableKeyEvents="true" Format="m-d-yyyy">
    								</ext:DateField>       
    							</Items>
    						</ext:Container>
    						<ext:Container ColumnWidth=".3" runat="server">
    							<Items>
    								<ext:TimeField ID="ff_time_from" runat="server" Width="80" CausesValidation="false" />
    							</Items>
    						</ext:Container>
    					</Items>
    				</ext:FieldContainer>
    				<ext:FieldContainer ID="FieldContainer2" runat="server" FieldLabel="Hasta" LabelWidth="50"
    					Layout="ColumnLayout">
    					<Items>
    						<ext:Container ColumnWidth=".7" runat="server">
    							<Items>
    								<ext:DateField ID="ff_date_to" runat="server" Vtype="daterange" StartDateField="ff_date_from"
    									EnableKeyEvents="true" Format="m-d-yyyy">
    								</ext:DateField>   
    							</Items>
    						</ext:Container>
    						<ext:Container ColumnWidth=".3" runat="server">
    							<Items>
    								<ext:TimeField ID="ff_time_to" runat="server" Width="80" />
    							</Items>
    						</ext:Container>
    					</Items>
    				</ext:FieldContainer>
    			</Items>
    			<Buttons>
    				<ext:Button ID="Button1" Text="Ok" Icon="Accept" runat="server">
    				</ext:Button>
    				<ext:Button ID="Button2" Text="Clear" Icon="Cancel" runat="server">
    				</ext:Button>
    			</Buttons>
    		</ext:FormPanel>
    	</Component>
    </ext:DropDownField>
  3. #3
    Thanks, it works!

Similar Threads

  1. Replies: 3
    Last Post: Feb 21, 2012, 6:40 AM
  2. Replies: 6
    Last Post: Jan 28, 2012, 1:14 AM
  3. Excel export , column header and Null date field
    By springrider in forum 1.x Help
    Replies: 1
    Last Post: Oct 13, 2011, 5:12 PM
  4. Replies: 8
    Last Post: Sep 13, 2011, 8:47 PM
  5. [CLOSED] GridPanel column header and column chooser different value
    By acrossdev in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 07, 2009, 6:01 AM

Posting Permissions