역시 찾아보면 왠만한건 다 나오는거 같다.

특히나 Extjs 같은 경우는 외국에서 아주 관심이 많기 때문에 forum 에 들어가서 찾아보면 왠만한 대답은 다 찾을 수 있다..  다만 가입을 해야 다운로드를 할 수 있다.

자 , 그럼 TabPanel에 이전 글과 같이 <iframe> 태그로 넣는 방법이 아닌

iframePanel을 이용해서 넣어보자 ...

이 라이브러리는 외국 사용자가 만든걸 가져다 씁니다. ㅋ (아직 초보라 잘 몰라요 ㅠ.ㅠ )

필요한 설정

<script type="text/javascript" src="miframe.js"></script>  

다운로드 받은 파일에서 여기만 넣어주면 됩니다.

자바 스크립트 로딩속도를 좀 더 빠르게 할려면

<script type="text/javascript" src="miframe-min.js"></script>  

으로 해주세요, 위에는 22KB, 밑에는 8KB 정도 됩니다.

이렇게 파일을 로딩시켜주면 안에 들어있는 몇가지 클래스를 사용 할 수 있습니다.

Ext.reg('iframepanel', Ext.ux.ManagedIframePanel);

그중에 우리가 사용 할 것은 Ext.ux.ManagedIframePanel 입니다.

참고로 Ext.reg 는 xtype으로 등록해주는 함수로써 Ext.ux.ManagedIframePanel 과 같이 이름을 길게 적는 것이 아니라 xtype 속성으로 'iframepanel' 만 해주면 자동으로 Ext.ux.ManagedIframePanel을 생성해줍니다.

자, 이제 슬슬 예제를 볼까요?

      var obj = mainPanel.add(
       {
             id : 'tab-panel-' + Ext.id(),
             title : 'iframe-' + Ext.id(),
          xtype : 'iframepanel',
             closable : true,
             loadMask : {msg:'로딩중...'},
            //required so nonIE (of all things) wont refresh the iframe object when hidden
          style : {position:(Ext.isIE?'relative':'absolute')},
          hideMode : (Ext.isIE?'display':'visibility'),
            tbar : [{
                         text : 'Return',
                        handler : function(){
                             var panel = mainPanel.getActiveTab();
                            if(panel){
                                 panel.loadMask.msg = '지금 로딩중...';
                                 panel.setSrc();
                           }
                        }
                    },'-',{
                        text : 'Print',
                        handler: function(){
                       try{
                          mainPanel.getActiveTab().iframe.print();
                       }catch(ex){
                           Ext.Msg.alert('에러','프린트 실패!<br />'+ex);
                       }

                   }
           }],
         defaultSrc : 'http://www.google.com'
        
       }
      );

특별히 어려운건 없습니다.

다른건 없고 객체를 TabPanel에 추가할때 xtype : 'iframepanel' 로만 해주시고

defaultSrc 속성을 미리 주시면 iframe 태그의 src 속성이 자동으로 설정이 됩니다.  

확인은  http://easylogic.co.kr/web/index2.php 에서 하시면 됩니다. 탭추가를 눌러주세요.

자료는 여기서 다운받으시면 됩니다.

http://extjs.com/forum/showthread.php?t=16590&highlight=iframe