이것은 어떻게 ExtJs4에서 뷰포트를 만드는 방법을 보여 간단한 예입니다.
뷰포트는 문서 본문에 자신을 렌더링하고 브라우저 뷰포트의 크기에 자동으로 크기 자체 및 창 크기 조정을 관리합니다. 오직 페이지에서 만든 한 뷰포트의가있을 수 있습니다.
뷰포트는 스크롤을 제공하지 않으므로 autoScroll의 설정을 사용하여 필요한 경우 뷰포트 내에서 아동 패널 스크롤을 제공한다.
내선 JS의 패널 구성 요소와 달리 뷰포트는 tbar 옵션이 없습니다. 그럼, 뷰포트의로 도구 모음 구성 요소를 첨부할 수 없습니다. 가장 좋은 해결 방법은 도구 모음에 응용 프로그램의 북쪽 지역을 변환하는 것입니다.
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE> ExtJS4 뷰포트 예 </ TITLE> <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.2a/resources/css/ext-all.css" /> <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.0.2a/ext-all.js"> </ script>를 <SCRIPT>의 외부 . 어플 리케이션 ({이름 : '보기 포트', 출시 : 함수 () {Ext.create ( 'Ext.container.Viewport', {레이아웃 : '테두리', 아이템 : [{지역 : '북쪽', 테두리 : 거짓, 높이 : 24, tbar : [{텍스트 : '새', 메뉴 : [{텍스트, 핸들러 '새 엑스 추가': 함수 () {/ / 메뉴 항목 Ext.Msg.alert을 "새 X를 추가"하는 처리기를 추가하는 ( '경고', '새로운 X 항목을 추가하십시오!');}}, {텍스트를 :} '새 Y 추가']}, {텍스트 : '새로 고침'}, {텍스트 : '도구'} '->', {텍스트 : '옵션', iconCls : 'options_icon', 메뉴 : [{텍스트 : '사용자 정보'}, {텍스트 : '설정'}, {텍스트 : '스위치 테마'}]}, {텍스트 : '도움말' }, '-', {텍스트 : '로그아웃'}]}, {지역 : 웨스트 ', / / 축소 : 사실, 분할 : 사실, 제목 :'탐색 ', 폭 : 150 / /이 TreePanel 또는 AccordionLayout을 사용할 수 에 대한 탐색 항목}, {지역 : '남쪽', 높이 : 26, / * bbar : [/ / 히프 바 {xtype : '단추'텍스트 '버튼 1'}] * / dockedItems : [{xtype : '도구 모음 '독'최하위 ', 항목 : [{xtype :'단추 '텍스트'보기 경고 & 클리어 ', 핸들러 : 함수 () {VAR SB = Ext.getCmp ('기본 - 상태 표시줄 '); sb.setStatus ({텍스트 : '죄송합니다!', iconCls : 'X-상태 - 오류', 클리어 : 사실 / / 자동 맑은 세트 간격 후});}}, {xtype : '단추', 텍스트 : '다른 용무 중 표시' , 핸들러 : 함수 () {VAR SB = Ext.getCmp ( '기본 - 상태 표시줄'); / / 뭔가 처리가 표시할 상태 표시줄 설정 : sb.showBusy ();}}, {xtype : '단추', 텍스트 : '클리어 상태', 핸들러 : 함수 () {VAR SB = Ext.getCmp ( '기본 - 상태 표시줄'); / / 일단 완료 sb.clearStatus ();}} '-', '일반 텍스트']} ]}, {지역 : '동쪽', 제목 : '이스트 패널', 축소 : 사실, 분할 : 사실, 폭 : 150}, {지역 '중심', xtype : 'tabpanel', / / TabPanel 자체는 제목이 없습니다 activeTab : 기본적 autoScroll에 의해 적극적으로 0, / / 첫 번째 탭 : 사실, 항목 :} {. 제목 : '기본 탭'HTML '첫 번째 탭 \'의 내용을 다른 동적으로 '추가될 수 있습니다}]});}} ); </ 스크립트> </ HEAD> <BODY> </ BODY> </ HTML> 
