Sencha Touch 自定义图标

最新推荐文章于 2018-06-30 17:40:20 发布

转载最新推荐文章于 2018-06-30 17:40:20 发布 · 2.2k 阅读

收录于

sencha touch 2.0

本文将指导您如何将自定义图标应用于Sencha Touch应用，并通过配置文件和CSS来实现背景色、选中色等样式效果。同时，演示如何在应用中导入并使用Sencha Touch框架组件。

原文：http://sailei1.iteye.com/blog/1630724

首先把你图标图片放入 E:\space\Theming\sdk\resources\themes\images\default\pictos 目录下

我放了个 sai.png
app.scss

    Java代码  
    
   
 $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

    Java代码  
    
   
 # 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  

    Js代码  
    
   
 {  
                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'  
                    }  
                ]  
            }  