Results 1 to 3 of 3

Thread: BasicForm

  1. #1

    Default BasicForm

    Hello All,

    I'm new with ExtJs and what I'd like to do is create an upload form with ExtJs 2.0 using an html form as a template, I mean, instead of creating all the form in the .js file, I'd like to use the form from the html file. So, I did something like the code below but when I submit the form, all the fields in the server are empty. Why? What is wrong in this case? :-(

    Regards

    Rafael

    form.html

    ...
    <div id="upload-dlg" style="display:none">
    <div class="x-dlg-hd">Upload File</div>
    <div class="x-dlg-bd">
    <form action="upload.jsp" enctype="multipart/form-data" method="post" id="upload-form">
    <input type="hidden" name="folder" />
    <table class="upload-form-ct">
    <tr>
    <th>File:</th>
    <td><input type="file" name="file" /></td>
    </tr>
    <tr>
    <th>Caption:</th>
    <td><input type="text" name="caption" /></td>
    </tr>
    <tr>
    <th>Description</th>
    <td><textarea name="description"></textarea></td>
    </tr>
    </table>
    </form>
    </div>
    </div>

    -------------
    form.js

    ...

    this.uploadDlg = new Ext.Window({
    height: 300,
    width: 350,
    modal: true,
    shadow: true,
    collapsible: false,
    draggable: false,
    resizable: false,
    buttonAlign: "center",
    html: Ext.get('upload-dlg').dom.innerHTML,
    resizable: false,
    bodyBorder: false
    });

    this.uploadBtn = this.uploadDlg.addButton({
    text: "Ok",
    disabled: false
    }, this.upload, this);

    this.uploadDlg.addButton("Cancel",
    this.uploadDlg.hide, this.uploadDlg);

    this.uploadFm = new Ext.form.BasicForm( Ext.get('upload-dlg') , {
    fileUpload: true,
    waitMsgTarget: this.uploadDlg.getEl(),
    baseParams: {}
    });


    var flds = this.uploadFm.el.dom.elements;

    this.uploadFm.add(
    new Ext.form.Hidden({
    id: Ext.id(flds.folder),
    value: ""
    }),
    new Ext.form.TextField({
    id: Ext.id(flds.caption),
    value: ""
    }),
    new Ext.form.TextArea({
    id: Ext.id(flds.description),
    value: ""
    })
    );


    this.uploadFm.on({
    actioncomplete: { scope: this, fn : alert("Done...") },
    actionfailed: { scope: this, fn: alert("Failed...") }
    });


    this.uploadFm.render();

    this.uploadDlg.show();

    ...

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Use code tags.

    You are placing all the markup for a Window inside a Window.

    If you want to use existing markup, use the contentEl config option which is documented.

    To create a BasicForm, you supply a <form> element which is also documented.

    To create Ext inputs from existing fields, use applyTo which is documented.

    Start with this:

    Code:
          <form id="myForm" action="upload.jsp" enctype="multipart/form-data" method="post" id="upload-form">
            <input type="hidden" name="folder" />
            <table class="upload-form-ct">
              <tr>
                <th>File:</th>
                <td><input type="file" name="file" /></td>
              </tr>
              <tr>
                <th>Caption:</th>
                <td><input type="text" name="caption" /></td>
              </tr>
              <tr>
                <th>Description</th>
                <td><textarea name="description"></textarea></td>
              </tr>
            </table>
          </form>
    
    -------------
    form.js
    
     ... 
    
     this.uploadDlg = new Ext.Window({
        height:   300,
        width:   350,
        modal: true,
        shadow: true,
        collapsible: false,
        draggable: false,
        resizable: false,
        buttonAlign: "center",   
        contentEl: 'myForm',
        bodyBorder:  false
     });
          
      this.uploadBtn = this.uploadDlg.addButton({
        text: "Ok",
        disabled: false
      }, this.upload, this);
    
      this.uploadDlg.addButton("Cancel",
        this.uploadDlg.hide, this.uploadDlg); 
      
      this.uploadFm = new Ext.form.BasicForm( 'myForm' , {
        fileUpload: true,
        waitMsgTarget: true,
        baseParams: {}
      });
    
      var flds = this.uploadFm.el.dom.elements;
      this.uploadFm.add(
        new Ext.form.Hidden({
          applyTo: flds.folder,
          value: ""
        }),
        new Ext.form.TextField({
          applyTo: flds.caption,
          value: "file"
        }),
        new Ext.form.TextArea({
          applyTo flds.description,
          value: ""
        })
      );
      
      this.uploadFm.on({
        actioncomplete: { scope: this, fn : alert("Done...") },
        actionfailed: { scope: this, fn: alert("Failed...") } 
      });
    
      this.uploadDlg.show();
    
      ...

  3. #3

    Default BasicForm worked!!!!

    Oh man, it worked great!!!! :-)

    I appreciate your help!!!!

    Rafael

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •