Ext 패널
23077 단어 ext
<HTML>
<HEAD>
<TITLE> </TITLE>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="Ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>
</HEAD>
<script type="text/javascript">
function PannelBasic(){
var btn = new Ext.Button({text:" 1"});
var p = new Ext.Panel({
title: ' ',
collapsible:true,//
renderTo: 'basic',// ID
width:400,
// html: '<b> </b><br>Hello !', //html panel
//autoload:"news.html",//panel url
items:[btn,{xtype:"button",text:" 2"},{title:" 3",height:50,border:false}],
// ， ：
// bbar：
// buttons： , buttonAlign
// tbar：
// bbar：
// tools：
// Ext ， ：
// new Ext.Button({ text: ' ' })//
// '-'
// Ext ， “{ text: ' '}”
tbar: [new Ext.Button({ text: ' ' }),'-', new Ext.Button({ text: ' ' }), new Ext.Button({ text: ' ' }) ] ,
bbar: [{text: ' ',handler:function(){
p.add({title:" "});
var p2 = p.getComponent(2);
alert(p2.title);
p.remove(p2);
p.doLayout();// ，
//p.load("news.html");
p.body.update("<h1> </h1>"+new Date());
}},{text: ' '},{text: ' '}],
tools: [{id:'save'},{id:'help'},{id:'close'},{id:'print',handler:function(){window.print();}}],
buttonAlign:"center",
buttons: [{ text: ' ', handler: worning }, { text: ' '}]
});
}
function worning() {
Ext.MessageBox.alert(' ',' ！');
}
Ext.onReady(PannelBasic);//
</script>
<BODY>
<!-- ， ， ， div ， div， Ext id div -->
<div id="basic"></div>
</BODY>
</HTML>물론 자주 사용하는 이 몇 개의 속성 외에 또 한 무더기의 속성이 있는데 여기는 표의 형식으로 열거하여 모두가 열람할 수 있도록 제공한다.
Ext.Panel 기본 구성 프로젝트 테이블
구성 항목
매개변수 유형
설명
animCollapse
Boolean
패널을 축소하거나 확장할 때 애니메이션 효과를 표시할지 여부를 설정합니다. Ext.Fx 클래스를 사용할 수 있으면 기본값은true이고 그렇지 않으면 fasle입니다.
applyTo
Mixed
한 페이지에 이미 존재하는 요소나 요소 id는 구성 요소가 새 구성 요소의 용기가 아닌 뒤에 추가됩니다.
autoDestroy
Boolean
컨테이너에서 제거된 구성 요소를 자동으로 제거할지 여부를 설정합니다. 기본값은true이고 그렇지 않으면 수동으로 제거합니다.
autoHeight
Boolean
자동 높이를 사용할지 여부는true는 자동 높이를 사용하고false는 고정 높이를 사용하며 기본값은false입니다
autoLoad
Object/String/ Function
패널에 자동으로 불러오는 URL 주소를 설정합니다.null이 아니면 패널에서 이 URL을 불러오려고 시도하고 바로 패널에서 렌더링합니다.이 연결은 패널의 바디 요소로 변하기 때문에 필요에 따라 언제든지 패널 내용을 리셋할 수 있습니다
autoScroll
Boolean
스크롤 바를 자동으로 표시할 지 설정하고true는 패널의 바디 요소 스타일을 오버플로우: 'auto' 로 설정합니다. 내용이 넘치면 스크롤 바를 자동으로 표시하고false는 스크롤 바를 표시하지 않고 넘친 내용을 차단합니다.기본값은 false 입니다.
autoShow
Boolean
구성 요소의 숨김 스타일을 제거할지 여부를 설정합니다. (예를 들어 'x-hidden' or 'x-hide-display') true라면 렌더링할 때 제거합니다. 기본값은false입니다.
autoWidth
Boolean
자동 너비 사용 여부,true 자동 너비,false 고정 너비,기본값false
baseCls
String
패널 요소에 적용되는 기본 스타일 클래스입니다. 기본값은 'x-panel' 입니다.
bbar
Object/Array
Ext.Toolbar 객체, 도구막대 구성 객체 또는 button 구성 객체의 배열을 설정할 수 있는 패널의 아래쪽 도구막대를 설정합니다.
bodyBorder
Boolean
패널체(body)의 내부 경계선을 표시할지 여부를 설정합니다.true는 표시하고false는 숨기며 기본값은true입니다.그리고 이 항목은border = true에서만 적용됩니다
bodyStyle
String/Object/ Function
패널(body)에 적용되는 사용자 정의 스타일입니다.기본값은 null입니다.
border
Boolean
이것은 패널체(body)의 경계선을 표시할 지 여부입니다.true는 표시하고false는 숨기며 기본값은true입니다.기본 테두리 너비는 2px
buttonAlign
String
패널 밑에 있는 단추의 정렬 방식을 설정합니다. 유효한 값은 'right', 'left','center ', 기본값은' right '입니다.
buttons
Array
패널 밑에 있는 단추 설정 대상의 그룹을 추가합니다.
collapseFirst
Boolean
렌더링 확장 또는 축소 버튼의 순서를 설정합니다.true는 다른 단추를 렌더링하기 전에 확장 또는 수축 단추를 먼저 렌더링하고false는 마지막에 렌더링하며 기본값은true입니다.구성 항목에 따라 확장 또는 축소 버튼의 위치가 결정됩니다.
collapsed
Boolean
패널이 처음 렌더링될 때 수축 상태인지,true는 수축,false는 확장,기본값false
collapsible
Boolean
패널을 펼치거나 수축할 수 있는지 설정하고true는 펼치거나 수축할 수 있으며 패널 머리에 신축 단추를 표시합니다.기본값은 false 입니다.
contentEl
String
패널의 내용 요소를 설정합니다. 페이지 요소의 id 또는 존재하는 HTML 노드입니다.
defaultType
String
패널에 있는 요소의 기본 유형입니다. 기본값은'panel'입니다.
defaults
Object
패널 컨테이너에 적용된 모든 요소의 구성 객체(예: defaults: {body Style:'padding: 15px'}
floating
Boolean
패널을 부동할 수 있는지 설정하고true는 기본값false를 허용합니다.floating을true로 설정하면 패널이 마이너스 오프셋 위치에 표시되어 패널이 보이지 않습니다. 부동 상태에서 패널은 절대적인 위치를 사용하기 때문에 위치는 렌더링 후에 명확한 설정을 해야 합니다(예를 들어 myPanel.setPosition(100100).부동 패널도 고정된 너비가 필요하다
footer
Boolean
패널 밑에 (footer) 요소를 만들지 여부를 설정하고true는 만들고false는footer 요소의 만들기를 건너뛰며, 하나 이상의 단추가footer에 추가되면footer의 설정은 무시되고,footer 요소를 직접 만듭니다
frame
Boolean
렌더링 패널을 설정할 지 여부입니다.true는 렌더링 패널을 사용자 정의 원각 경계로 하고false는 1px의 직각 경계로 렌더링합니다
header
Boolean
패널 헤더 요소를 만들지 여부를 설정하고true는 만들고false는 헤더 요소의 만들기를 건너뛰며 title을 제공했지만 헤더를 설정하지 않으면 헤더가 자동으로 생성됩니다.타이틀이 제공되었지만 헤더를false로 명확하게 설정하면 헤더가 생성되지 않습니다
headerAsText
Boolean
패널의 헤더에 title을 표시할지 여부를 설정합니다.true는 표시하고 기본값은true입니다
height
Number
패널 높이, 기본값은 auto
hideBorders
Boolean
true는 패널 용기에 있는 모든 구성 요소의 경계선을 숨기고false는 구성 요소의 구체적인 설정에 따라 표시합니다
hideCollapseTool
Boolean
collapsible가true일 때 확장 또는 축소 단추를 표시할 지 설정합니다
html
String/Object
패널(body) 요소의 컨텐트를 HTML 세그먼트 또는 DomHelper에서 생성한 컨텐트로 설정합니다.
items
Mixed
개별 서브어셈블리 또는 서브어셈블리의 배열
layout
String
패널의 레이아웃 유형, 기본 Ext.layout.ContainerLayout 레이아웃, 선택한 레이아웃의 설정 항목은layoutConfig를 통해 설정합니다
layoutConfig
Object
이 설정 대상은 선택한 레이아웃의 설정 항목을 포함하고, 각 레이아웃의 설정 항목에 대해 해당하는 레이아웃 클래스 설명을 보아야 한다
maskDisabled
Boolean
패널을 사용할 수 없을 때 패널을 덮을지, true는 덮을지, 기본값은true입니다.
shadow
Boolean/String
패널 뒤에 그림자를 보일 지,true가 보일 지, 문자열을 통해 그림자를 표시할 지 설정합니다. 유효한 값은 sides, 프레임,drop입니다. 기본값은'sides' 입니다.이 항목은 floating이true일 때만 적용됩니다
shadowOffset
Number
패널 섀도우의 오프셋을 픽셀 단위로 설정합니다. 기본값은 4입니다.이 항목은 floating이true일 때만 적용됩니다
tbar
Object/Array
패널의 맨 위에 있는 도구막대를 설정합니다. Ext.Toolbar 대상, 도구막대 설정 대상, button 설정 대상의 그룹입니다.판넬을 렌더링한 후 getTopToolbar 방법으로만 이 도구막대에 접근할 수 있음을 주의하십시오
title
String
패널 헤더에 표시되는 제목 정보'
titleCollapse
Boolean
패널 헤더를 눌러서 펼치거나 수축할 수 있는지 설정합니다.true는 기본적으로 false입니다.
tools
Array
도구 단추 설정 대상의 그룹, 이 단추들은 패널 헤더 기능 영역에 추가됩니다. 표 5-2에 상세한 설명이 있습니다.
width
Number
패널 너비, 기본값은 auto
Tools 설정 항목은 주로 패널 헤더 기능 구역에 표시할 각종 단추를 설정하는 데 사용됩니다. 각 단추의 설정 대상에 포함될 수 있는 설정 항목은 표 5-2에서 설명합니다. Tools 설정 항목 id와 단추 아이콘의 대응 관계는 표 5-3과 같습니다.
tools 설정 항목 명세서
구성 항목
매개변수 유형
설명
id
String
필수 옵션, 가능한 값 및 효과는 표5.3 참조
handler
Function
버튼을 클릭하면 이벤트: Ext.EventObject, toolEl: Ext.Element, Panel: Ext.Panel
scope
Object
처리 함수의 실행 범위
qtip
String/Object
단추에 대한 알림 정보를 지정합니다. 문자열이나 설정 대상이 될 수 있습니다.
hidden
Boolean
첫 번째 렌더링 시 숨김 여부를 설정합니다.
on
Object
단추를 위한 이벤트 감청기를 설정합니다.
표 5-3 tools 설정 항목 id와 단추 아이콘 대응 관계표
물론 Ext의 가장 현저한 특징은 드래그할 수 있다는 것이다. 그러면 컨트롤을 드래그하는 것이 도대체 어렵지 않겠는가?draggable:true만 설정하면 됩니다. 여러분은 시도해 보십시오.그러나 나는 20초가 지나면 많은 돌림돌이가 날아올 것이라고 믿는다. 왜냐하면 끌면 끌 수 있기 때문이다. 그러나 마우스가 느슨해지면 다시 제자리로 돌아간다. 주함수체에 한마디만 더하면 된다.
new
Ext.dd.DDProxy(
'
basic
'
);
//
이 구절을 더하면 마음대로 드래그할 수 있어요.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ExtJS 3.2 학습 노트(3) 사용자 정의 이벤트Extjs에서 모든 상속은 Ext.util에서 합니다.Observable 클래스의 컨트롤은 이벤트를 지원할 수 있습니다. 클래스에 대해 이벤트를 사용자 정의하려면 다음 절차를 따르십시오. 1, 먼저 클래스를 정의합니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
