EXT의 Accordion과 Table 레이아웃

1833 단어 ext
Accordion 레이아웃은 클래스 Ext.layout.Accordion의 정의, 이름은 accordion으로 접을 수 있는 레이아웃을 나타냅니다.
레이아웃을 사용하는 컨테이너 어셈블리의 하위 요소는 축소 가능한 형태입니다.다음 코드를 보십시오.
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"    ",
width:500,
height:200,
layout:"accordion",
layoutConfig: {
animate: true
},
items:[{title:"   1",html:"     1    "},
{title:"   2",html:"     2    "},
{title:"   3",html:"     3    "}
] }
);
});

위 코드는 세 개의 하위 구성 요소가 포함된 Accordion 레이아웃을 사용하는 컨테이너 구성 요소를 정의합니다.
요소, layoutConfig에서 레이아웃 설정 파라미터 animate를true로 지정하여 펼치기 접기를 실행할 때 대응하는지 여부를 표시합니다
애니메이션 효과를 사용합니다.
각 하위 요소의 머리 이름 또는 오른쪽 버튼을 클릭하면 패널이 확장되고 확장된 다른 항목이 축소됩니다.
열린 패널입니다.
Table 레이아웃은 클래스 Ext.layout.TableLayout 정의, 이름은 table입니다. 이 레이아웃은 용기의 하위 요소를 책임집니다.
일반적인 html 라벨과 유사하다.

Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:"hello",
title:"    ",
width:500,
height:200,
layout:"table",
layoutConfig: {
columns: 3
},
items:[{title:"   1",html:"     1    ",rowspan:2,height:100},
{title:"   2",html:"     2    ",colspan:2},
{title:"   3",html:"     3    "},
{title:"   4",html:"     4    "}
] }
);
});

위 코드는 부모 용기 구성 요소를 만들었습니다. 탭 레이아웃을 사용하고layoutConfig는columns를 사용합니다.
지정한 부모 용기는 3열로 나뉘고, 하위 요소에서rowspan이나colspan을 사용하여 하위 요소가 가로로 놓인 칸 수를 지정합니다.
앞에서 설명한 몇 가지 레이아웃을 제외하고 Ext2.0에는 다른 Ext.layout도 포함되어 있습니다.AbsoluteLayout、
Ext.layout.AnchorLayout 등 레이아웃 클래스, 이런 레이아웃은 주로 다른 레이아웃의 기본 클래스로 사용된다.
응용 프로그램에서 직접 사용하지 않습니다.또한 우리는 10가지 레이아웃 유형의 하나를 계승하여 사용자 정의 천을 실현할 수 있다
국.
[Codility/Lesson7]Stonewall(python)
Git&Git Hub 스터디 정리-CLI편

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage