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

      0  

    Default 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 - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,964
    Vote Rating
    11
    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