タブレット用のビューを作成します。私の画像を参照してください:
http://i.stack.imgur.com/rwFuu.png
左の listitem はカテゴリで、右の listitem はデータです。
左のアイテムをタップすると、右が新しいパネルにプッシュされます。左のアイテムをもう一度タップすると、右が新しいパネルのオーバーラップにプッシュされます。戻るボタンをタップすると、パネルがルート化されません。
コードをどのように配置しますか?
この私のコード: 表示:
Ext.define('Project-catalog.view.tablet.Home', {
extend: 'Ext.navigation.View',
xtype: 'tablet-homepanel',
requires: [
'Project-catalog.store.appsAll'
],
config: {
defaultBackButtonText: 'ย้อนกลับ',
// useTitleAsBackText: false,
activeItem: 1,
id: 'mynavigationview',
title: 'All',
iconCls: 'list',
cls: 'home',
styleHtmlContent: true,
tabBarPosition: 'bottom',
items:[
{
title: "All Apps",
xtype: 'list',
id:'Applist',
store: 'appsAllID',
itemTpl: new Ext.XTemplate(
'<img src="http://61.47.41.108:9999/system/appinfos/appicons/000/000/{id}/original/{appicon_file_name}" width="50" heigh="50" style="float:left;clear:both;"></img>',
'<div style="margin-left: 60px;word-wrap: break-word;width:80%;">',
'<span style="font-size:16px;">{name}</span><br>',
'<span style="font-size:13px;color:#7C7C7C;" id="catname">{categoryname}</span>',
'</div>'
),
masked: {
xtype: 'loadmask',
message: 'Please wait'
}
},
{
width: 300,
dock: 'left',
title: 'Categories',
xtype: 'tablet-navigation'
}
]
}
});
コントローラ:
showCatQuery: function(list,index,element,record){
var catid = record.get('id');
var catname = record.get('name');
this.getHomepanel().add({
xtype: 'panel',
title: catname,
scrollable: true,
styleHtmlContent: true,
layout: {
type: 'fit'
},
items: [
{
catid: catid,
xtype: 'tablet-showSearchCategory'
}
]
});
}
すみません!私は英語が苦手です。