`
sailei1
  • 浏览: 127641 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Sencha Touch 自定义图标

 
阅读更多
首先把你 图标图片放入 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
0
2
分享到:
评论

相关推荐

    sencha touch 自定义图标

    实现sencha touch 三种图标的使用 1、使用内置图标 2、使用自定义的字体图标 3、使用自定义的图片 经过验证,绝对可用

    sencha touch 实例

    一个典型的Sencha Touch应用文档结构包含一个HTML文件,其中`<head>`部分引入ST库文件和自定义的JavaScript文件(如`app.js`)。`<body>`部分通常是空的,因为大部分应用逻辑都在JS文件中实现。 5. **应用启动方式...

    使用SenchaTouch开发跨平台移动Web应用.doc

    3. 图标和工具栏:Sencha Touch 的图标样式和工具栏布置方式灵活多样,可以满足大部分应用的需要,开发人员还可以通过自定义图标样式来扩展出更多更丰富的图标。 Sencha Touch 的应用开发环境 1. 开发环境搭建:...

    sencha touch demo

    Sencha Touch 是一款专为移动设备打造的前端框架,它提供了丰富的组件和API,用于构建高性能的触控式Web应用程序。这款框架旨在充分利用HTML5、CSS3和JavaScript的能力,为移动用户带来原生应用般的体验。"Sencha ...

    Sencha Touch 2 官方文档(英文)

    此HTML页面非常简单,主要作用是加载Sencha Touch的CSS样式表和JavaScript文件,以及您自定义的应用程序脚本文件。 #### 6. app.js文件 在app.js文件中,您将定义应用程序的基本信息和启动行为。例如: ```...

    Sencha Touch权威指南

    从内容上来讲,本书作为Sencha Touch领域的“权威指南”应该毫无争议,它不仅全面而系统地对Sencha Touch进行了讲解,而且还非常具有深度和实战性,是当前学习Sencha Touch的首选参考书。本书主要内容:Sencha Touch...

    Sencha Touch 2 Menu

    **Sencha Touch 2 Menu 知识点详解** Sencha Touch 2 是一款专为移动设备设计的前端框架,用于构建高性能的触控应用。它提供了丰富的组件库、数据管理和强大的布局系统,使得开发者能够轻松地创建跨平台的HTML5应用...

    Sencha Touch 本地记事本 代码3

    例如,可能包含自定义的按钮图标、应用主题样式以及触摸友好的界面元素。 `app`文件夹可能包含了应用的其他模块,如组件、模型、视图、控制器、存储和样式。这些文件根据Sencha Touch的MVC(Model-View-Controller...

    sencha touch 例子 Tabs 和 Toolbars 使用

    Sencha Touch 是一款专为移动设备设计的JavaScript框架,用于构建高性能的触控Web应用程序。这个框架提供了丰富的组件和API,使得开发者可以轻松地创建出与原生应用体验相媲美的移动应用。在这个"sencha touch 例子 ...

    sencha touch和ExtJS使用的日历插件

    Sencha Touch和ExtJS是两种流行的JavaScript框架,主要用于构建富客户端的移动和桌面应用程序。它们提供了丰富的组件库、数据管理工具以及强大的布局机制,使得开发者能够构建交互性强、功能丰富的Web应用。在这个...

    Sencha_touch_开发指南.doc

    - **解释**:这段代码定义了页面的基本结构,包括引入 Sencha Touch 的 CSS 和 JS 文件以及自定义的 CSS 和 JS 文件。 #### 四、创建应用程序 - **使用 `Ext.setup` 方法**:初始化应用配置。 - **代码示例**: `...

    sencha-touch2.0-notesapp-demo

    6. **Stylesheets (CSS)**:为应用提供样式,可能包含sencha-touch默认样式以及应用自定义样式。 7. **Resources**:可能包含图标、图片等静态资源。 8. **Index.html**:应用的主页面,通常会加载Sencha Touch库和...

    Slidemenu:Sencha Touch Slidemenu

    2. **可定制化**:开发者可以根据需要自定义菜单项的布局、样式和行为,例如设置菜单项的图标、文字、颜色等。 3. **动画效果**:Slidemenu在显示和隐藏时通常会伴随有平滑的过渡动画,提升用户的交互体验。 4. **...

    weatherApp:使用 Sencha 开发的天气应用程序。 来自网络杂志的改进示例

    此外,Sencha 还支持自定义模板,使界面设计更加灵活。 5. **触摸事件**:在移动设备上,用户交互主要通过触摸操作。Sencha Touch 支持各种触摸事件,如 tap、swipe 等,使得应用可以响应用户的触摸行为。 6. **...

    使用HTML5和CSS3构建基于webkit的Web-PageApp.doc

    4. **Web App图标**: 使用`<link rel="apple-touch-icon">`设置应用图标。 5. **元标签优化**: `meta name="apple-mobile-web-app-capable" content="yes"`可使Web App全屏运行,`meta name="viewport"`控制视口大小...

    RBAC权限控制模型简介.docx

    - `<link rel="apple-touch-icon" href="iphon_tetris_icon.png" />`用于在添加到主屏幕时显示自定义图标。 - `<meta name="apple-mobile-web-app-capable" content="yes" />`使应用支持离线使用。 - `...

Global site tag (gtag.js) - Google Analytics