ExtJS 세 개의 용기 류 컨트롤 Window, Panel 및 Viewport
7085 단어 EXTJS
이 블 로그 에는 JS 분야 의 지식 이 적지 않다.참고 할 만하 다
저자: 이 망 (Lipan) 출처: [Lipan] （http://www.cnblogs.com/lipan/) 저작권 성명: 본 고의 저작권 은 작가 와 블 로그 원 이 공유 합 니 다.전재 할 때 반드시 본 고의 상세 한 링크 를 밝 혀 야 한다. 그렇지 않 으 면 작 가 는 그의 법률 적 책임 을 추궁 하 는 것 을 보류 할 것 이다.
이 편 은 세 개의 용기 류 컨트롤 을 설명 합 니 다.
1. 패 널 컨트롤 Ext. Panel
하나의 패 널 컨트롤 은 제목 표시 줄, 도구 모음, 본문, 단추 구역 이 있 는 몇 부분 을 포함한다.제목 표시 줄 은 맨 위 에 있 고 도구 모음 은 네 개의 위치 에 놓 을 수 있 으 며 중간 부분의 본문 을 둘러싸 고 단추 구역 은 가장 작은 쪽 에 있 습 니 다.다음은 몇 가지 기본 설정 항목 을 소개 합 니 다.
1. title: 패 널 제목 텍스트 를 설정 합 니 다.
2. tbar, lbar, rbar, bbar: 각각 위, 왼쪽, 오른쪽, 아래 네 부위 의 도구 모음 을 설정 합 니 다.
3. html, items: 전 자 는 본문 부분의 html 를 설정 하고 후 자 는 본문 부분의 ext 컨트롤 을 설정 합 니 다.
4. buttons: 단추 영역 을 설정 하 는 단추 입 니 다.
판 넬 생 성 코드 를 보 겠 습 니 다:
[html]
Panel
[Js]
Ext.onReady(function () {
var p = Ext.create('Ext.Panel', {
title: ' ',
collapsible: true,
renderTo: 'div1',
width: 400,
height: 300,
autoScroll: false,
bodyBorder: true,
buttonAlign: 'right',
buttons: [{
text: " 1",
handler: function () {
Ext.Msg.alert(" ", " ");
},
id: "bt1"
}, {
text: " 2",
id: "bt2"
}
],
floating: true,
footerCfg: { tag: 'span', id: 'span1', html: ' ' },
items: [{
xtype: "button",
text: " "
}],
tbar: Ext.create('Ext.toolbar.Toolbar', { items: [" "] }),
html: " "
});
p.setPosition(40, 50);
});
효 과 는 다음 과 같 습 니 다:
2. 창 컨트롤 Ext. window. Window
창 컨트롤 은 패 널 컨트롤 과 기본적으로 유사 합 니 다. 다만 그 는 창 처럼 보이 지만 최대 화, 최소 화, 닫 기, 드래그 등 창 동작 을 가지 고 있 습 니 다. 다음은 창 생 성 코드 를 보 겠 습 니 다.
판 넬 생 성 코드 를 보 겠 습 니 다:
[html]
[Js]
Ext.onReady(function () {
var window1 = Ext.create('Ext.window.Window', {
applyTo: 'win1',
layout: 'table', // {absolute accordion anchor border card column fit form table}
width: 500,
height: 200,
closeAction: 'hide', // ：hide/close
plain: true,
title: " ",
maximizable: true, //
minimizable: true, //
closable: false, //
modal: true, //
resizable: false, //
items: [{
text: ' ',
xtype: "button"
}, {
width: 214,
minValue: 0,
maxValue: 100,
value: 50,
xtype: "slider"
}, {
xtype: "button",
text: ' ',
width: "60px",
height: "15px",
menu: {
items: [
new Ext.ColorPalette({
listeners: {
select: function (cp, color) {
Ext.Msg.alert(' ', ' ' + color + '。');
}
}
}), '-',
{ text: ' 1' }, { text: ' 2' }, { text: ' 3' }
]
}
}],
buttons: [{
text: ' ',
disabled: true
}, {
text: ' ',
handler: function () {
window1.hide();
}
}]
});
Ext.fly("button1").on("click", function () {
window1.show(Ext.get("button1"));
});
});
효 과 는 다음 과 같 습 니 다:
3. 레이아웃 컨트롤 Ext. container. 뷰 포트
레이아웃 컨트롤 은 보통 전체 페이지 의 레이아웃 에 사 용 됩 니 다. 네 방향 으로 네 개의 구역 으로 나 뉘 는데 중간 본문 부분 과 네 개의 구역 이 자동 으로 숨 길 수 있 습 니 다. 사실 이 컨트롤 의 핵심 기능 은 바로 'border' 방식 의 레이아웃 을 사 용 했 습 니 다. 다음은 생 성 코드 를 보 겠 습 니 다.
[Js]
Ext.onReady(function () {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: ' logo',
xtype: "panel",
title: " ",
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: ' ',
xtype: 'panel',
width: 200,
autoScroll: true
}, {
region: 'center',
xtype: 'tabpanel',
activeItem: 0,
items: {
title: ' ',
html: ' '
}
}, {
region: 'south',
title: ' ',
collapsible: true, //
html: ' ',
split: true,
height: 100,
minHeight: 100
}]
});
});
효 과 는 다음 과 같 습 니 다:
좋은 웹페이지 즐겨찾기
