Ext JS Code - 검색툴바 생성연습

 화면마다 다른 검색툴바를 만들어야하는 일이 생겼다. 일일이 화면에 코딩하기도 번거러울 것 같고, 한번 만들어두면 두고두고 써먹을거 같아서 만들어 봤다. 단지 내가 필요해서 만든거고 코드도 완벽하지 않다. 차후 Ext JS를 더 깊이 이해하면 완벽하게 만들 수 있겠지 뭐..

 필요한건 검색툴바에 들어가야 할 xtype 이름들 뿐이다. 데이터를 불러올때 이 데이터를 사용하는 화면에서 쓸 xtype의 이름들을 같이 보내주면 된다. 아직은 너무나도 미완성이라 필요한 콤보박스나 체크박스, 라디오 버튼등이 필요하면 컴포넌트를 만들어서 추가해야한다 ㅋㅋㅋ

  1   View source

---

 우선은 xtype 이름이 담겨있는 배열을 받아서 툴바로 만들어주는 클래스소스이다. 이름은 내맘대로 툴바메이커로 정했다. 로직은 단순하게 xtype의 이름이 들어있는 배열을 받아서 배열안의 xtype으로 구성된 폼을 만든다. 그 후 폼을 툴바의 아이템으로 넣어주고 뿌려준다.

  2   Component source

---

여기에서 사용하는 xtype의 클래스역시 간단하다. 각각 콤보박스나 date필드를 확장해서 만든 컴포넌트들이다.  폼을 통해서 데이터를 보낼 수 있게 각각 컴포넌트의 이름들을 꼭 부여해야한다. 깨알같은 툴팁도 넣어주어서 각각의 컴포넌트가 무슨역할을 하는지도 표현해 주었다. 

  3   JSON Data

---

 각 화면정보들이 담긴 데이터다. 이 데이터를 불러올때 툴바에 생성할 컴포넌트들의 xtype들을 같이 보내주면 된다. 데이터의 tbar 항목으로 지정된 배열이 xtype이 담겨있는 배열이다.

각 화면을 생성할때 위의 툴바메이커로 저 tbar 배열을 보내주면 된다.

  4   Execute

---

 이제 화면을 생성할때 dockedItems 항목으로 툴바를 생성하면 된다. 물론 tbar 배열을 파라미터로 넘기고 생성할 툴바를 툴바메이커의 xtypedls tbar-toolbarmaker로 넣으면 된다.