日期:2014-05-16  浏览次数:20567 次

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

?

?