1. #1
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482
    Vote Rating
    1
    Wolfgang is on a distinguished road

      0  

    Default [Solved]Autocreate DIV container for Ext.Window?

    [Solved]Autocreate DIV container for Ext.Window?


    I try to create a window without having a DIV element in html.
    From the docs i understood that the config "el" would autocreate such a div. But that failed.
    Then i tried passing a domhelper config in the config option "html", but that failed as well.
    Also the attempt to use a config option "autoCreate" failed, too. (i assume that is not supported anyway)
    The only way i get it working, is to create the DIV upfront using domhelper.
    Here the code snippet:
    Code:
    Ext.DomHelper.insertFirst(document.body, {tag: 'div', id:'msg-dlg'}); // seems to be required to work
    dlg = new Ext.Window({
    	el: 'msg-dlg',
    	id: 'msg-dlg',
    	//html: (Ext.fly('body'), {tag: 'div', id:'msg-dlg'}), // fails
    	//html: ('body', {tag: 'div', id:'msg-dlg'}), // fails
    	//html: (document.body, {tag: 'div', id:'msg-dlg'}),   // fails
    	//autoCreate: true, // fails
    	width: 400,
    	height: 250,
    	closeAction: 'hide',
    	//plain: true,
    	modal: true,
    	//bodyStyle: 'mystyle',
    	buttons: [{
    		text: 'Close',
    		handler: function(){
    			dlg.hide();
    		}
    	}]
    });
    dlg.render();  // call render to ensure a valid body property
    So what is the purpose of the config option "el" and "html"?
    For "html" i understand that i can pass a HTML fragment that wil be displayed in body, but i am not able to pass a domhelper config to create a DIV.

    Can anyone shed a light?

  2. #2
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    Ext.Window is not meant to be constrained/contained by anything except document.body.

    Since Window is a Panel descendant, when rendered, it too will have a .body property that you can write-to/modify .

    Code:
    var dlg = new Ext.Window({
        id: 'msg-dlg',
        width: 400,
        height: 250,
        closeAction: 'hide',
        //plain: true,
        modal: true,
        html:'<h1> Hello </h1>',   //rendered body content
        buttons: [{
            text: 'Close',
            handler: function(){
                var d = Ext.getCmp('msg-dlg');
                if(d) d[d.closeAction]();
            }
        }]
    });
    dlg.show(); 
    dlg.body.update('Welcome');
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482
    Vote Rating
    1
    Wolfgang is on a distinguished road

      0  

    Default


    Thank you for your example.
    It seems that when using show() the DIV container 'dlg-msg' is created, where when using render() it is not.

    So is it possible to let Ext.Window autocreate the container defined by the property "id" when using render()?
    And in this sense, what is the purpose of the property "el"?

  4. #4
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    el is always a Component's container element.

    With few exceptions, there should be no reason for you to specify 'el' directly. Instead use .renderTo (since, el == .renderTo) for an existing el. Otherwise .id will be used to create el for you.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  5. #5
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482
    Vote Rating
    1
    Wolfgang is on a distinguished road

      0  

    Default


    So what if i want to use the ext.window on an existing DIV=msg-dlg" and also set an id="msg-dlg" for that ext.window component. Would i use the config:

    el: "msg-dlg"
    or
    id: "msg-dlg"

    Basically i am still a bit confused about the usage of el in particular.

    Thanks very much for your explanation

  6. #6
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    Code:
    new Ext.Window({
       elrenderTo: "msg-dlg",   //ELement ID
        id: "msg-dlg",     //Component ID
    .....
    
    });
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  7. #7
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482
    Vote Rating
    1
    Wolfgang is on a distinguished road

      0  

    Default


    Thank you.

Thread Participants: 1