ExtJS布局之border实例.docx

1、ExtJS布局之border实例ExtJS布局之border实例border布局是常见的布局样式，下面是一个实际项目的示例，比较简单，仅供初学者参考。前两天遇到一个border布局的界面问题，如下：west是一个tree a，center是一个tree b和一个Panel，如下图界面要求：点击左边树节点【培训项目】，打开右边的界面：包括一个树和一个panel。功能要求：点击右边树的节点，班型列表会根据树节点的ID进行查询，并显示相应的查询结果。问题：整个界面的右半部分怎样布局？解决：左边的tree就不用解释了，是哪里都能找到的样式。这里主要解释下右半部分的布局：通常情况下，点击树节点，在布局的

2、某个部分（常见的是center位置）打开一个界面的常用方式是：Js代码 1. contentEl:center1, 2. html:contentEl : center1,html : 但这种方式不能在目前场景下使用，因为panel要能获得从tree b传递过来的参数，所以上面这种方式是不行的：classTypeNew.jsp无法获得tree b的节点ID。建议采用如下方式：1.整体采用border布局。tree a位于west，tree b和Panel位于center。2.tree b和Panel采用border布局。tree b位于west，Panel位于center。示例代码：Js代码

3、1. /* 2. *班型管理部分 3. */4. var_JwSales=newExt.Panel( 5. region:center, 6. collapsible:true, 7. items:_gridStudyClassType,_panelStudyClassTypeInf,_panelStudyClassTypeNodes, 8. 9. listeners: 10. show:function() 11. 12. _panelStudyClassTypeInf.getForm().reset(); 13. 14. _sessionStore.load(); 15. 16. var_

4、record=_sessionStore.getAt(0); 17. 18. Ext.getCmp(iStudyClassTypeOprUserName).setValue(_record.get(userName); 19. Ext.getCmp(iStudyClassTypeOprUserId).setValue(_record.get(userId); 20. 21. , 22. 23. buttons: 24. 25. text:保存, 26. 27. listeners: 28. click:function() 29. 30. varstId=Ext.getCmp(iStudyCl

5、assTypeStId).getValue(); 31. 32. if(_panelStudyClassTypeInf.getForm().isValid() 33. 34. vararrayInfKey=getArrayStudyClassTypeKey(); 35. 36. vararrayInfValue=getArrayStudyClassTypeValue(); 37. 38. vararrayNodesKey=getStudyTypeNodesKey(); 39. 40. vararrayNodesValue=getStudyTypeNodesValue(); 41. 42. if

6、(stId=) 43. 44. /添加 45. 46. MSClassType.isDo4Add(Ext.getCmp(iItemCombo).getValue(), 47. stName, 48. Ext.getCmp(iStudyClassTypeStName).getValue(), 49. functionaddRtn(rtn) 50. 51. if(rtn=true) 52. 53. MSClassType.createEntity( 54. arrayInfKey,arrayInfValue, 55. arrayNodesKey,arrayNodesValue, 56. 57. f

7、unctioncreateEntityRtn(rtnCreate) 58. 59. if(rtnCreate=success) 60. 61. Ext.MessageBox.alert(信息提示,添加成功，点击返回！); 62. 63. _storeStudyClassType.load(params:start:0,limit:6); 64. 65. Ext.MessageBox.alert(信息提示,添加成功，点击返回！); 66. 67. addHandler(); 68. 69. else70. 71. Ext.MessageBox.alert(信息提示,添加失败，请与系统管理员联系！); 72. 73.