ExtJS 2.0.2小技巧总结

前言

在使用ExtJS 2.0.2编写项目时，在技术上使用的一些小技巧和注意点的总结。

 

1、  this.getOwnerTree ||this.getOwnerTree().animate 为空或不是对象 错误提示

场景描述：在树节点拖拽完成后，刷新formerParentNode 和 newParentNode从后台读取数据，有可能出现“this.getOwnerTree为空或不是对象 错误提示” 或者“this.getOwnerTree().animate 为空或不是对象 错误提示”。

 

原因：

this.getOwnerTree() 返回的tree是 root到formerParentNode (包括formerParentNode这个节点)这段树,如果formerParentNode正在重载，此时 tree为 root到formerParentNode.parentNode这段树.如果newParentNode为formerParentNode的子节点，肯定会出现this.getOwnerTree() 返回的tree:root到newParentNode不存在，因为root到formerParentNode的tree已经不存在了。

 

2、  panel居中、元素居中

panel 居中：

 

var panel =new Ext.panel({ width:xx px, }); var windowWidth = window.screen.availWidth; var left=windowWidth/2 - panel的宽度/2; var style='margin-top:150px;margin-left:'+left+'px;'; var el=Ext.get('div-id').applyStyles(style); panel .render(el);   

或者：panel.el.center()

或者：http://blog.csdn.net/java_cxrs/archive/2010/06/21/5684088.aspx

 

元素居中：在初始化中配置：

bodyStyle:"text-align:center", var panel =new Ext.panel({ width:xx px, bodyStyle:"text-align:center",//元素居中 });   

3、  Ext背景遮罩

FormPanel的disabled：true时，置灰不好看，字会模糊掉，

所以仿弹出窗口Ext.Window的modal : true给FormPanel弄个遮罩

代码如下：formPanel.getEl().mask() 即可，属于Ext.Element的方法

4、输入框只读属性

Ext框架的输入控件一般都是继承Ext.form.Field,在输入控件的初始化属性的config配置中都会有readOnly选项，表示当前输入框是否只读。如果在程序中需要动态设置输入控件的只读属性，只是通过 form.findField(textfield).readOnly = true/false是无用的，在Ext API中对readOnly介绍是：

 

 

True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute. 意思是这个属性是DOM的，而不是EXT.Element的。

   因此动态设定readOnly属性需要对DOM进行操作，代码如下：

form.findField(textfield).el.dom.readOnly = true/false