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;}/stylescript 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; }.myCloseItem { background-image: url(images/closed.gif) !important; }（2）JS文件代码：script type=text/javascript Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = ../extjs2/resources/images/vista/s.gif; var toolBar = new Ext.Toolbar