2013年3月2日 星期六

如何在sencha touch 2.1 的iconCls中,加入自己要的按鈕icon呢?

走踏江湖,接案,一定會有時要加入自己的icon
sencha touch 2.1 要加入icon時,不是只有icon丟進folder,還有設定要做,
示範如下(假設我們要加入的是一個cart.png, iconCls 為「cart」):
1.找到你要的icon(黑白),丟到你的resoures的themes\images\default\pictos目錄
2.修改resources下的\themes\stylesheets\sencha-touch\default\widgets中的_buttons.scss
在「@include pictos-iconmask('home');」之下加入
  「@include pictos-iconmask('cart');」
3.故事還沒結束,下載RubyInstaller,目前找到的是「rubyinstaller-2.0.0-p0-x64.exe」
 安裝後,它會有個「Start Command Prompt with Ruby」,打開他
 執行以下的指令:
 「gem install compass」
4.一樣在Ruby的命令視窗中,切到 resources下的sass目錄
   (因為要使用目錄中的config.rb)
  執行「compass compile」或是「compass watch」--讓它監視有沒有修改異動,有則compile
 因為我們修改了_button.scss, compass compile後會在「./../css」中產生更新的css檔

 恭喜,你的sencha class中就可以用這個iconCls了
(註,1你的png檔要先去背,不然還是一個白茫茫的四方塊,這點是靠safari的「開發人員」-->「顯示錯誤主控台」-->「網路」去看到這個png跟其他png檔比較才知道這回事
註2.Sencha Touch 2.2開始使用icon-font方式定義scss,詳細步驟參考2013/11/3 的筆記
)

沒有留言:

張貼留言