NavigationView 사용시 기본 툴바를 사용하지 않고, 사용자 지정 Toolbar를 사용하는 방법
1. NavigationView에서 툴바를 숨김. (/app/view/NaviView.js)
config:{
autoDestory: false,
navigationBar:false,
items:[
{
xtype:'menuview',
}
]
},
2. 하위 뷰에서 툴바를 생성하고, Back button 추가
( 하위 뷰를 Controller에서 생성하여 사용중임 : (/app/controller/MenuController.js)
onClickedJjajang:function()
{
var ansPanel = {
xtype:'panel',
html: '짜장면',
title:'짜장면',
items:[
{
xtype:'toolbar',
title:'짜장면',
items:[
// new Ext.Button(
// {
// ui:'back',
// text:'back',
// action:'naviBack',
// }
// ),
{
xtype:'button',
text:'back',
ui:'back',
action:'naviBack',
},
],
},
],
};
this.getNaviView().push(ansPanel);
},
3. 액션 이벤트 연결: (/app/controller/MenuController.js)
config: {
refs: {
naviView:'naviview',
},
control: {
'button[action=menuview.jjajang]': {
tap:'onClickedJjajang',
},
'button[action=menuview.jjambong]': {
tap:'onClickedJjambong',
},
'button[action=naviBack]': {
tap:'onClickedBack',
}
},
},
…......................
onClickedBack:function()
{
this.getNaviView().pop();
}
'프로그래밍 > Mobile Web App 개발' 카테고리의 다른 글
| [모바일 웹앱 전문 개발자 과정] 6일차 4/8 #3 (ListView) (0) | 2012.04.08 |
|---|---|
| [모바일 웹앱 전문 개발자 과정] 6일차 4/8 #2 (formView) (0) | 2012.04.08 |
| [모바일 웹앱 전문 개발자 과정] 6일차 4/7 #2 (0) | 2012.04.08 |
| [모바일 웹앱 전문 개발자 과정] 6일차 4/7 #1 (0) | 2012.04.07 |
| [모바일 웹앱 전문 개발자 과정] 5일차 4/6 (0) | 2012.04.06 |
