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){ }