資源描述：
《extjs常用組件樣式修改》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在行業(yè)資料-天天文庫。
1、ExtJs2.3常用組件樣式修改工具欄樣式修改在ExtJS中，工具欄對應的類為：Ext.Toolbar。Ext.Toolbar類樣式在ext2resourcescsstoolbar.css文件中定義。在Ext.Toolbar類中提供了供開發(fā)人員修改工具欄樣式的熟悉：1、cls:String功能：使用該屬性可以為Ext.Toolbar指定自定義的CSS樣式。示例代碼：.button1{background-image:url(images/homePage.gif)!important;}.button
2、2{background-image:url(images/open.gif)!important;}.button3{background-image:url(images/buy.gif)!important;}.myToolbar{border-color:#6080ff;border-style:solid;border-width:003px0;display:marker;padding:5px;background:#d0def0url(../extjs2/resources/images/vista/toolbar/gray-bg.g
3、if)repeat-xtopleft;position:relative;zoom:1;}Ext.onReady(function(){vartoolBar=newExt.Toolbar({//創(chuàng)建工具欄applyTo:'ToolBar',width:300,cls:'myToolbar'});toolBar.addButton([//向工具欄中添加按鈕{text:'主頁',//按鈕上顯示的文字handler:onButtonClick,//單擊按鈕的處理函數(shù)iconCls:
4、'button1'//在按鈕上顯示的圖標},{text:'打開',handler:onButtonClick,iconCls:'button2'},{text:'購買',handler:onButtonClick,iconCls:'button3'}]);//單擊按鈕時調(diào)用的處理函數(shù)functiononButtonClick(btn){alert(btn.text);//取得按鈕上的文字}});
運行效果如下圖所示：菜單樣式修改Ext.menu.Item樣式修改：1、activeClass
5、:String功能：當鼠標經(jīng)過時，發(fā)生樣式改變。2、iconCls:String功能：設置菜單項的背景圖片。Ext.menu.Menu類的樣式文件在：ext2resourcescssmenu.css示例代碼：（1）CSS文件代碼：.myMenuActive{font-size:16px;font-weight:bold;color:blue;}.myFileCfgItem{background-image:url(images/folder.gif)!important;}.myCopyItem{background-image:url(ima
6、ges/Copy.png)!important;}.myCutItem{background-image:url(images/Cut.png)!important;}.myPasteItem{background-image:url(images/Paste.png)!important;}.myEditCfgItem{background-image:url(images/EditConfig.png)!important;}.myNewItem{background-image:url(images/add.gif)!important;}.m
7、yOpenItem{background-image:url(images/open.gif)!important;}.myCloseItem{background-image:url(images/closed.gif)!important;}（2）JS文件代碼：Ext.onReady(function(){Ext.BLANK_IMAGE_URL='../extjs2/resources/images/vista/s.gif';vartoolBar=newExt.Toolbar({appl
8、yTo:'toolbar',width:300});varfileMenu=newExt.menu.Menu
