FomPanel加到TabPanel中按钮点击失效问题之解决方法

阅读更多

昨天晚上在家里写代码时遇到一个奇怪的问题。事先写好了一个FormPanle，将其添加到Window中，并在Window中添加按钮，调试，一切正常，按钮点击可以工作。随，又写了一个Panel，继承于这个FormPanel，并将其加入到TabPanel中，同样的为其添加按钮，调试，显示一切正常，可是按钮却不能工作了！点击事件失效了！！代码如下：

1. POWindow=Ext.extend(Ext.Window,{
2. form:null,
3. constructor:function(){
4. this.form=newPOFormPanel();
5. POWindow.superclass.constructor.call(this,{
6. width:600,
7. autoHeight:true,
8. modal:true,//模式窗体
9. onEsc:Ext.emptyFn,
10. plain:true,
11. resizable:false,
12. //minimizable:true,
13. //closable:false,
14. closeAction:"hide",
15. constrain:false,
16. layout:"form",
17. items:[this.form],
18. buttonAlign:"center",
19. buttons:[{
20. text:"SaveAsDraft",
21. handler:this.SaveButtonClick,
22. scope:this
23. },{
24. text:"Submit",
25. handler:this.SubmitButtonClick,
26. scope:this
27. },{
28. text:"Cancel",
29. handler:this.CancelButtonClick,
30. scope:this
31. }]
32. });
33. },
35. SaveButtonClick:function(btn,e){
36. alert(Ext.encode(this.form.getValues().data));
37. },
39. SubmitButtonClick:function(btn,e){
40. alert(Ext.encode(this.form.getValues().data));
41. },
43. CancelButtonClick:function(btn,e){
44. this.hide();
45. this.form.reset();
46. }
47. });
49. //==============================================================================
51. /**/
52. POTabFormPanel=Ext.extend(POFormPanel,{
53. //frame:true,
54. title:"PurchaseOrder",
55. closable:true,
56. autoScroll:true,
57. buttonAlign:"center",
58. buttons:[{
59. text:"SaveAsDraft",
60. handler:this.SaveButtonClick,
61. scope:this
62. },{
63. text:"Submit",
64. handler:this.SubmitButtonClick,
65. scope:this
66. },{
67. text:"Cancel",
68. handler:this.CancelButtonClick,
69. scope:this
70. }],
72. constructor:function(_cfg){
73. if(_cfg)
74. Ext.apply(_cfg);
75. POTabFormPanel.superclass.constructor.call(this);
76. },
78. SaveButtonClick:function(){
79. alert("SaveButtonClick");
80. //alert(Ext.encode(this.getValues().data));
81. },
83. SubmitButtonClick:function(btn,e){
84. alert(Ext.encode(this.getValues().data));
85. },
87. CancelButtonClick:function(btn,e){
88. this.reset();
89. }
90. });

一直不知道是哪里出了问题，上网Google了一下也没有找到答案，只有自己摸索解决了。

 

凝视了代码好久，脑子里突然想到之前听陈治文老师视频中讲到的“设计时代码”和“运行时代码”，那问题会不会是出现在这里呢？我试着将Buttons的代码移到其构造函数里，再次调试，按钮单击正常工作了！！！

1. POTabFormPanel=Ext.extend(POFormPanel,{
2. frame:true,
3. //title:"PurchaseOrder",
4. closable:true,
5. autoScroll:true,
7. constructor:function(_cfg){
8. if(_cfg)
9. Ext.apply(this,_cfg);
10. POTabFormPanel.superclass.constructor.call(this,{
11. buttonAlign:"center",
12. buttons:[{
13. text:"SaveAsDraft",
14. handler:this.SaveButtonClick,
15. scope:this
16. },{
17. text:"Submit",
18. handler:this.SubmitButtonClick,
19. scope:this
20. },{
21. text:"Cancel",
22. handler:this.CancelButtonClick,
23. scope:this
24. }]
25. });
26. },
28. SaveButtonClick:function(){
29. alert("SaveButtonClick");
30. //Ext.log("SaveButtonClick");
31. alert(Ext.encode(this.getValues().data));
32. },
34. SubmitButtonClick:function(btn,e){
35. alert(Ext.encode(this.getValues().data));
36. Ext.log(Ext.encode(this.getValues().data))
37. },
39. CancelButtonClick:function(btn,e){
40. this.reset();
41. }
42. });

问题得到了解决，记录在我的Blog中，方便其他遇到类似问题的朋友参阅！！

 

 

版权声明：本文为博主原创文章，未经博主允许不得转载。