如图
实际上就是一个overlay控件 里面加载了panel 里面又包含了个list
首先定义工具栏和按钮
按钮定义如下:
{
xtype:'button',
iconCls: 'bookmarks',
text:'开始',
itemId:'start'
},
定义功能列表Panel如下
Ext.define('ipad.view.phone.tabpanel.ToolList', {
extend: 'Ext.Panel',
xtype: ['toolListPanel','widget.toolListPanel'],
config:{
layout:'vbox',
left: 0,
top: 0,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260 ,
height: '70%',
// Here we specify the #id of the element we created in `index.html`
contentEl: 'content',
// Style the content
styleHtmlContent: true,
scrollable: false,
// Insert a title docked at the top with a title
items: [
{
xtype:'list',
flex:1,
itemTpl: '<div class="contact">{functionName}</div>',
data: [
{ functionId: '001', functionName: '课程库' },
{ functionId: '002', functionName: '精品课程' },
{ functionId: '003', functionName: '学习界面' },
{ functionId: '004', functionName: '学习计划' },
{ functionId: '005', functionName: '我的笔记' },
{ functionId: '006', functionName: '通讯录' }
//{ functionId: '007', functionName: 'Nguyen' },
//{ functionId: '008', functionName: 'Elias' }
]
}]
}
});
为按钮增加单击监听 单击触发onStart方法
onStart:function(button){
var tool = this.getToolListPanel(); //要自己定义toolListPanel为刚才上文的panel
tool.showBy(button);
},