[CLOSED] [1.0] Mandatory field indicator on textfield within FormPanel

[Vladimir]

Hi,

Clicking the show button shows the textfield but the indicator icon is in the wrong position and on the same line as the note. Also, if note=alignTop is used and a FieldLable is used, I have to set the clear style to none to get the field label to be aligned with the textfield.

It seems that you use old code because in the latest version 'clear:both' is removed already

For bullet-red, the style is pointing to a local directory.

It is url which pointed to the Ext.Net http handler (ext.axd), it uses by default (if you have that http hamdler in the web.config and ResourceManager.CleanResourceUrl != false)

So, I cannot reproduce all issues are reported by you. I suppose that you use old code and in the latest code all issues are fiex already

Also, the indicator for radio group hides behind one of the radio buttons in this example.

You have to provide Width or Anchor for the RadioGroup because group occupies whole width of the container. For example, set

Anchor="-20"

[betamax]

Looks like all those issues are resolved now:cool:. Thanks for working with me on that.

[randy85253]

Bump.

Was this ever implemented? A Field.Prefix & Field.Suffix sound like good additions.

[randy85253]

Un-bump - nevermind.

[betamax]

3 issues to investigate:
In this code sample you will see that the layout setting causes the indicator to position itself behind the field label

<ext:FormPanel ID="frmSwap" runat="server" Padding="20" Header="false" Border="false">
        <Items>
            <ext:Panel ID="pnlSwap" runat="server"  Hidden="true"  Layout="form" >
                <Items>
                    <ext:Container ID="Container2" runat="server" Layout="form" >
                        <Items>
                            <ext:TextField ID="txtSwap" runat="server" FieldLabel="test" AllowBlank="false"  IndicatorIcon="BulletRed"></ext:TextField>
                        </Items>
                    </ext:Container>
                </Items>
           </ext:Panel>
       </Items>
    </ext:FormPanel>
    <ext:Button ID="Button1" runat="server" Text="Swap">
        <DirectEvents>
            <Click OnEvent="SwapMode"></Click>
        </DirectEvents>
    </ext:Button>

Codebehind:

Protected Sub SwapMode(ByVal sender As Object, ByVal e As DirectEventArgs) 
        pnlSwap.Show()
End Sub

The use of hidden and .show() along with the Layout="form" are necessary both to reproduce this, and also necessary in my code for formating purposes, as I use layout to format multiple containers in a panel.

Another issue I see is that if you do not have a field label, and your Container's layout is not set to "form", you do not get an indicator

<ext:TextField ID="TextField3" runat="server" Width="200" AllowBlank="false" IndicatorIcon="BulletRed"></ext:TextField> 
<ext:TextField ID="txtField3" runat="server" Width="200" AllowBlank="false" IndicatorIcon="BulletRed" NoteAlign="Top" Note="Note3"></ext:TextField>

Neither of these lines will produce an indicator when within an <ext:Container runat="server" >, but seem to function as expected when Layout="form" is added to the container tag.

Lastly, a similar issue to the placement of the indicator when NoteAlign="Top" is that if I use a field label and note with NoteAlgn="Top" then the filed label will align to the Note and not to the field.

<ext:TextField ID="TextField2" runat="server" Width="200" AllowBlank="false" IndicatorIcon="BulletRed" FieldLabel="Too high" NoteAlign="Top" Note="Note2"></ext:TextField>

[geoffrey.mcgill]

Another issue I see is that if you do not have a field label, and your Container's layout is not set to "form", you do not get an indicator

<ext:TextField ID="TextField3" runat="server" Width="200" AllowBlank="false" IndicatorIcon="BulletRed"></ext:TextField> 
<ext:TextField ID="txtField3" runat="server" Width="200" AllowBlank="false" IndicatorIcon="BulletRed" NoteAlign="Top" Note="Note3"></ext:TextField>

Neither of these lines will produce an indicator when within an <ext:Container runat="server" >, but seem to function as expected when Layout="form" is added to the container tag.

We will investigate items #1 and #3, although re: #2, a form layout is required for the Indicator to render.

An indicator will not be rendered if the Field is rendered outside of a 'form' layout. An <ext:FormPanel> uses a 'form' layout by default and does not need to be explicitly set.

For other Containers, you can set .Layout="form", or add an <ext:FormLayout> within the <Items> region.

Hope this helps.

[Vladimir]

Hi,

First issue. The problem that hidden area has no size therefore indicator cannot be properly aligned
Solution: use HideMode="Offsets" for pnlSwap

Second issue: as Geoffrey mentioned, FormLayout is required for indicator functionality

Third issue: fixed in SVN. Please update

[betamax]

I am seeing this same issue again where I have a composite control and I have note align top for a textfield within that control. In the composite I also have a displayfield, and the composite uses an indicator . When rendered the field label, display field and indicator all align with the note instead of the textfield. Here is a simple example.

<ext:CompositeField ID="Comp1" runat="server" IndicatorIcon="BulletRed" Width="400" LabelAlign="Left" FieldLabel="Align Test">
    <Items>
        <ext:DisplayField runat="server" Text="Misalignment Test" StyleSpec="text-align:left;"></ext:DisplayField>
        <ext:TextField runat="server" NoteAlign="Top" Note="Test"></ext:TextField>                       
    </Items>
</ext:CompositeField>

See attached screen shot.

[Vladimir]

Hi,

Please update from SVN and retest
Please note if one inner field inside CompositeField has note top align then another fields should have the same top align. In your case you have to set for DisplayField

NoteAlign="Top" Note=" "

[betamax]

It appears that the indicator/label issue is resolved with the latest ext build. Thanks for the tip on the included display field.