1. #1
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,259
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default FormPanel to render dynamic forms into LayoutRegions

    FormPanel to render dynamic forms into LayoutRegions


    Small snippet of code to render a dynamic form directly to a LayoutRegion.
    Code:
    var FormPanel = function(formObject) {
    	FormPanel.superclass.constructor.call(this, Ext.id(), {autoCreate: true});
    	formObject.render(this.getId());
    };
    Ext.extend(FormPanel, Ext.ContentPanel);
    After creating a dynamic form (named myForm) you can now do this:
    Code:
    layout.add('west', new FormPanel(myForm))

  2. #2
    Ext User wajatimur's Avatar
    Join Date
    Apr 2007
    Posts
    9
    Vote Rating
    0
    wajatimur is on a distinguished road

      0  

    Default


    Cannot place a title on this FormPanel ?
    |[ imComplex ]|

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,259
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Should be able to pass a 2nd parameter into the constructor named config then pass it up to the superclass/ContentPanel. Here is an untested fix, let me know your results:

    Code:
    var FormPanel = function(formObject, config) {
    		var config = config || {};
    		FormPanel.superclass.constructor.call(this, Ext.id(), Ext.apply({autoCreate: true}, config));
    		formObject.render(this.getId());
    };
    Ext.extend(FormPanel, Ext.ContentPanel);

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    210
    Vote Rating
    1
    KRavEN is on a distinguished road

      0  

    Default


    The var config = config || {}; is giving a syntax error.

  5. #5
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,259
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    I'm using this code now and is working fine....

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    210
    Vote Rating
    1
    KRavEN is on a distinguished road

      0  

    Default


    strange. Gave the syntax error in firefox and IE. I changed it to "var config = config;" and it works fine. Tab title is set correctly as well.

  7. #7
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,259
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Code:
    var config = config || {};
    Just says if config was passed in as an argument set it to a variabled named config, otherwise set it to a blank object literal.


    It could also be done like this:

    Code:
    if (config)
      var config = config;
    else
      var config = {};

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Posts
    210
    Vote Rating
    1
    KRavEN is on a distinguished road

      0  

    Default


    How would I go about adjusting the way the form looks in the panel? Any way to inject the html div it would have been applied to if rendered normally?

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Location
    Toronto, ON, CA
    Posts
    202
    Vote Rating
    0
    timb is on a distinguished road

      0  

    Default


    You would probably want to change
    Code:
    var config = config || {};
    to
    Code:
    config = config || {};
    since the the config variable is already declared as a parameter. There should be no problem with this, as I use it throughout my apps. I've seen similar stuff in the Ext code too.

  10. #10
    Sencha User
    Join Date
    Mar 2007
    Posts
    210
    Vote Rating
    1
    KRavEN is on a distinguished road

      0  

    Default


    Quote Originally Posted by KRavEN View Post
    How would I go about adjusting the way the form looks in the panel? Any way to inject the html div it would have been applied to if rendered normally?
    Well, I actually went back to this after not worrying about it for a long time and I guess my Ext skills must have gotten better because I figured it out pretty quickly. To set the style on the FormPanel container get the element and use setStyle. Here's mine for setting the margins for the example above:

    Code:
    Ext.get(panel.el.dom.parentNode.id).setStyle('margin', '10px 0px 0px 10px');

Thread Participants: 3