1. #21
    Ext User
    Join Date
    Jun 2007
    Posts
    10
    Vote Rating
    0
    gitey is on a distinguished road

      0  

    Question


    Seldon, I did try the way u suggested. Am rendering my form in LayoutDialog. But my form.submit() doesnt seem to work. Its not sending the parameters that i type in my form. Ive also fixed(override) the code of form.render()Any idea why this is happening??Can you please post me your example? I think the problem is of adding SUBMIT button. Ive have added it in my layout.
    I did try adding submit like
    form.addButton(...........);
    But even this doesnt seem to work. All my values sent to the server are null.
    Please reply and thanks in advance.
    regards
    Gitey

  2. #22
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    0
    devnull has a little shameless behaviour in the past

      0  

    Default


    Ok I haven't been using Ext very long and am completely lost here:

    Quote Originally Posted by seldon View Post
    Then one final override is required! To make sure that the form.getValues() method works, you must override the form.render() method and replace the

    this.initEl(..) with:

    Code:
      this.initEl(this.autoCreate !== false ? ct.createChild(o) : ct);
    As best I can tell, I was supposed to do something like this:
    Code:
    Ext.override(Ext.form.Form, {
    	render : function(ct){
            ct = Ext.get(ct);
            var o = this.autoCreate || {
                tag: 'form',
                method : this.method || 'POST',
                id : this.id || Ext.id()
            };
            //this.initEl(ct.createChild(o));
            this.initEl(this.autoCreate !== false ? ct.createChild(o) : ct);
    
            this.root.render(this.el);
    
            this.items.each(function(f){
                f.render('x-form-el-'+f.id);
            });
    
            if(this.buttons.length > 0){
                            var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
                    cls:"x-form-btns x-form-btns-"+this.buttonAlign,
                    html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
                }}, null, true);
                var tr = tb.getElementsByTagName('tr')[0];
                for(var i = 0, len = this.buttons.length; i < len; i++) {
                    var b = this.buttons[i];
                    var td = document.createElement('td');
                    td.className = 'x-form-btn-td';
                    b.render(tr.appendChild(td));
                }
            }
            if(this.monitorValid){             this.startMonitoring();
            }
            return this;
        }
    })
    but I just get an error in firebug when it gets to the form.render():
    Code:
    _92.elements has no properties
    [Break on this error] (function(){var _1;Ext.lib.Dom={getViewWidth:function(_2){return _2?this.getDocu...
    ext-base.js (line 12)
    Any idea what's going on?
    This is a pretty large form (about 30 elements) so I would rather not post the whole code...
    If I don't override, then everything works great, except no values get submitted (and form.getValue() returns nothing).
    Ext version is 1.1 Beta 2 if it helps.

  3. #23
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

      0  

    Default


    For rendering a Form with tabs in a BasicDialog I'm using this (in Ext 1.x, Ext 2.x will have a slick way to do that built-in AFAIK):
    PHP Code:
    Ext.form.DialogTab = function(config){
        
    Ext.form.DialogTab.superclass.constructor.call(thisconfig);
    };

    Ext.extend(Ext.form.DialogTabExt.form.Layout, {
        
    defaultAutoCreate : {tag'div'cls'x-form-ct x-dlg-tab'},

        
    onRender : function(ct){
            
    Ext.form.Column.superclass.onRender.call(thisct);
            if(
    this.title || this.legend){
                
    this.el.dom.title this.title || this.legend;
            }
        }
    });

    Ext.form.DialogForm = function(config){
        
    Ext.form.DialogForm.superclass.constructor.call(thisconfig);
    };
    Ext.extend(Ext.form.DialogFormExt.form.Form, {
        
    getDialog : function(force){
            if (
    force&&!this.dialog){
                
    this.dialog = new Ext.BasicDialog(document.bodyExt.apply({}, this, {id:Ext.id()}));
            }
            return 
    this.dialog;
        },
        
    tab : function(c){
            var 
    col = new Ext.form.DialogTab(c);
            
    this.start(col);
            if(
    arguments.length 1){ // duplicate code required because of Opera
                
    this.add.apply(this, Array.prototype.slice.call(arguments1));
                
    this.end();
            }
            return 
    col;
        },
        
    render : function(ct){
            
    Ext.form.DialogForm.superclass.render.call(thisct);
            
            
            var 
    dialog this.getDialog(true);

            
    //return; // temporarily disable
                
            // reordering, inject all form-elements into the dialog body and then 
            // append the dialog body to the form
            // before: dialog.bwrap > dialog.body > form.el
            // after:  dialog.bwrap > form.el > dialog.body
            //
            // (is needed so that the form elements do not get
            //  outside the form if auto-tabs are created)
            
    while (this.el.dom.firstChild) {
                
    Ext.fly(this.el.dom.firstChild).appendTo(dialog.body);
            }
            
    dialog.bwrap.insertFirst(this.el.dom);
            
    dialog.body.appendTo(this.el);
            
            
    // create tabs
            
    if (dialog.body.child('.x-dlg-tab'true)) {
                
    dialog.autoTabs true;
                
    dialog.body.setStyle("overflow""auto");
                
    dialog.initTabs();
                
    dialog.syncBodyHeight();
            }
            
        },
        
    applyTo: function(dialog){
            
    this.dialog dialog;
            
    this.render(this.getDialog(true).body);
        }
    }); 

    A usage example (altered from examples/form/dynamic.js):
    Code:
        /*
         * ================  Form 2  =======================
         */
        var top = new Ext.form.DialogForm({
            labelAlign: 'top'
        });
    
        top.tab(
            {title:"tabtitle", width:282}, // precise column sizes or percentages or straight CSS
            new Ext.form.TextField({
                fieldLabel: 'First Name',
                name: 'first',
                width:225
            }),
    
            new Ext.form.TextField({
                fieldLabel: 'Company',
                name: 'company',
                width:225
            })
        );
    
        top.tab(
            {title:"tabtitle", width:272, style:'margin-left:10px', clear:true}, // apply custom css, clear:true means it is the last column
            new Ext.form.TextField({
                fieldLabel: 'Last Name',
                name: 'last',
                width:225
            }),
    
            new Ext.form.TextField({
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email',
                width:225
            })
        );
    
        top.tab({title:"tabtitle"},
            new Ext.form.HtmlEditor({
                id:'bio',
                fieldLabel:'Biography',
                width:550,
                height:200
            })
        );
    
        top.addButton('Save');
        top.addButton('Cancel');
    
        var dialog = new Ext.BasicDialog(document.body, {title:"form title", width:500, height:500, id:Ext.id()}); 
    
        top.applyTo(dialog);

  4. #24
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    0
    devnull has a little shameless behaviour in the past

      0  

    Default


    I really wish this helped me, but it just blows up in a rather spectacular manner.
    Firebug throws out an infinite number of this:
    uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLDocument.designMode]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://10.0.0.1/lib/ext/ext-all-debug.js :: anonymous :: line 23068" data: no]

  5. #25
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

      0  

    Default


    here is a working example of my Ext.form.DialogForm code posted above. The one in my last post has some errors in it.
    http://ext.wirsind.info/dialog-with-tabs-and-form.html

    I'm not using the class anymore, I'm switching to Ext 2.0 right now and there are sooo much better ways to put a tabbed form into a window.

  6. #26
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    0
    devnull has a little shameless behaviour in the past

      0  

    Default


    Thanks so much, that did the trick.

  7. #27
    Ext User
    Join Date
    Jun 2007
    Posts
    66
    Vote Rating
    0
    cutigersfan is on a distinguished road

      0  

    Default ComboBox Post not quite right

    ComboBox Post not quite right


    I've used this example class and all seems to be working very well. However, I have found that if I use a combobox class, the "Name" gets posted, not the "value". When debugging I found that this is due to the "serialize" function that is passed the form name. It grabs the value from the underlying txt field, not the js object.

    Anyone got a solution or worked around this?


  8. #28
    Sencha User
    Join Date
    Mar 2007
    Posts
    9
    Vote Rating
    0
    ingkat is on a distinguished road

      0  

    Default How to place the boxWrap in each tab on your example

    How to place the boxWrap in each tab on your example


    Quote Originally Posted by dj View Post
    here is a working example of my Ext.form.DialogForm code posted above. The one in my last post has some errors in it.
    http://ext.wirsind.info/dialog-with-tabs-and-form.html

    I'm not using the class anymore, I'm switching to Ext 2.0 right now and there are sooo much better ways to put a tabbed form into a window.
    How to place the boxWrap in each tab on your example. Thank in advance

  9. #29
    Ext User
    Join Date
    Jul 2007
    Posts
    5
    Vote Rating
    0
    ccquiles is on a distinguished road

      0  

    Default


    Any idea how to apply this to an editable grid? I would like to have an editable grid that spans mutliple tabs... I have thought about using hide and show to hide columns on the activate event of a specific tab, but there has got to be some way to use these ideas towards an easier solution... any ideas?

    Thanks!

  10. #30
    Ext User
    Join Date
    Jun 2007
    Posts
    26
    Vote Rating
    0
    methodz is on a distinguished road

      0  

    Default LayoutDialog

    LayoutDialog


    Any idea on how to get this concept to work with a layout dialog? Even just making the outer tags "form" tags should work...