1. #1
    Ext User
    Join Date
    Feb 2008
    Posts
    14
    Vote Rating
    0
    arth is on a distinguished road

      0  

    Default Transform existing div into panel?

    Transform existing div into panel?


    I'm new to Ext - please forgive me for my ignorance. I've spent hours trying to figure this out, including looking at the example code and the documentation (docs/output/Ext.Panel.html) and can't figure out an easy way to load existing div content into a panel without duplicating it.

    I want to take something like this:
    Code:
    <html>
    <head>
    ...includes left out for simplicity
    <script type="text/javascript" >
        
            Ext.onReady(function(){
    ...
    });
    </script>
    </head>
    <body>
    <div id="panel_content">I want to display everything in this div as a panel</div>
    </body></html>
    and display #panel_content within a panel. Here's what I started with, straight from the sample with the exception of the html config option:
    Code:
    var p1 = new Ext.Panel({
                    title: 'Filter Options',
                    collapsible:true,
                    renderTo: 'panel_content',
                    width:400,
                    html: Ext.get('panel_content').dom.innerHTML
                });
    This displays a duplicate copy of #panel_content within a panel at the bottom of the existing content. I have tried other combinations using the contentEl: config option and using the render() method instead of the renderTo: option but nothing I've tried will gracefully replace #panel_content with the panel. I can load the innerHTML from my div into a string, set the innerHTML to '' then set the html config option to my string but that seems like a hack. There must be something simple that I'm overlooking here. Any help would be appreciated.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Bah
    Posts
    434
    Vote Rating
    0
    efege is on a distinguished road

      0  

    Default


    Hi arth, welcome to Ext!

    Try this HTML:

    Code:
    <div id="panel_content" class="x-hidden">I want to display everything in this div as a panel</div>
    with this JS:

    Code:
    var p1 = new Ext.Panel({
                    title: 'Filter Options',
                    collapsible:true,
                    contentEl: 'panel_content',
                    width:400,
                    renderTo: document.body
                });
    Fernando G

  3. #3
    Ext User
    Join Date
    Feb 2008
    Posts
    14
    Vote Rating
    0
    arth is on a distinguished road

      0  

    Default Thank you!

    Thank you!


    It was simple! Thanks very much - that got me going again.

    Art

  4. #4
    Ext User
    Join Date
    Jan 2008
    Posts
    103
    Vote Rating
    0
    ry.extjs is on a distinguished road

      0  

    Default


    did you try 'applyTo' at all? i think that's what you were looking for without having to use the 'x-hidden' class.

  5. #5
    Ext User
    Join Date
    Feb 2008
    Posts
    14
    Vote Rating
    0
    arth is on a distinguished road

      0  

    Default


    Quote Originally Posted by ry.extjs View Post
    did you try 'applyTo' at all? i think that's what you were looking for without having to use the 'x-hidden' class.
    Thanks for the suggestion - this method worked well too. Using the 'x-hidden' class isn't necessary but it is necessary to enclose at least the body of the content inside a 'x-panel-body' class. Thanks again!

    Art

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Location
    Bah
    Posts
    434
    Vote Rating
    0
    efege is on a distinguished road

      0  

    Default


    OK, so the code I posted above might be modified like this (using nested DIVs, right?):

    HTML
    Code:
    <div id="panel_markup"><div class="x-panel-body">I want to display everything in this div as a panel</div></div>
    JS
    Code:
    var p1 = new Ext.Panel({
               title: 'Filter Options',
               collapsible:true,
               applyTo: 'panel_markup',
               width:400
    });
    Fernando G

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi