Sencha Touch - BlackBerry 支持
Sencha Touch 2.x 提供特定于 BlackBerry 10 的主题和功能。
Sencha Touch 不仅支持 Blackberry,还提供 BlackBerry 10 图标,确保设备具有 BlackBerry 的外观和感觉。
将 BlackBerry 主题添加到 app.json
以下示例显示如何将 BlackBerry 主题添加到 app.json。
"css": [ { "path": "touch/resources/css/bb10.css", "platform": ["chrome", "safari", "ios", "android", "blackberry", "firefox", "ie10"], "theme": "Blackberry", "update": "delta" } ]
添加 BlackBerry 图标
Sencha Touch 为 BlackBerry 主题提供了 50 多个图标,因此应用程序的外观和感觉都更好。下载并解压 Sencha Touch 软件安装后,您可以在 Sencha Touch /resources/themes/images/bb10/icons 目录中找到这些图标。
在应用程序中使用这些图标之前,请先将它们编译到您的 app.scss 文件中。SCSS 文件位于 Sencha Touch 安装目录中的 resources/sass 目录中。将要使用的图像添加到 app.scss 文件中,然后使用 Compass 编译该文件并生成 app.css 文件。 Compass 与 Sencha CMD 捆绑在一起。
现在要使用图标,您可以直接使用带有 iconCls 属性的图标。
iconCls: 'overflow_tab'
Sencha Touch 有一个新的操作栏,特定于 BlackBerry 的菜单。
将 BlackBerry 操作菜单添加到操作栏
<!DOCTYPE html> <html> <head> <link href="https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script> <script type="text/javascript"> Ext.application({ name: 'Sencha', launch: function() { // Tab menu button var tabMenuButton = Ext.create('Ext.ux.TabMenuButton', { text: 'All', docked: 'left', iconCls: 'view_grid', menuItems: [ { text: 'All', iconCls: 'view_grid' }, { text: 'Favorites', iconCls: 'done' }, { text: 'Messenger', iconCls: 'bbm' } ] }); // Add it to the action bar Ext.Viewport.add({ layout: 'card', items: [ { xtype: 'toolbar', docked: 'bottom', items: [tabMenuButton] } ] }); } }); </script> </head> <body> </body> </html>
它将产生以下结果 −
sencha_touch_core_concepts.html