1. #1
    Ext User
    Join Date
    Nov 2007
    Posts
    12
    Vote Rating
    0
    tngoldmant is on a distinguished road

      0  

    Default Problem with ManagedIframePanel

    Problem with ManagedIframePanel


    Hi All,
    I am having an issue with getting ManagedIframePanel to show up in my panel.

    My goal here is to have boarder pain that consist of a grid of contents that contains a list ofurls (center) and a html preview pane (south).

    Code:
    show_topic_dlg = new Ext.Panel({
        title: 'Topic Contents',
        layout:'border',
        items: [
            {
            title: 'Content List',
            region:'center',
            margins: '5 5 0 0',
            items:[{
                xtype:'grid',
                title:"Content List"
            }]
            },{
            title: 'Content View',
            region: 'south',
            height: 100,
            width: 200,
            margins: '0 5 5 5',
            collapsible:true,
            items:[{
                xtype:'panel',
    	    collapsible:true,
    	    width:400,
    	    height: 400,
    	    autoScroll:false,
    	    baseCls:'x-panel',
    	    body:  new Ext.ux.ManagedIframePanel ( {autoCreate:{id:'htmlPreviewPane', src:'http://www.google.com', frameBorder: 0, cls:'x-panel-body',width: '100%', height: '100%'}
    	                                       ,listeners:{documentloaded:function(){}
                 					     }}),
    	    frame:true,
    	    animCollapse:false, //cannot animate a collapse/expand on an Iframe !
    	    html: "Some text" 
    
            }]
        }]
    });
    Here is the button code for when the user wants to see this dialog:
    Code:
    new Ext.Button({text: "Show", handler : function(btn, e) {
                    if(!contentTopicWin){
                       contentTopicWin = new Ext.Window({
                        el:'show_content_list',
                        layout:'fit',
                        width:'100',
                        height:'200',
                        closeAction:'hide',
                        plain: true,
                        items: show_topic_dlg
                    });
                }
                contentTopicWin.show(this);
            }}).render(document.body, contentid);
    And last but not least is the html code in the html page
    Code:
    ....
    ....
    <div id="show_content_list" class="x-hidden">
        <iframe id="htmlPreviewPane" class="x-hidden"></iframe>
    </div>
    .....
    .....
    Attached is a screen shot of the dialog that gets displayed.

    So my question is what is the error that I have is causing the ManagedIframePanel not to be displayed.

    Thanks for all assistance provided.
    BR,
    Zone_Man
    Attached Images

  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


    @tngoldmant -- you have a lot of extraneous panel embedding going on here. ManagedIframePanel IS a panel, so just use it as such:

    Code:
    new Ext.Button({text: "Show", 
         handler : function(btn, e) {
                if(!contentTopicWin){
                    contentTopicWin = new Ext.Window({
                       // el:'show_content_list',    //not needed either
                        title: 'Content',
                        layout:'border',
                        width:'300',
                        height:'500',
                        closeAction:'hide',
                        plain: true,
                        defaults:{margins: '5 5 5 5'},  //tweak
                        items: [
                              {title: 'Content List',
                               region:'center',
                               id: 'contentgrid',
                               xtype:'grid'
                             },{
                               title: 'Content View',
                               region: 'south',
                               collapsible:  true,
                               id  : 'preview',
                               xtype:  'iframepanel',
                               defaultSrc:  'http://www.google.com',
                               listeners:  {documentloaded:function(){}},
                               frame    :  true
                           }]
    
                     });
                }
                Ext.getCmp('preview').setSrc(someUrl);  //change the iframe.src as/when needed
                contentTopicWin.show(this);
            }}).render(document.body, contentid);
    It's not really clear what you intend to do with this:?
    Code:
    ...
    ....
    <div id="show_content_list" class="x-hidden">
        <iframe id="htmlPreviewPane" class="x-hidden"></iframe>   not needed
    </div>
    .....
    .....
    "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
    Ext User
    Join Date
    Nov 2007
    Posts
    12
    Vote Rating
    0
    tngoldmant is on a distinguished road

      0  

    Default


    Thank you Mr. Hendricks for helping me out, I am still learning my way around Ext. Your advice did the trick. All the best,
    Zone_Man

Thread Participants: 1