안녕하세요.
김종광입니다.

가장 자주 쓰는 객체인 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 에서는 차이가 있으니 구분해서 사용 하시기 바랍니다.^^

감사합니다.

---