Ext js开发点滴

开发@tips:         

●关于渲染： 在父容器初始化渲染之后，才能调用子组件的render函数，否则会出现'ct has no properties'错误；         Ext.TabPanel如fieldStyleTab，新加入的tab中包含很多字段,当动态加入tab时有时不显示,但在调试状态下切换时,却可看到。解决办法: 对于动态添加的tab，                   

   fieldStyleTab.setActiveTab('tab' + tabIndex);          

   Ext.getCmp('mainForm').render();//mainForm是fieldStyleTab的容器         

   fieldStyleTab.render();     

 

●关于事件响应：参考API的Public Events，参数根据个数从前到后一一匹配。    

●关于布局：  
        ExtJS中的table layout不能动态添加或者删除其中的元素，如button。           
        Button不能在column layout中使用，而textField则可以，应以BoxButton来替换button。
        Ext.form.TextField组件放在布局为layout: 'form'的面板panel或formPanel里，
相对应的TextField属性fieldLabel才能渲染。layout为table或者border均不能正确渲染。
因此，如果放在border layout里，则“You must put a panel with  inside the border layout to contain the fields.” 详细见 Ext JS Forums 。
       两个TreePanel放在一个panel中时，Panel的布局不能为BorderLayout,可以是Column和form。

    

●正则表达式： 只能输入数字： /^[0-9]*$/ ；十六进制的颜色输入框（#六位十六进制数，比如:#3EEF4A），正则验证方法： /^#[0-9a-fA-F]{6}$/         

●关于autoScroll：treePanel、panel等组件在某种布局中时，其本身autoScroll为true并不代表其所在布局的某个区域的autoScroll为true，需分别进行设置。          

●Ext.tree.TreePanel：初始化时，必须初始化‘el’属性，否则无法正确渲染，提示出错“H has no properties”。           TreeNode的appendChild(node) 追加元素并不马上显示，需要调用该树所在treePanel的expand等函数。要使节点排序，使用 new Tree.TreeSorter(leftTree, {folderSort:true});           

Ext.tree.TreePanel的dragdrop事件有时会连续调用两次，解决办法：查找是否已存在相同的组件，如有则直接返回。          leftTree.on('dragdrop', function(panel,node,dd,e){ }