[HARD] Multiple UserControls inside FormPanel + isValid + Dinamically loading

[marcoslimagon]

Hello, good afternoon..

I'm facing a fancy issue...

I'm trying use multiple UserControl's inside and Ext.FormPanel. The problem is when I try validate the inner controls.

To validate an user control I need the following tags inside UC1.ascx:

    <ext:ContainerLayout runat="server" ID="teste">
                <Items>
 ......CONTROLS.....
</Items>
</ext:ContainerLayout>

And the form panel...

<ext:FormPanel ID="FormPanelSolicitacao" runat="server" Title="Nova Solicitação"
        Icon="Application" Width="760" Frame="true" IsFormField="true">
        <Items>
            <ext:ContainerLayout runat="server" ID="teste">
                <Content>
                    <uc1:ROTASNovaSolContratoConvenio ID="ROTASNovaSolContratoConvenio1" runat="server" />
                    <uc2:ROTASNovaSolInfoGestor ID="ROTASNovaSolInfoGestor1" runat="server" />
                </Content>
            </ext:ContainerLayout>
        </Items>
        <Buttons>
            <ext:Button ID="btnNovaSolicitacao" runat="server" Text="Salvar">
                <DirectEvents>
                    <Click OnEvent="btnNovaSolicitacao_DirectClick" Before="var valid= #{FormPanelSolicitacao}.getForm().isValid();">
                        <EventMask ShowMask="true" MinDelay="1000" Target="CustomTarget" CustomTarget="={#{FormPanelSolicitacao}.getEl()}" />
                        <ExtraParams>
                            <ext:Parameter Value="#{FormPanelSolicitacao}.getForm().isValid()" Mode="Raw" Name="PanelSolicitacao">
                            </ext:Parameter>
                        </ExtraParams>
                    </Click>
                </DirectEvents>
            </ext:Button>
        </Buttons>
    </ext:FormPanel>

But... if I try use 2 user controls inside the FormPanel....


System.Exception: Only one layout is possible in the container (ID = 'FormPanelSolicitacao')

How can I workaround this?

Is this a bug?

Thanks for any reply!

Regards

[Daniil]

Hi,

Well, the FormPanel validation mechanism supports only Component's inheritors, not user controls.

I can suggest to implement a custom control instead of a user control. Then you could add it as an item of a FormPanel.

[marcoslimagon]

Your replay gave me an idea...

I (may) have figured out a solution... I'm testing right now.. I'll post the solution soon :)

Thanks!!

[marcoslimagon]

The solution:

First of all,

I need to wrap my UserControl's with "Content" tag at the .aspx file.

<ext:FormPanel ID="FormPanelSolicitacao" runat="server" Title="Nova Solicitação"
        Icon="Application" Width="760" Frame="true" IsFormField="true">
        <Content>
            <uc1:ROTASNovaSolContratoConvenio ID="ROTASNovaSolContratoConvenio1" runat="server" />
            <uc2:ROTASNovaSolInfoGestor ID="ROTASNovaSolInfoGestor1" runat="server" />
        </Content>
        <Buttons>
            <ext:Button ID="btnNovaSolicitacao" runat="server" Text="Salvar">
                <DirectEvents>
                    <Click OnEvent="btnNovaSolicitacao_DirectClick" Before="var valid= #{FormPanelGestorInfoGerais}.getForm().isValid() && #{FormPanelContratoConvenio}.getForm().isValid() ; return valid;">
                        <%--<EventMask ShowMask="true" MinDelay="1000" Target="CustomTarget" CustomTarget="={#{FormPanelGestorInfoGerais}.getEl()}" />
                        <ExtraParams>
                            <ext:Parameter Value="#{FormPanelGestorInfoGerais}.getForm().isValid()" Mode="Raw" Name="PanelSolicitacao">
                            </ext:Parameter>
                        </ExtraParams>--%>
                    </Click>
                </DirectEvents>
            </ext:Button>
        </Buttons>
    </ext:FormPanel>

Check the following tag: <Click OnEvent="btnNovaSolicitacao_DirectClick" Before="var valid= #{FormPanelGestorInfoGerais}.getForm().isValid() && #{FormPanelContratoConvenio}.getForm().isValid() ; return valid;">

Each user control must have a FormPanel and the Id property must match the parameter used on Before attribute of Click event that we've put. Don't use the same Id otherwise will fail and will validate just the first FormPanel

.Ascx file

<ext:FormPanel ID="FormPanelGestorInfoGerais" runat="server" LabelWidth="110" ButtonAlign="Right"
    Border="false" LabelAlign="Left" PaddingSummary="10px 15px 20px">
    <Defaults>
        <ext:Parameter Name="MsgTarget" Value="side" />
    </Defaults>
    <Items>
        <ext:FieldSet ID="fdsGestorInfoGerais" runat="server" Title="Informações do Gestor"
            Collapsible="true" Layout="FormLayout" LabelAlign="Top">
            <Items>
[.......]
            </Items>
        </ext:FieldSet>
    </Items>
</ext:FormPanel>

The only concern regards the Before script because the way I'm using won't validate all UserControl's (in a row/at once).

Hope this help you :).

Marcos Lima
Software Developer/Tech Lead
www.marcoslimagon.com.br

[Daniil]

I see it should work, but this solution is not the best one.

Actually, you validate a user control manually. As well, items in a <Content> don't participate in layout logic.

I would still recommend to implement a custom control inherited from the Ext.Net.FormPanel:

1. You could add it in an <Items> of a any container.
2. You could validate all items just calling the .isValid() for a top level FormPanel.

[marcoslimagon]

Can Ext.Net support UserControls in the future somehow?


If Items could use System.Web.UI.UserControl or some kind of Ext.Net.UserControl will sharply increase the development velocity and reuse.


How could I help develop this feature?

Marcos Lima
Software Developer/Tech Lead
www.marcoslimagon.com.br

[Vladimir]

It is already implemented in Ext.Net v2 (not publicy available yet)

For example, in v2 you can

<ext:Window 
    ID="Panel1" 
    runat="server" 
    Title="Example"
    Layout="BorderLayout"
    BodyPadding="5" 
    Width="850" 
    Height="500">
    <Content>
        <ext:Panel runat="server" Title="Center" Region="Center" BodyPadding="5" Html="Center Panel" />
            
        <uc1:EastSouthRegion ID="EastSouth1" runat="server" />
        <uc2:NorthRegion ID="North1" runat="server" />
    </Content>
</ext:Window>

User controls

<%@ Control Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<ext:Panel ID="Panel2" runat="server" Title="Item 2" Width="150" Region="East" Split="true" />
<ext:Panel ID="Panel3" runat="server" Title="Item 3" Height="150" Region="South" Split="true" />

<%@ Control Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<ext:Panel ID="Panel4" runat="server" Title="Item 4" Height="150" Region="North" Split="true" />

[marcoslimagon]

Thanks Team!

I'm looking forward to try the new features from v2.


Thanks a lot!