Chrome29版本之后sencha touch 2.2.1应用的textfield不见了的解决办法

一、问题描述

chrome浏览器升级到29版本之后，发现之前的sencha touch 2.2.1应用的界面出了问题：
textfield这些都不见了


四处查找，在官网论坛找到一个文章“Chrome 29 Layout Fix”



要求找到sencha touchu sdk目录下的文件
resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss
把mixin st-box的顺序替换成以下css

@mixin st-box($important: no) {
    @if $important == important {
        display: flex !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
    } @else {
        display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
    }
}

然后重新编译css文件，发布即可

这个文件“ _Class.scss” 里的内容倒是找到并修改过来了
但是不知道怎么编译scss文件
于是四处查找文章，终于找到一篇文章，讲得很详细了
“How to use SASS with Sencha Touch without Sencha Cmd”

整理一下步骤

二、编译步骤

1、installing Ruby
   这一步骤，其实之前在使用sencha cmd打包，新建工程的时候已经安装过了


2、安装sass和compass，gem是安装完Ruby之后的一个命令
  在命令行窗口运行以下2个命令安装
   gem install sass  
   gem install compass   
 
  我在安装sass的时候，貌似报错了，于是到网上下载gem文件来本地安装
   目前最新版v3.2.10
   
   gem install sass-3.2.10.gem
   gem install compass-0.12.2.gem


3、新建一个文件夹 “styles”，我的文件夹和sencha touch sdk文件夹平行，如下：
   |--sencha-touch-2.2.1
   |--styles 目录
      |--css 目录
      |--sass 目录
         |--sencha-touch.scss 文件（内容见后面）
      |--stylesheets 目录
         |--fonts 目录（等会儿copy过来的）
      |--config.rb 文件（内容见后面）


4、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, '../', 'sencha-touch-2.2.1', 'resources', 'themes')




# 这里的路径就和config.rb所在的路径有关了，注意修改自己的路径，最终能找到sencha touch sdk路径


# Compass configurations


sass_path = 'sass'


css_path = 'css'


environment  = :production


output_style = :compressed


# Alternatively you can use the following code for environment and output_style:
#environment  = :development
#output_style = :expanded

5、copy the folder “/themes/fonts” to a new folder called “stylesheets” in the folder “styles”.
把sencha touch sdk下面resources\themes\fonts这个目录复制到stylesheets目录下


6、 sencha-touch.scss的内容
   create file “sencha-touch.scss” in the folder "styles/sass".
   This file is a modified version of the same file in folder: /themes/templates/project/

@import 'sencha-touch/default';
@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.
@import 'sencha-touch/default/src/Button';
@import 'sencha-touch/default/src/Panel';
@import 'sencha-touch/default/src/Sheet';
@import 'sencha-touch/default/src/Toolbar';
@import 'sencha-touch/default/src/carousel/Carousel';
@import 'sencha-touch/default/src/dataview/IndexBar';
@import 'sencha-touch/default/src/dataview/List';
@import 'sencha-touch/default/src/field/Field';
@import 'sencha-touch/default/src/field/Radio';
@import 'sencha-touch/default/src/field/Search';
@import 'sencha-touch/default/src/field/Select';
@import 'sencha-touch/default/src/field/Slider';
@import 'sencha-touch/default/src/field/Spinner';
@import 'sencha-touch/default/src/field/TextArea';
@import 'sencha-touch/default/src/form/Panel';
@import 'sencha-touch/default/src/form/FieldSet';
@import 'sencha-touch/default/src/picker/Picker';
@import 'sencha-touch/default/src/slider/Slider';
@import 'sencha-touch/default/src/slider/Toggle';
@import 'sencha-touch/default/src/tab/Panel';

7、编译css文件：
打开命令行窗口，到styles目录下，编译之
cd styles
compass compile
最终会生成一个css文件 styles\css\sencha-touch.css
把该文件复制到自己项目文件夹touch\resources\css下，替换原来的文件
发布到网站上去，再次打开chrome29以上，textfield又回来了