ExtJS使用技巧小结

 

第一点：更换ExtTree的节点图标

     步骤：找到ext-all.css查找一下代码

   

 //打开后
   }.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网页中插入：

               

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，

  <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>'

   推荐使用第二种方式，第一种有时候作用不大

 第五点：禁用右键菜单项

    

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) }
          }]
     });