ExtJs 학습 노트 기초 편 Ext 구성 요소 사용 1/2 페이지

Ext 의 구성 요 소 를 소개 합 니 다.몇 가지 간단 한 예 를 들 어 설명 하 겠 습 니 다.주의:글 내용 은 본인 이 공부 하 는 과정 에서 본 자료 가 있 습 니 다.Ext 2.0 은 프레임 워 크 를 매우 크게 재 구성 했다.그 중에서 가장 중요 한 것 은 구조 와 차원 이 뚜렷 한 구성 요소 체 계 를 형성 하고 이런 구성 요소 로 Ext 컨트롤 을 형성 했다.Ext 구성 요 소 는 Component 클래스 에서 정의 합 니 다.모든 구성 요 소 는 지정 한 xtype 속성 값 을 가지 고 있 습 니 다.이 값 을 통 해 구성 요소 의 유형 을 얻 거나 지정 한 형식의 구성 요 소 를 정의 할 수 있 습 니 다.Ext 구성 요소 체 계 는 다음 그림 에서 보 여 줍 니 다.구성 요 소 는 크게 세 가지 로 나 눌 수 있 습 니 다.즉,기본 구성 요소,도구 모음 구성 요소,폼 요소 구성 요소 입 니 다.      기본 구성 요 소 는이렇게 많은 구성 요소 가 있 는데 모두 매우 멋있다.구성 요 소 는 키워드 new 를 통 해 직접 만 들 수 있 습 니 다.예 를 들 어 지난 글 에서 말 한 Window 상자 var win=new Ext.Window()를 만 듭 니 다.이러한 생 성 방식 을 제외 하고 일반적으로 구조 함수 에 설정 속성 을 추가 하여 구성 요 소 를 초기 화 합 니 다.예 를 들 어 패 널 만 들 기:function panel(){var params={title:"Hello",width:300,height:200,html:"

하나의 패 널

"};var panel=new Ext.Panel(params); panel.render("panel"); }

키 코드:function panel(){var params={title:"Hello",width:300,height:200,html:"

패 널

"};var panel=new Ext.Panel(params); panel.render("panel"); } params 는 Panle 을 설정 하 는 매개 변수 입 니 다.title:제목,width:너비,height:높이,html:패 널 에 표 시 된 내용 var panel=new Ext.Panel(params);이 코드 는 패 널 을 만 들 고 구조 함수 에 패 널 속성 을 설정 합 니 다.panel.render("panel"); 페이지 의 div 요소 id 를 표시 합 니 다.코드 는 간략하게 쓸 수 있 습 니 다.

var panel=new Ext.Panel({renderTo:"panel",title:"Hello",width:300,height:200,html:"<h1> </h1>"});
구성 요소 의 하위 요소 구성 요 소 는 로드 지연 방식 으로 컨트롤 을 만 드 는 것 을 지원 합 니 다.이 때 부모 용기 의 items 를 통 해 배열 방식 으로 직접 전달 할 수 있 습 니 다.function panel(){var params={title:"Hello",width:300,height:200,html:"

하나의 판 넬

",items:[new Ext.Panel({title:"Panel 1",height:100}),new Ext.Panel({title:"Panel 2",height:100})}};var panel=new Ext.Panel(params); panel.render("panel"); } 구성 요소 가 서로 다른 효 과 를 나타 내 려 면 구조 함수 의 매개 변 수 를 통 해 설정 해 야 합 니 다.      구성 요소 가 Ext.Component 에서 계승 되 기 때문에 모든 구성 요 소 는 공 통 된 속성 이 있 을 수 있 습 니 다.다음 그림
1 2 다음 페이지 전문 을 읽다

좋은 웹페이지 즐겨찾기