[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

    Vladimir Shcheglov
    Sr. Developer
  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
    Vladimir Shcheglov
    Sr. Developer
  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
    Vladimir Shcheglov
    Sr. Developer
  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>
    Vladimir Shcheglov
    Sr. Developer
  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
    Vladimir Shcheglov
    Sr. Developer
Page 1 of 2 12 LastLast

Similar Threads

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

Posting Permissions