ExtJs 연구 노트 Ext.Panle Ext.TabPanel Ext.Viewport 페이지 1/3_extjs

이 기사를 통해 다음 내용을 배울 수 있습니다
1. 간단한 패널 Ext.Panel 만들기
2. 드래그 가능한 패널 Ext.Panel 만들기
3. 간단한 레이아웃을 구축하기 위한 Ext.Viewport(이 기사의 모든 내용을 요약하려면 작은 예를 사용하십시오.)
패널은 ExtJ 컨트롤의 기초입니다. 많은 컨트롤은 패널을 기반으로 확장되거나 다른 컨트롤과 결합됩니다. 통제 그들 사이에는 관계가 있습니다.
패널은 툴바, 하단 툴바, 패널 헤더, 패널 테일, 패널 메인 영역으로 구성됩니다. 페이스북 클래스는 패널 확장, 닫기 등의 기능도 제공합니다. 그리고 유연한 제어판을 제공하기 위해 재사용 가능한 도구 버튼을 제공합니다. 패널은 다른 컨테이너에 배치될 수 있습니다. 패널 자체도 컨테이너이므로 패널에는 다른 구성요소도 포함될 수 있습니다. 패널의 클래스 이름은 Ext.Panel이고 xtype은 패널입니다.
패널의 다양한 구성요소를 표시하려면 다음 예를 살펴보세요.
//일반 패널
function panel(){
var panel=new Ext.Panel({
renderTo:' 패널',
title:'패널 헤더',
너비:400,
높이:200,
html:'

패널의 기본 표시 영역 ..포함 가능 모든 HTML 코드

',

tbar:[{text:'Top Toolbar Buttons'}],
bbar:[{text:'Bottom Toolbar'}],
buttons :[
{
text:'패널 하단의 버튼',
handler:function()
{
Ext.Msg.alert('Prompt', ' 패널 하단의 버튼 이벤트!' );
}
}
]
})
}
위 코드는 자세히 소개하지 않겠습니다. 특히 주의할 점은 renderTo:'panel'입니다. 코드는 패널을 p 레이어에 바인딩하는 역할을 하며 패널은 p의 ID입니다.

코드가 실행되면 다음과 같은 효과가 표시됩니다.

효과가 좋습니다! 패널에는 여러 개의 도구 모음이 있을 수 있으며, 이는 패널의 상단이나 하단에 위치할 수 있습니다. Ext 도구 모음은 Ext.Toolbar 클래스로 표시됩니다. 도구 모음은 버튼, 텍스트 및 기타 콘텐츠를 저장할 수 있습니다. 또한 패널에는 tools 구성 속성을 통해 패널 헤더에 도구 모음 옵션을 추가할 수도 있습니다.
function panel(){
var panel=new Ext.Panel( {
도구:[
{id:"save"},
{id:"help"},
{id:"up"},
{
id:" close ",
handler:function(){
Ext.MessageBox.alert("도구 모음 버튼", "도구 모음 닫기 버튼 이벤트")
}
}
],
renderTo: '패널',
title:'패널 헤더',
너비:400,
높이:200,
html:'

패널의 기본 디스플레이 영역..모든 HTML을 포함할 수 있습니다. 코드

',

tbar:[{text:'상단 도구 모음 버튼'}],
bbar:[{text:'하단 도구 모음'}] ,
버튼:[
{
text:'패널 하단의 버튼',
handler:function()
{
Ext.Msg.alert('Prompt','패널 하단 버튼 이벤트! ');
}
}
]
})
}