ExtJS使用技巧_Tree

第一点：更换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>