Sencha Touch 2 toolbar 按钮模仿开始菜单

如图

实际上就是一个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);
    },