1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    4
    Vote Rating
    0
    Gaspar is on a distinguished road

      0  

    Exclamation Could not show dynamic form in Dialog

    Could not show dynamic form in Dialog


    Hi!
    I've got:
    PHP Code:
    HTML:
    <
    body>
        <
    div id="uploadDialog" style="visibility:hidden;position:absolute;top:-1000px;">
            <
    div class="x-dlg-hd">Upload</div>
            <
    div class="x-dlg-bd">
                <
    div class="x-box-mc"><div id="form-pics"></div></div>
            </
    div>
        </
    div>
    </
    body>

    App.js:
    App = function(){
        var 
    uploadDialog;
        return {
            
    init: function(){
               
    // INIT
            
    },
            
    upload: function(){
                if (!
    uploadDialog) {
                    
    uploadDialog = new Ext.BasicDialog('uploadDialog', {
                        
    autoCreatetrue,
                        
    width350,
                        
    height160,
                        
    modaltrue,
                        
    closabletrue,
                        
    resizabletrue,
                        
    draggabletrue,
                        
    collapsibletrue,
                        
    shadowtrue,
                        
    title'Upload-dialog'
                    
    });
                    
    // Upload form
                    
    var uploadForm = new Ext.form.Form({
                        
    fileUploadtrue,
                        
    url'url.php',
                        
    method'post',
                        
    baseParams: {action:'upload'},
                        
    waitMsgTargettrue
                    
    });
                    
    uploadForm.render('form-pics'); // ERROR HERE!
                
    }
                
    uploadDialog.show();
            }
    }();
    Ext.onReady(App.initApp);

    ERROR:
         
    c.render is not a function
         
    c.render(this.el); 
    What could be problem here?

  2. #2
    Ext User
    Join Date
    Sep 2007
    Location
    chile
    Posts
    73
    Vote Rating
    0
    evilized is on a distinguished road

      0  

    Default


    this code isn't neccesary...

    <div id="uploadDialog" style="visibility:hidden;position:absolute;top:-1000px;">
    <
    div class="x-dlg-hd">Upload</div>
    <
    div class="x-dlg-bd">
    <
    div class="x-box-mc"><div id="form-pics"></div></div>
    </
    div>
    </
    div>


    after u create the dialog (with the autocreate:true attribute), u need create the form... and render it directly on the dialog.body.

    like:

    uploadForm.render(uploadDialog.body);


    la musica es absolutamente necesaria para la vida.

  3. #3
    Ext User
    Join Date
    Jul 2007
    Posts
    4
    Vote Rating
    0
    Gaspar is on a distinguished road

      0  

    Default


    Thank you for reply!

    I removed this HTML and added "uploadForm.render(uploadDialog.body);"
    No change, same error

    I put HTML back in, removed "autocreate:true" attribute from uploadDialog generation.
    And added "uploadForm.render(uploadDialog.body);"
    No change, same error

    Strange thing is, i have another dialog with form (login) and they have very similar code - this one act ok.

    What does this error code actually means?
    Is my form not a component or it does not have object to render into?
    Last edited by Gaspar; 23 Oct 2007 at 6:55 AM. Reason: typos

  4. #4
    Ext User
    Join Date
    Sep 2007
    Location
    chile
    Posts
    73
    Vote Rating
    0
    evilized is on a distinguished road

      0  

    Default


    mmmmm

    i can paste a bit of my code... "a dialog with form."

    PHP Code:
    var addDialog = function() {
        
    this.doSave = function(e){
            
    this.form.submit({
               
    clientValidation:true,
               
    waitMsg:'Guardando la nueva identidad....'
            
    });
        };
        
        
    this.doCancel = function(e){
          
    this.dlg.hide();
        };
        
        
    this.dlg = new Ext.BasicDialog('add-dlg', {
            
    autoCreate:true,
            
    width360,
            
    height170,
            
    modaltrue,
            
    proxyDragtrue,
            
    collapsiblefalse,
            
    resizablefalse,
            
    closablefalse,
            
    title'Nueva identidad'
        
    });
        
        
    this.usuarios = new Ext.data.JsonStore({
            
    url'resources/backend/usuario.php?do=list',
            
    root'rows',       
            
    fields: ['us_nombre''us_id']
        });
        
        
    this.form = new Ext.form.Form({
             
    buttonAlign:'left',
             
    labelAlign:'left',
             
    labelWidth:150,
             
    method:'post',
             
    url:'resources/backend/identidad.php?do=add'
        
    });
        
        if(
    parseInt(Ext.get('ul_id').getValue()) == 0)
        {
           
    this.form.add(new Ext.form.ComboBox({
                
    fieldLabel:'Asignar A'
                
    store:this.usuarios,
                
    valueField:'us_id',
                
    hiddenName:'us_ida',
                
    displayField:'us_nombre',
                
    typeAheadtrue,
                
    triggerAction'all',
                
    emptyText:'seleccione un usuario...',
                
    selectOnFocus:true,
                
    allowBlank:false,
                
    name:'us_ida',
                
    editable:false
           
    }));   
        }
        
        
    this.form.add(new Ext.form.TextField({
           
    fieldLabel:'Nombre',
           
    allowBlank:false,
           
    name:'it_name'
        
    }));
        
        
    this.form.add(new Ext.form.TextField({
           
    fieldLabel:'Correo electronico',
           
    allowBlank:false,
           
    vtype:'email',
           
    name:'it_email'
        
    }));    
            
        
    this.dlg.addButton('Guardar'this.doSavethis);
        
    this.dlg.addButton('Cerrar'this.doCancelthis);
                
        
    this.dlg.body.setStyle('padding''1pt');
        
    this.dlg.body.setStyle('overflow''auto');
        
        
    this.form.render(this.dlg.body);
        
        if(
    parseInt(Ext.get('ul_id').getValue()) != 0)
        {
           
    this.form.el.createChild({
                
    tag:'input'
                
    type:'hidden'
                
    name:'us_ida'
                
    valueExt.get('us_id').getValue()
            });
        }
        
        
    this.parent null;
        
        
    this.dlg.on('beforehide',function(win){
             if(
    this.form.isDirty())
                
    this.parent.getDataSource().reload();
        },
    this);
    }

    addDialog.prototype = {    
        
    show : function(el) {        
            
    this.parent el;
            
    this.dlg.show();
        }

    and on my HTML i haven't any reference to a div o something like that for the dialog or the form.
    la musica es absolutamente necesaria para la vida.

  5. #5
    Ext User
    Join Date
    Jul 2007
    Posts
    4
    Vote Rating
    0
    Gaspar is on a distinguished road

      0  

    Default


    It seems i've bug in my (not published) code.

    Instead of adding multiple objects into form:
    PHP Code:
    uploadForm.add([
        new 
    Ext.form.TextField({
            
    fieldLabel'File 1',
            
    inputType'file',
            
    name'files[]',
            
    width175,
            
    allowBlanktrue
        
    })
    ],[
        new 
    Ext.form.TextField({
            
    fieldLabel'File 2',
            
    inputType'file',
            
    name'files[]',
            
    width175,
            
    allowBlanktrue
        
    })
    ]); 
    i have to do it one by one:

    PHP Code:
    uploadForm.add(
        new 
    Ext.form.TextField({
            
    fieldLabel'File 1',
            
    inputType'file',
            
    name'files[]',
            
    width175,
            
    allowBlanktrue
        
    })
    );
    uploadForm.add(
        new 
    Ext.form.TextField({
            
    fieldLabel'File 2',
            
    inputType'file',
            
    name'files[]',
            
    width175,
            
    allowBlanktrue
        
    })
    ); 
    Last edited by Gaspar; 26 Oct 2007 at 5:08 AM. Reason: grammar, typos

Thread Participants: 1