ExtJs 학습 노트 Ext.Panle Ext.TabPanel Ext.Viewport 1/3 페이지

이 글 을 통 해 다음 과 같은 내용 을 배 울 수 있 습 니 다.혹은 그 는 다른 컨트롤 과 관계 가 있 을 것 이다.패 널 은 하나의 도구 모음,하나의 아래쪽 도구 모음,패 널 머리,패 널 꼬리 와 패 널 메 인 영역 몇 부분 으로 구성 되 어 있 습 니 다.면 본 류 에 서 는 패 널 전개,닫 기 등 기능 도 제공 된다.그리고 재 활용 가능 한 도구 단 추 를 제공 하여 우리 로 하여 금 유연 한 제어 판 을 제공 합 니 다.판 넬 은 다른 모든 용기 에 넣 을 수 있 고 판 넬 자체 도 하나의 용기 이기 때문에 판 넬 안에 다른 구성 요 소 를 포함 할 수 있 습 니 다.패 널 의 클래스 이름 은 Ext.Panel 이 고 xtype 은 panel 입 니 다.다음 예 를 들 어 패 널 의 각 구성 부분 을 보 여 줍 니 다.//일반적인 패 널 function panel(){var panel=new Ext.Panel({renderto:'panel',title:'패 널 의 머리',width:400,height:200,html:'h1'패 널 의 메 인 디 스 플레이 영역.html 코드,tbar:[{text:'상단 도구 모음 단추'},bbar:[{text:'아래쪽 도구 모음'}],buttons:[{text:'패 널 아래쪽 단추',handler:function(){Ext.Msg.alert('알림','패 널 아래쪽 단추 의 이벤트!');}}};}위의 코드 는 상세 하 게 소개 하지 않 습 니 다.특히 주의해 야 할 것 은 renderto:'panel'입 니 다.이 코드 는 판 넬 을 div 층 에 연결 하 는 것 을 책임 집 니 다.panel 은 div 의 ID 입 니 다.코드 를 실행 하면 다음 효과 가 표 시 됩 니 다효과 가 좋 죠?패 널 에 여러 개의 도구 모음 이 있 을 수 있 습 니 다.패 널 의 상단 이나 아래쪽 에 있 을 수 있 습 니 다.Ext 도구 모음 은 Ext.Toolbar 류 로 표 시 됩 니 다.도구 모음 은 단추,텍스트 등 을 저장 할 수 있 습 니 다.또한 패 널 에 실 용적 인 도구 모음 도 제시 되 었 습 니 다.tools 설정 속성 을 통 해 패 널 머리 에 도구 모음 옵션 을 추가 할 수 있 습 니 다.다음 사례 를 보십시오:function panel(){var panel=new Ext.Panel({tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function(){Ext.MessageBox.alert("도구 모음 단추","도구 모음 닫 기 단추 이벤트")}],renderto:'panel',title:'패 널 의 머리',width:400,height:200,html:'h1'패 널 의 메 인 디 스 플레이 영역.html 코드,tbar:[{text:'상단 도구 모음 버튼'},bbar:[{text:'아래쪽 도구 모음'},buttons:[{text:'패 널 아래쪽 버튼',handler:function(){Ext.Msg.alert('알림','패 널 아래쪽 버튼 의 이벤트!');}}}}}
1 2 3 다음 페이지 전문 을 읽다