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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar