最近在用EXTJS做一个项目,拿起放下已久的EXT忽然感觉人生再次充满了意义。回到程序的世界,人生如此美妙……
言归正传,项目是这样设计的。导航是由后台TREE加载得到的。每选中一个菜单项便在TABPANEL中显示内容。做法是拿到结点URL信息然后用AUTOLOAD加载一个HTML页面。但是这样一页就存在一个问题:使用AUTOLOAD加载时不同于IFRAME,AUTOLOAD会把所有东西放在当前页面上。这样一来所有TABPANEL内页面元素需要渲染出到DIV上时就会存在大量的ID。我们知道越多的ID对我们来说越危险,特别是团队开发时若不能对ID有效管理那将是灾难性的。我的办法是:让所有渲染用的DIV共同使用同一个ID,没错这样渲染会出错。但我们可以在拿到这个DIV时把ID值改掉。我们可以用Ext.id()生成一个ID值赋上去。那么下一次再渲染的时候就不会出错了。
代码:

<div id="tmpid"></div>
<script>
/*
*  这个函数可以放到库文件中去
*/

 function getDiv(id) {
      var t = document.getElementById(id)
      return t.id=Ext.id();
 }
 
/*
* 函数结束
*/
  var fp = new Ext.form.FormPanel({
    title:'test',
    html:'just a test'
  })
  fp.render(getDiv("tmpid"))
</script>