首先把你 图标图片放入 E:\space\Theming\sdk\resources\themes\images\default\pictos 目录下
我放了个 sai.png
app.scss
$base-color: #ffffff; //背景色
$active-color: #ea4199; //选中色
@import 'sencha-touch/default/all';
// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;
// Your custom code goes here...
@include pictos-iconmask('sai'); //自定义图标
config.rb
# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)
# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', 'sdk', 'resources', 'themes')
# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
output_style = :compressed
environment = :production
{
title: 'Get Started',
iconCls: 'sai', //关键
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}
]
}
dos 命令
cd E:\space\Theming\resources\sass
compass compile
持久性的 compass watch
http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch
- 大小: 3.8 KB
分享到:
相关推荐
实现sencha touch 三种图标的使用 1、使用内置图标 2、使用自定义的字体图标 3、使用自定义的图片 经过验证,绝对可用
一个典型的Sencha Touch应用文档结构包含一个HTML文件,其中`<head>`部分引入ST库文件和自定义的JavaScript文件(如`app.js`)。`<body>`部分通常是空的,因为大部分应用逻辑都在JS文件中实现。 5. **应用启动方式...
3. 图标和工具栏:Sencha Touch 的图标样式和工具栏布置方式灵活多样,可以满足大部分应用的需要,开发人员还可以通过自定义图标样式来扩展出更多更丰富的图标。 Sencha Touch 的应用开发环境 1. 开发环境搭建:...
Sencha Touch 是一款专为移动设备打造的前端框架,它提供了丰富的组件和API,用于构建高性能的触控式Web应用程序。这款框架旨在充分利用HTML5、CSS3和JavaScript的能力,为移动用户带来原生应用般的体验。"Sencha ...
此HTML页面非常简单,主要作用是加载Sencha Touch的CSS样式表和JavaScript文件,以及您自定义的应用程序脚本文件。 #### 6. app.js文件 在app.js文件中,您将定义应用程序的基本信息和启动行为。例如: ```...
从内容上来讲,本书作为Sencha Touch领域的“权威指南”应该毫无争议,它不仅全面而系统地对Sencha Touch进行了讲解,而且还非常具有深度和实战性,是当前学习Sencha Touch的首选参考书。本书主要内容:Sencha Touch...
**Sencha Touch 2 Menu 知识点详解** Sencha Touch 2 是一款专为移动设备设计的前端框架,用于构建高性能的触控应用。它提供了丰富的组件库、数据管理和强大的布局系统,使得开发者能够轻松地创建跨平台的HTML5应用...
例如,可能包含自定义的按钮图标、应用主题样式以及触摸友好的界面元素。 `app`文件夹可能包含了应用的其他模块,如组件、模型、视图、控制器、存储和样式。这些文件根据Sencha Touch的MVC(Model-View-Controller...
Sencha Touch 是一款专为移动设备设计的JavaScript框架,用于构建高性能的触控Web应用程序。这个框架提供了丰富的组件和API,使得开发者可以轻松地创建出与原生应用体验相媲美的移动应用。在这个"sencha touch 例子 ...
Sencha Touch和ExtJS是两种流行的JavaScript框架,主要用于构建富客户端的移动和桌面应用程序。它们提供了丰富的组件库、数据管理工具以及强大的布局机制,使得开发者能够构建交互性强、功能丰富的Web应用。在这个...
- **解释**:这段代码定义了页面的基本结构,包括引入 Sencha Touch 的 CSS 和 JS 文件以及自定义的 CSS 和 JS 文件。 #### 四、创建应用程序 - **使用 `Ext.setup` 方法**:初始化应用配置。 - **代码示例**: `...
6. **Stylesheets (CSS)**:为应用提供样式,可能包含sencha-touch默认样式以及应用自定义样式。 7. **Resources**:可能包含图标、图片等静态资源。 8. **Index.html**:应用的主页面,通常会加载Sencha Touch库和...
2. **可定制化**:开发者可以根据需要自定义菜单项的布局、样式和行为,例如设置菜单项的图标、文字、颜色等。 3. **动画效果**:Slidemenu在显示和隐藏时通常会伴随有平滑的过渡动画,提升用户的交互体验。 4. **...
此外,Sencha 还支持自定义模板,使界面设计更加灵活。 5. **触摸事件**:在移动设备上,用户交互主要通过触摸操作。Sencha Touch 支持各种触摸事件,如 tap、swipe 等,使得应用可以响应用户的触摸行为。 6. **...
4. **Web App图标**: 使用`<link rel="apple-touch-icon">`设置应用图标。 5. **元标签优化**: `meta name="apple-mobile-web-app-capable" content="yes"`可使Web App全屏运行,`meta name="viewport"`控制视口大小...
- `<link rel="apple-touch-icon" href="iphon_tetris_icon.png" />`用于在添加到主屏幕时显示自定义图标。 - `<meta name="apple-mobile-web-app-capable" content="yes" />`使应用支持离线使用。 - `...