extjs 구성 요소 및 레이아웃

1293 단어 ExtJs

extjs 용기와 레이아웃


용기


레이아웃 레이아웃 구성 요소 표시 위치
               container        


               panel    

               view   grid  dataView

            viewport body 

Panel: 제목, 위아래 좌우 도구 모음 tool button 내용 영역을 포함합니다.

레이아웃 방식

  • vbox 수직 레이아웃 item 설정 항목에서 flex 높이의 비items:[{title:'패널 1',flex:1,width:50},/flex 높이의 비layout:{type:'vbox','align:'strechmax'},align 제어 스트레칭
  • 2.accordion 아코디언 레이아웃 3.anchor 닻 레이아웃은 용기의 크기가 바뀔 때 구성 요소가 상응하는 변화를 일으킨다.구성 요소는 용기의 크기에 비해 백분율이나 차이가 있을 수 있습니다. 4.absolute 절대 레이아웃, item에서 x y 제어 구성 요소가 표시되는 위치 5.border 테두리 레이아웃 동남서북중.item의 지역 설정 항목 6.테이블 테이블 레이아웃 item에서columns와rowspan 레이아웃 제어

    작업 원리

  • doLayout 메서드를 차례로 호출합니다
  • 용기를 닫는 reLayout containerPanel.suspendLayout = false; containerPanel.doLayout();

  • 구성 요소

  • items 설정 항목은 구성 요소를 용기에 추가합니다
  • xtype은 구성 요소의 유형을 대표합니다
  • hideMode 표시 및 숨기기;floating:absolutely-positioned
  • 구성 요소 확장 extend: "Ext. Component".onRender 메서드는 자신의 논리를 확장합니다(this.callParent(arguments))
  • 사용자 정의 형식alias:'widget.managedimage’,//this component will have an xtype of ‘managedimage’
  • 좋은 웹페이지 즐겨찾기