ExtJs常用组件样式修改.docxVIP

ExtJs 2.3常用组件样式修改 工具栏样式修改 在ExtJS中，工具栏对应的类为：Ext.Toolbar。 Ext.Toolbar类样式在ext2\resources\css\toolbar.css文件中定义。 在Ext.Toolbar类中提供了供开发人员修改工具栏样式的熟悉： cls : String 功能：使用该属性可以为Ext.Toolbar指定自定义的CSS样式。 示例代码： style type=text/css .button1 { background-image: url(images/homePage.gif) !important; } .button2 { background-image: url(images/open.gif) !important; } .button3 { background-image: url(images/buy.gif) !important; } .myToolbar{ border-color:#6080ff; border-style:solid; border-width:0 0 3px 0; display: marker; padding:5px; background:#d0def0 url(../extjs2/resources/images/ vista/toolbar/gray-bg.gif) repeat-x top left; position:relative; zoom:1; } /style script type=text/javascript Ext.onReady(function(){ var toolBar = new Ext.Toolbar({ //创建工具栏 applyTo:ToolBar, width:300, cls:myToolbar }); toolBar.addButton([ //向工具栏中添加按钮 { text:主页, //按钮上显示的文字 handler:onButtonClick, //单击按钮的处理函数 iconCls:button1 //在按钮上显示的图标 }, {text:打开, handler:onButtonClick,iconCls:button2}, {text:购买, handler:onButtonClick,iconCls:button3} ]); //单击按钮时调用的处理函数 function onButtonClick(btn){ alert(btn.text); //取得按钮上的文字 } }); /script div id=ToolBar/div 运行效果如下图所示： 菜单样式修改 Ext.menu.Item样式修改： 1、activeClass : String 功能：当鼠标经过时，发生样式改变。 2、iconCls : String 功能：设置菜单项的背景图片。 Ext.menu.Menu类的样式文件在：ext2\resources\css\menu.css 示例代码： （1）CSS文件代码： .myMenuActive{ font-size: 16px; font-weight: bold; color: blue; } .myFileCfgItem { background-image: url(images/folder.gif) !important;} .myCopyItem { background-image: url(images/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;} .myOpenItem { background-image: url(images/open.gif) !important;