Sealyu

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

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            618 隨筆 :: 87 文章 :: 225 評論 :: 0 Trackbacks

          使用過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 閱讀(673) 評論(0)  編輯  收藏 所屬分類: EXTJS
          主站蜘蛛池模板: 应用必备| 枣阳市| 五家渠市| 霍山县| 渑池县| 泉州市| 台东市| 七台河市| 玉山县| 宽甸| 多伦县| 阳新县| 泌阳县| 曲水县| 青神县| 安顺市| 凯里市| 潢川县| 桃源县| 抚州市| 东乡| 峨眉山市| 漳浦县| 铜山县| 阿克苏市| 邵阳县| 张家口市| 射洪县| 固阳县| 四会市| 皮山县| 景德镇市| 武胜县| 垣曲县| 定陶县| 东方市| 龙胜| 南汇区| 肇源县| 永泰县| 义乌市|