PDA

View Full Version : [CLOSED] ForceLayout of child controls



RCN
May 28, 2012, 7:46 PM
When the Enter key is pressed in DropDownField prior expading it, the TreePanel is not initialized. In version 1.x of Ext.Net i could force the initialization of child controls by setting ForceLayout property, but in version 2.0 this property is not available anymore.

Any idea to accomplish this task?



<ext:FormPanel ID="FormPanel1" runat="server" DefaultButton="-1" Title="Form Panel"
Width="500">
<Items>
<ext:DropDownField ID="DropDownField1" runat="server" FieldLabel="raphael" AnchorHorizontal="100%"
TriggerIcon="Combo">
<Component>
<ext:TreePanel runat="server" Icon="Accept" Height="300" Shadow="false" UseArrows="true"
AutoScroll="true" Animate="true" EnableDD="true" RootVisible="false">
<Fields>
<ext:ModelField Name="Task" />
</Fields>
<ColumnModel>
<Columns>
<ext:TreeColumn ID="TreeColumn2" runat="server" Text="Task" DataIndex="Task" />
</Columns>
</ColumnModel>
<Store>
<ext:TreeStore ID="TreeStore1" NodeParam="nodeId" AutoLoad="false" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/loadNodeChildren/">
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Ext" />
</Root>
</ext:TreePanel>
</Component>
<Listeners>
<SpecialKey Fn="onSpecialKey" />
</Listeners>
</ext:DropDownField>
</Items>
<Bin>
<ext:Store ID="Store2" runat="server" AutoLoad="false" PageSize="1">
<Model>
<ext:Model ID="Model2" IDProperty="ID" runat="server">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="SubEntityID" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Bin>
<Listeners>
</Listeners>
</ext:FormPanel>




var onSpecialKey = function (field, e) {
if (e.keyCode == Ext.EventObject.ENTER) {
e.preventDefault();
if (field.component.getRootNode == null) {
alert('NOT ready');
}
else {
alert('READY');

}
}
}

Daniil
May 29, 2012, 3:54 AM
Hi,

Please set up

LazyMode="Instance"
for the TreePanel.

RCN
May 29, 2012, 11:30 AM
Unfortunately setting up the LazyMode property has no effect.

RCN
May 29, 2012, 2:15 PM
Any idea to overcome this problem?

Daniil
May 29, 2012, 2:17 PM
Could you provide a full example?

When I set up

LazyMode="Instance"
for the TreePanel and press Enter I see "READY" in the alert box.

RCN
May 29, 2012, 6:18 PM
Excuse me Daniil, i updated from SVN and now i see "READY". but now i get two erros, described bellow:

1 - If a TreeView is added (Line 7) to the TreePanel the function initComponent throws an exception as shown bellow:
4297



<ext:DropDownField ID="DropDownField1" runat="server" FieldLabel="raphael" AnchorHorizontal="100%"
TriggerIcon="Combo">
<Component>
<ext:TreePanel ID="TreePanel1" runat="server" Icon="Accept" Height="300" Shadow="false"
UseArrows="true" AutoScroll="true" Animate="true" LazyMode="Instance" EnableDD="true" RootVisible="false">
<View>
<ext:TreeView TrackOver="true" />
</View>
<Fields>
<ext:ModelField Name="Task" />
</Fields>
<ColumnModel>
<Columns>
<ext:TreeColumn ID="TreeColumn2" runat="server" Text="Task" DataIndex="Task" />
</Columns>
</ColumnModel>
<Store>
<ext:TreeStore ID="TreeStore1" NodeParam="nodeId" AutoLoad="true" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/loadNodeChildren/">
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Ext" />
</Root>
</ext:TreePanel>
</Component>
<Listeners>
<SpecialKey Fn="onSpecialKey" />
</Listeners>
</ext:DropDownField>


2 - If the Trigger of DropDownField is clicked, the DropDownField is not expanded, then if the Trigger is clicked again, an exception is thow. This problem does not happen if the LazyMode is not set.



<ext:DropDownField ID="DropDownField1" runat="server" FieldLabel="raphael" AnchorHorizontal="100%"
TriggerIcon="Combo">
<Component>
<ext:TreePanel ID="TreePanel1" runat="server" Icon="Accept" Height="300" Shadow="false"
UseArrows="true" AutoScroll="true" Animate="true" LazyMode="Instance" EnableDD="true"
RootVisible="false">
<View>
</View>
<Fields>
<ext:ModelField Name="Task" />
</Fields>
<ColumnModel>
<Columns>
<ext:TreeColumn ID="TreeColumn2" runat="server" Text="Task" DataIndex="Task" />
</Columns>
</ColumnModel>
<Store>
<ext:TreeStore ID="TreeStore1" NodeParam="nodeId" AutoLoad="true" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/loadNodeChildren/">
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Ext" />
</Root>
</ext:TreePanel>
</Component>
<Listeners>
<SpecialKey Fn="onSpecialKey" />
</Listeners>
</ext:DropDownField>

Daniil
May 29, 2012, 6:52 PM
My fault, indeed, it was not a solution.

To force the Component to be rendered initially, please set up the following AfterRender listener for the DropDownField.

<ext:DropDownField>
<Listeners>
<AfterRender Handler="this.getPicker();" />
</Listeners>
</ext:DropDownField>

Vladimir
May 29, 2012, 6:59 PM
I don't think that LazyMode is best solution in this case (LazyMode is inherited ny inner controls, TreeView cannot use LazyMode=Instance)
All you need, to use 'getPicker' method instead 'component'



var onSpecialKey = function (field, e) {
if (e.keyCode == Ext.EventObject.ENTER) {
e.preventDefault();
if (field.getPicker().getRootNode == null) {
alert('NOT ready');
}
else {
alert('READY');
}
}
};

Daniil
May 30, 2012, 11:57 AM
Sure, using getPicker() just within the onSpecialKey handler is much more clear solution when calling it within the AfterRender listener.

RCN
May 30, 2012, 3:43 PM
please mark it as resolved. once again thank you for your time