[CLOSED] RowExpander FormPanel Issues

[Alaswad]

Dears,

I defined a RowExpander FormPanel in my GridPanel as follows:

<ext:RowExpander runat="server" SingleExpand="false">
	<Component>
		<ext:FormPanel
			runat="server"
			Width="150"
			Border="false"
			Cls="white-footer">
			<Items>
				<ext:ComboBox 
					ClientIDMode="Static" 
					ID="ddlAccountType"
					Name="ACCOUNT_TYPE"
					QueryMode="Local"
					Flex="1"
					TriggerAction="All"
					Editable="false" 
					AllowBlank="false"
					runat="server"  
					LabelAlign="Left" 
					FieldLabel="Account Type">   
					<SelectedItems>
						<ext:ListItem  Text="GL" Value="GL"></ext:ListItem>
					</SelectedItems>   
						<Items>
							<ext:ListItem  Text="GL" Value="GL"></ext:ListItem>
							<ext:ListItem  Text="Customer" Value="Customer"></ext:ListItem>
							<ext:ListItem  Text="Supplier" Value="Supplier"></ext:ListItem>
						</Items>
						<Listeners>
							<Select Handler="loadAccountNum" />
						</Listeners>                                                                          
				</ext:ComboBox>
				<ext:ComboBox ID="ddlAccountNo" ClientIDMode="Static" Flex="1" ForceSelection="true"  ValueField="SL_ACCOUNT" DisplayField="SL_ACCOUNT" runat="server"  LabelAlign="Left" FieldLabel="Account No.">
					<Store>
						<ext:Store ID="ddlAccountNoStore" runat="server">
							<Model>
								<ext:Model ID="ddlAccountNoModel" runat="server" >
									<Fields>
										<ext:ModelField Name="SL_ACCOUNT_DESC" Type="String" />
										<ext:ModelField Name="SL_ACCOUNT"   Type="String" />
									</Fields>
								</ext:Model>
							</Model>
						</ext:Store>  
					</Store>                                                                                                                   
				</ext:ComboBox> 
				<ext:TextField
					runat="server"
					ClientIDMode="Static" 
					Name="SUBLEDGER_ACCOUNT"
					ID="txtSubledgerAccount"	
					Flex="1"
					FieldLabel="Subledger Acc"
					/>
				<ext:TextField
					runat="server"
					ClientIDMode="Static" 
					Flex="1"
					Name="CONTROL_ACCOUNT"
					ID="txtControlAccount"	
					FieldLabel="Control Acc"
					/>
				<ext:TextField
					runat="server"
					ClientIDMode="Static" 
					ID="txtAccountDescription"	
					FieldLabel="Acc Desc."
					/>
			</Items>
		</ext:FormPanel>
	</Component>
</ext:RowExpander>

What I want to achieve is the following:

1. For each row in my editable GridPanel, the user will choose "Account Type" from ComboBox.
2. Based on the selection "Account No." list will be displayed in second ComboBox of the same form.

Note that I defined the ID property for each ComboBox as ClientIDMode="Static".

My questions are:

1. As per my GridPanel has many rows, how I can deal with each FormPanel component separately.

2. How to sync the values of FormPanel to the GridPanel store (Note that fields are mapped with Name= property).

3. I defined a listeners in ComboBox as follows:

<Listeners>
	<Select Handler="loadAccountNum" />
</Listeners>                                                                          

to invoke this:

function loadAccountNum() {
    var AccountType = App.ddlAccountType.getValue();
    alert(AccountType);
}

But this listener is not FIRED, why? What am doing wrong?

Regards,
Alaswad

[fabricio.murta]

Hello Alaswad!

Question 1:
I can suggest you using row expander's SingleExpand="true" and also CacheSingleExpandRows="true". This will allow you to access the form thru its unique ID. Why:
1. SingleExpand ensures only one instance of the inner components are used
2. CacheSingleExpandRows makes it so the components are just moved between expanded rows instead of being redrawn

This way, expanding a row is equivalent to just making a bare container and moving the expander's components there and updating the fields/contents' values.

The only drawback here is that you can have just one row expanded at a time -- but it also means better performance for bigger grids as less resources are necessary!

Question 2:
Follow this example: RowExpander Plugin with FormPanel Detail

Question 3:
You are mistaking the Handler with the Fn properties.
Handler property: Runs the JavaScript code enclosed by double quotes when the event is triggered.
Fn property: Forwards the parameters of the event to the specified JavaScript function. It assumes the function has the same function signature (parameters) than the event function itself.

These two properties are mutually exclusive, and the parameters (reachable in Handler, passed in Fn) are, in this order, item and records, representing the combo box component and selected record or records (in case of multi select combo box), respectively.

I hope this helps!

[Alaswad]

Thank You.

It works but without setting this CacheSingleExpandRows="true" , when I do that I become unable to get forms component values through:

App.ID.getValue();

[fabricio.murta]

Yes! Actually I got it to you the wrong way! By caching the expand rows, it keeps the component in place instead of moving/refilling the components thru the rows, so you end up with several copies of the component -- thus they are created with random ids as it has to be unique on the page!

But I am glad you could figure the final bit out! Sorry for the confusion!