안녕하세요.
김종광입니다.
가장 자주 쓰는 객체인 Container 와 Panel 에 대해 비교 해 보겠습니다.
사실 별 차이가 없어서 구분 없이 쓰기도 하는데요.
어느 정도 차이가 나는지 보도록 하겠습니다.
먼저 Ext JS 의 경우 입니다.
당연히 Panel 보다는 Container 를 쓰셔야 합니다.
Hierarchy를 보시면 container 가 panel 보다 상위 객체 이지요.
상속 구조에서는 자식이 항상 기능이 더 많쟎아요. (그만큼 무겁고요)
간단한 기능이라면 더 가벼운 container 를 이용하세요.
자, 그럼 얼만큼 더 무거운지 보겠습니다.
Panel API에서 Show > Inherited 를 Off 해서 차이 나는 기능만 보겠습니다.
보시면 훨씬 무겁습니다.
이는 Sencha Doc > Guides 에도 잘 나와 있는데요.
Panel 이 궂이 필요하지 않은 간단한 기능이라면 Container 를 쓰라고 합니다.
기능 차이가 많이 나고 그만큼 무겁다고 하네요.
특히, xtype 생략해서 사용하시면 (아래처럼)
<br />{ html: 'Hello, world' }<br />
default 로 무거운 Panel 이 생성되니 명시적으로 xtype: ‘container’ 라고 선언 해야 겠습니다.
Sencha Touch 의 경우
Touch 의 경우 Ext JS와 약간 다릅니다.
Sencha Forum 의 Sencha 엔지니어 글에도 나와 있는데요.
Container 랑 Panel 이랑 별 차이 없다고 설명하고 있습니다.
직접 차이점을 보시죠.
Config 로는 baseCls 속성 1개가 차이 날 뿐입니다.
Methods 2개는 baseCls 의 Setter/Getter 입니다. CSS도 baseCls 에 따른 차이 뿐입니다.
거의 차이가 없다고 봐야 겠네요.
(하지만 습관처럼 xtype: ‘container’를 선언 하지요 ^^;;)
특히, Ext JS 에서는 차이가 있으니 구분해서 사용 하시기 바랍니다.^^
감사합니다.
– 주식회사 종광, CTO & Founder
– 한국센차유저그룹 운영자
– 미래부/NIPA, 소프트웨어 마에스트로 멘토
– E-Mail : kim@jongkwang.com
– Blog : http://jongkwang.com
– Twitter : @jongkwang
– Facebook : https://facebook.com/kimjongkwang