[CLOSED] ForceLayout of child controls

[RCN]

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]

Hi,

Please set up

LazyMode="Instance"

for the TreePanel.

[RCN]

Unfortunately setting up the LazyMode property has no effect.

[RCN]

Any idea to overcome this problem?

[Daniil]

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]

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:

<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]

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]

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]

Sure, using getPicker() just within the onSpecialKey handler is much more clear solution when calling it within the AfterRender listener.

[RCN]

please mark it as resolved. once again thank you for your time