Sealyu

          --- 博客已遷移至: http://www.sealyu.com/blog

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            618 隨筆 :: 87 文章 :: 225 評論 :: 0 Trackbacks
          <2009年11月>
          25262728293031
          1234567
          891011121314
          15161718192021
          22232425262728
          293012345

          常用鏈接

          留言簿(14)

          隨筆分類

          隨筆檔案

          友情鏈接

          搜索

          積分與排名

          最新評論

          閱讀排行榜

          評論排行榜

          使用過Ext(http://www.extjs.com) 的同志都應該知道,每一個組件(Component)在初始化的時候,都會有一個配置參數(Config){在Ext2中,基本上所有的組件的構造函數只 接受一個參數,這個參數或者是一個Config Object或都是一個Array of Config Object},其中,許多組件,如Menu,Button都有一個配置選項iconCls,很明顯,這個是用來配置按鈕等的圖標的,所以假設我們要初始 化一個Button,我們在JS里這樣寫:
          var button = new Ext.Button({
                  text: "Hello",
                  iconCls: "hello-button"
          });

          然后我們再在CSS中寫下如下規則:
          .hello-button {
                  background: url(images/hello.png) left top no-repeat;
          }

          把JS和CSS文件都正確的引入到頁面當中后,我們只能看到按鈕上空出來了一個放置圖片的位置,而圖片并沒有顯示出來,通過使用Firebug(http://www.getfirebug.com) 來查看頁面,通過Inspect我們生成的按鈕的Style,我們發現CSS規則hello-button被Ext原有的CSS規則覆蓋掉了。但是官方給 的Sample里是可以用的啊,查看Sample里的CSS,我發現它比我寫的多了一行字,!important,然后,我把我原有的CSS規則修正為:
          .hello-button {
                  background: url(images/hello.png) left top no-repeat !important;
          }

          Bingo~這次圖片正確的顯示在了按鈕上。

          當然,按照官方的API,你還有另外一種在按鈕上添加圖標的方法,將button的Config如下設置:
          var button = new Ext.Button({
                  text: "Hello",
                  icon: "images/public.gif",
                  cls: "x-btn-text-icon"

          });

          這樣做的壞處在于,你必須將圖片的位置寫入到JS里,沒有將表現的部分從JS里脫離,如果使用第一種方法的話,可以更容易的更改某個按鈕的圖標。

          posted on 2009-11-18 22:02 seal 閱讀(679) 評論(0)  編輯  收藏 所屬分類: EXTJS
          主站蜘蛛池模板: 乐都县| 渝北区| 疏附县| 灵石县| 临夏市| 鄱阳县| 会理县| 宜兰县| 葫芦岛市| 华蓥市| 荣昌县| 股票| 台东市| 定日县| 太白县| 湘潭县| 三穗县| 内乡县| 成安县| 巍山| 浮梁县| 阿荣旗| 犍为县| 日照市| 涿州市| 蓝山县| 迁安市| 华容县| 永昌县| 靖江市| 崇左市| 馆陶县| 沁水县| 永修县| 滕州市| 梁山县| 江永县| 阳信县| 会昌县| 广德县| 辉南县|