Touch ux - IconsPanel

  1   Ext.ux.IconsPanel

---

  Sencha Touch로 만든 ux 입니다. 기본 스마트폰의 화면처럼 아이콘들이 나열되어있는 화면을 ux로 만들어보았습니다.

한 행에 생성될 아이콘 수 설정, 애니메이션 등 사용할 수 있도록 했고, 기본적으로 Sencha의 문법을 따라 store를 통하여 데이터를 가져오도록 설정했습니다.

 생성될 아이콘의 숫자에 따라 자동적으로 화면에 표시되는 아이콘의 사이즈가 알맞게 변하게 되고, tap 이벤트의 중복을 피하기 위하여 IconsPanel을 사용할때에는 아이콘을 탭 할때 "icontap"이벤트가 발생되기 때문에 컨트롤러에서 해당 이벤트를 리스닝하면 탭 하였을때 이벤트 함수를 설정할 수 있습니다.

  2   Store 구조

---

 Store를 생성할때에는 다음과 같은 형식으로 데이터를 가져오면 됩니다. 이때 데이터를 가져오는 프로퍼티(name이나 photo)를 다르게 지정 할 시에는 IconsPanel의 config 값에서 iconProperty 값과 textProperty 값을 세팅해주면 원하는 값으로 가져올 수 있게됩니다.

 IconsPanel을 사용하면 다음과 같은 화면을 볼 수 있습니다. 각각 아이콘 갯수를 5개와 4개로 설정한 것이며, 탭 했을때의 이벤트는 임의로 서브메뉴를 보여주도록 설정했습니다.

아이콘 5개로 설정

아이콘 4개로 설정