第一点:更换ExtTree的节点图标 步骤:找到ext-all.css查找一下代码 Java代码 <SPAN style="FONT-SIZE: medium"> //打开后 }.x-tree-node-expanded .x-tree-node-icon{ background-image:url(../images/default/tree/folder-open.gif); } //没有子图标 .x-tree-node-leaf .x-tree-node-icon{ background-image:url(../images/default/tree/leaf.gif); } //打开前 .x-tree-node-collapsed .x-tree-node-icon{ background-image:url(../images/default/tree/folder.gif); } </SPAN> //打开后 }.x-tree-node-expanded .x-tree-node-icon{ background-image:url(../images/default/tree/folder-open.gif); } //没有子图标 .x-tree-node-leaf .x-tree-node-icon{ background-image:url(../images/default/tree/leaf.gif); } //打开前 .x-tree-node-collapsed .x-tree-node-icon{ background-image:url(../images/default/tree/folder.gif); } 将里面URL的图片换成自己需要的图片即可 第二点:ExtTree图片不显示怎么办 通常写的ExtTree的JS中会默认上网下载一张s.gif透明的图片,如果网不好的情况下可能就下不了不显示了 步骤:在tree所涉及到的js或jsp网页中插入: Java代码 <SPAN style="FONT-SIZE: medium">Ext.BLANK_IMAGE_URL='ext/resources/images/default/tree/s.gif'; 或是(jsp中) <script type="text/javascript"> Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/tree/s.gif'; </script> </SPAN> Ext.BLANK_IMAGE_URL='ext/resources/images/default/tree/s.gif'; 或是(jsp中) <script type="text/javascript"> Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/tree/s.gif'; </script> 第三点:引入自己定义JS文件不显示怎么办 jsp网页中引入js是有顺序的, 先引入ext的js, Java代码 <SPAN style="FONT-SIZE: medium">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/> <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext/ext-all.js"></script> </SPAN> <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/> <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext/ext-all.js"></script> 再引入自己的js才可以。不然会提示错误的。 第四点:如果想在ExtPanel或者ExtWindow中嵌入网页,那么该怎么办呢 第一种方式:autoLoad: {url: '/public/html/company.html', scripts: true}, 第二种方式:html:'<iframe id=thisIframe width=770 height=480 frameborder=0 scrolling=auto src=index.jsp></iframe>' 推荐使用第二种方式,第一种有时候作用不大 第五点:禁用右键菜单项 Java代码 <SPAN style="FONT-SIZE: medium">var styleMenu = new Ext.menu.Menu({ items: [{ text: '主题选择', id: 'style', menu: new Ext.menu.Menu({ items: [{ text: '红色主题', checked: true, group: 'theme' }, { text: '蓝色主题', checked: false, group: 'theme' }, { text: '黑色主题', checked: false, group: 'theme' }] }) }, { text: '启用主题', checked: true, checkHandler: function() { Ext.getCmp('style').setDisabled(!this.checked) } }] }); </SPAN>