[CLOSED] MultiRow MultiField

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] MultiRow MultiField



    I'm trying to use the MultiField, but instead of placing multiple controls on the same row, I want create a MultiRow MultiField. An example would be an Address Field with Street, City, State, Zip... I also want to preserve the IsDirty & IsValid features of the internal fields.

    Can this be done?

    Any hints would be appreciated.

  2. #2

    RE: [CLOSED] MultiRow MultiField

    Hi,

    Why is need MultiField in this case? Just use those fields as independent. For example, place controls in different Anchor

  3. #3

    RE: [CLOSED] MultiRow MultiField



    My design requires flexible composite fields.

    So how can I do this?

    What I really need is a layout for the MultiField.


  4. #4

    RE: [CLOSED] MultiRow MultiField

    Hi,

    MultiField isdoesn't support layouts. It is need to write new control.
    I don't understand why you need to use MultiField in multi row case. You can use Panel with IsFormField="true" and any required layout
  5. #5

    RE: [CLOSED] MultiRow MultiField

    Is this how you mean? The problem is that the validation fails (click on Save). I need to preserver the IsValid & IsDirty functionality.

    Suggestions?


    <html xmlns="http://www.w3.org/1999/xhtml" >
      <head runat="server">
        <title></title>
      </head>
      <body>
        <form id="form2" runat="server">
          <ext:ScriptManager runat="server" />
          <ext:FormPanel ID="_formPanel" runat="server" Width="800" MonitorValid="true" MonitorPoll="500" 
              Title="FormPanel Validation"  BodyStyle="padding:5px;"  ButtonAlign="Right" >
            <Body>
              <ext:FormLayout runat="server">
                  <ext:Anchor Horizontal="-5">
                    <ext:TextField runat="server" AllowBlank="false" FieldLabel="TextField" />
                  </ext:Anchor>
                  <ext:Anchor Horizontal="-5">
                    <ext:MultiField runat="server" FieldLabel="MultiField">
                      <Fields>
                        <ext:TextField ID="TextField1" runat="server" AllowBlank="false" Note="First Name" />
                        <ext:TextField ID="TextField2" runat="server" AllowBlank="false" Note="Last Name" />
                      </Fields>                  
                    </ext:MultiField>
                  </ext:Anchor>
                  <ext:Anchor Horizontal="-5" IsFormField="true">
                    <ext:FormPanel runat="server" Border="false">
                      <Body>
                        <ext:FormLayout runat="server" HideLabels="true">
                          <ext:Anchor Horizontal="-5">
                            <ext:TextField runat="server" AllowBlank="false" Note="Street" />
                          </ext:Anchor>
                          <ext:Anchor Horizontal="-5">
                            <ext:TextField runat="server" AllowBlank="false" Note="City" />
                          </ext:Anchor>
                        </ext:FormLayout>
                      </Body>
                    </ext:FormPanel>                
                  </ext:Anchor>
              </ext:FormLayout>      
            </Body>
            <Buttons>
              <ext:Button runat="server" Text="Save">
                <Listeners>
                    <Click Handler="if(#{_formPanel}.getForm().isValid()){Ext.Msg.alert('Submit', 'Saved!');}else{Ext.Msg.show({icon: Ext.MessageBox.ERROR, msg: 'FormPanel is incorrect', buttons:Ext.Msg.OK});}" />
                </Listeners>
              </ext:Button>
              <ext:Button runat="server" Text="Cancel" />
            </Buttons>
            <BottomBar>
              <ext:StatusBar ID="_statusBar" runat="server" />
            </BottomBar>
            <Listeners>
              <ClientValidation Handler="#{_statusBar}.setStatus({text: valid ? 'Form is valid' : 'Form is invalid'});" />
            </Listeners>
        </ext:FormPanel>
        </form>
      </body>
    </html>
  6. #6

    RE: [CLOSED] MultiRow MultiField

    Hi,

    The simplest way to fix it:
    1. Remove IsFormField for FormPanel
    2. Add BodyStyle="padding-left:105px" for FormPanel


    I think better to use Panel then FormPanel (i mean secon (nested) FormPanel) because FormPanel has much functionality which you don't use
  7. #7

    RE: [CLOSED] MultiRow MultiField

    Vladimir;

    That kinda worked. Removing the IsFormField did fix the validation problem, but now I can't add a FieldLabel to the Panel like in the snippit below. (I just forgot the FieldLabel in my prior example.)

    How can I get both FieldLabel and Validation to work?



    <ext:Anchor Horizontal="-5" IsFormField="true" >
      <ext:Panel runat="server" Border="false" FieldLabel="MultiRow">
        <Body>
          <ext:FormLayout runat="server" HideLabels="true">
            <ext:Anchor Horizontal="-5">
              <ext:TextField runat="server" AllowBlank="false" Note="Street" />
            </ext:Anchor>
            <ext:Anchor Horizontal="-5">
              <ext:TextField runat="server" AllowBlank="false" Note="City" />
            </ext:Anchor>
          </ext:FormLayout>
        </Body>
      </ext:Panel>                
    </ext:Anchor>
  8. #8

    RE: [CLOSED] MultiRow MultiField

    Hi,

    If you need both functionality (label and validation) then it is need restor IsFormField (set IsFormField=true for Anchor) and the following code for inner form panel

    <CustomConfig>
                          <ext:ConfigItem Name="validate" Value="function(){return this.getForm().isValid();}" Mode="Raw" />
                      </CustomConfig>
                      <Listeners>
                         <Render Handler="this.isValid = this.validate;" />
                      </Listeners>
  9. #9

    RE: [CLOSED] MultiRow MultiField

    Vladimir;

    This worked, but same problem still existed w/ isDirtry, so I fixed that below. Also, I had to use a FormPanel, not a Panel, to get isValid and isDirty to work. For grins, I also added an multi-row field that contained a MutlField to make sure that would work. This might turn out to be a good 'Advanced Validation' example for someone.

    While this works, it sure feels like a bug-workaround. Shouldn't the framework wire these up when used in this mode?


    <html xmlns="http://www.w3.org/1999/xhtml" >
      <head runat="server">
        <title></title>
        <script type="text/javascript">
          function OnClientValidation(f,e){ CheckFormState(f); }
          function EditFormIsValid(){return CheckFormState(Ext.getCmp('_formPanel')); }
          function CheckFormState(fp)
          {
            var form = fp.getForm();
            var isValid = form.isValid();        
            
            Ext.getCmp('_statusBar').setStatus({        
              text: isValid ? 'Form is valid' : 'Form is invalid'
            });
            
            var btnSave = Ext.getCmp('_saveButton');
            if(btnSave)        
              btnSave.setDisabled(!form.isDirty());
            
            return isValid;
          }
        </script>
      </head>
      <body>
        <form id="form2" runat="server">
          <ext:ScriptManager runat="server" />
          <ext:FormPanel ID="_formPanel" runat="server" Width="800" MonitorValid="true" MonitorPoll="500" 
              Title="FormPanel Validation"  BodyStyle="padding:5px;"  ButtonAlign="Right" >
            <Body>
              <ext:FormLayout runat="server">
                  
                  <ext:Anchor Horizontal="-5">
                    <ext:TextField runat="server" AllowBlank="false" FieldLabel="SingleField" />
                  </ext:Anchor>
                  
                  <ext:Anchor Horizontal="-5">
                    <ext:MultiField runat="server" FieldLabel="MultiField">
                      <Fields>
                        <ext:TextField ID="TextField1" runat="server" AllowBlank="false" Note="First Name" />
                        <ext:TextField ID="TextField2" runat="server" AllowBlank="false" Note="Last Name" />
                      </Fields>                  
                    </ext:MultiField>
                  </ext:Anchor>
                  
                  <ext:Anchor Horizontal="-5" IsFormField="true" >
                    <ext:FormPanel runat="server" Border="false" FieldLabel="MultiRow">
                      <Body>
                        <ext:FormLayout runat="server" HideLabels="true">
                          <ext:Anchor Horizontal="-5">
                            <ext:TextField runat="server" AllowBlank="false" Note="Street" />
                          </ext:Anchor>
                          <ext:Anchor Horizontal="-5">
                            <ext:TextField runat="server" AllowBlank="false" Note="City" />
                          </ext:Anchor>
                        </ext:FormLayout>
                      </Body>
                      <CustomConfig>
                        <ext:ConfigItem Name="validate" Value="function(){return this.getForm().isValid();}" Mode="Raw" />
                        <ext:ConfigItem Name="haschanged" Value="function(){return this.getForm().isDirty();}" Mode="Raw" />
                      </CustomConfig>
                      <Listeners>
                        <Render Handler="this.isValid = this.validate; this.isDirty = this.haschanged" />
                      </Listeners>                  
                    </ext:FormPanel>                
                  </ext:Anchor>
                  
                  <ext:Anchor Horizontal="-5" IsFormField="true" >
                    <ext:FormPanel runat="server" Border="false" FieldLabel="MultiBoth">
                      <Body>
                        <ext:FormLayout runat="server" HideLabels="true">                      
                          <ext:Anchor Horizontal="-5">
                            <ext:MultiField runat="server">
                              <Fields>
                                <ext:TextField runat="server" AllowBlank="false" Note="Phone" />
                                <ext:TextField runat="server" AllowBlank="false" Note="Ext" />
                              </Fields>                  
                            </ext:MultiField>
                          </ext:Anchor>                      
                          <ext:Anchor Horizontal="-5">
                            <ext:TextField runat="server" AllowBlank="false" Note="Country" />
                          </ext:Anchor>
                        </ext:FormLayout>
                      </Body>
                      <CustomConfig>
                        <ext:ConfigItem Name="validate" Value="function(){return this.getForm().isValid();}" Mode="Raw" />
                        <ext:ConfigItem Name="haschanged" Value="function(){return this.getForm().isDirty();}" Mode="Raw" />
                      </CustomConfig>
                      <Listeners>
                        <Render Handler="this.isValid = this.validate; this.isDirty = this.haschanged" />
                      </Listeners>                  
                    </ext:FormPanel>                
                  </ext:Anchor>
                  
              </ext:FormLayout>      
            </Body>
            <Buttons>
              <ext:Button ID="_saveButton" runat="server" Text="Save">
                <Listeners>
                    <Click Handler="if(EditFormIsValid()){Ext.Msg.alert('Submit', 'Saved!');}else{Ext.Msg.show({icon: Ext.MessageBox.ERROR, msg: 'FormPanel is incorrect', buttons:Ext.Msg.OK});}" />
                </Listeners>
              </ext:Button>
              <ext:Button runat="server" Text="Cancel" />
            </Buttons>
            <BottomBar>
              <ext:StatusBar ID="_statusBar" runat="server" />
            </BottomBar>
            <Listeners>
              <ClientValidation Fn="OnClientValidation" />
            </Listeners>
        </ext:FormPanel>
        </form>
      </body>
    </html>
  10. #10

    RE: [CLOSED] MultiRow MultiField

    Hi,

    Anchor can contains any control therefore we can't automatically apply those functions because we don't know required validation logic for all possible controls
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Multifield + Visiblity
    By reinout.mechant@imprss.be in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 09, 2010, 10:24 AM
  2. [CLOSED] MultiField Fill
    By sdevanney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 29, 2010, 6:16 AM
  3. [CLOSED] Multifield Rendering
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 23, 2009, 4:28 AM
  4. [CLOSED] Multifield bug?
    By state in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Sep 11, 2009, 5:28 AM

Posting Permissions