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

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

1. POWindow = Ext.extend(Ext.Window, {
2.     form:null,
3.     constructor: function() {
4.         this.form = new POFormPanel();
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: "Save As Draft",
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.     },
34.     
35.     SaveButtonClick: function(btn, e) {
36.         alert(Ext.encode(this.form.getValues().data));
37.     },
38.     
39.     SubmitButtonClick: function(btn, e) {
40.         alert(Ext.encode(this.form.getValues().data));
41.     },
42.     
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: "Purchase Order", 
55.     closable: true,
56.     autoScroll: true,
57.     buttonAlign: "center",
58.     buttons: [{
59.         text: "Save As Draft",
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.     }],
71.     
72.     constructor: function(_cfg) {
73.         if (_cfg)
74.             Ext.apply(_cfg);
75.         POTabFormPanel.superclass.constructor.call(this);
76.     },
77.     
78.     SaveButtonClick: function() {
79.         alert("SaveButtonClick");
80.         //alert(Ext.encode(this.getValues().data));
81.     },
82.     
83.     SubmitButtonClick: function(btn, e) {
84.         alert(Ext.encode(this.getValues().data));
85.     },
86.     
87.     CancelButtonClick: function(btn, e) {
88.         this.reset();
89.     }
90. });

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

 

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

1. POTabFormPanel = Ext.extend(POFormPanel, {
2.     frame: true,
3.     //title: "Purchase Order", 
4.     closable: true,
5.     autoScroll: true,
6.    
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: "Save As Draft",
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.     },
27.     
28.     SaveButtonClick: function() {
29.         alert("SaveButtonClick");
30.         //Ext.log("SaveButtonClick");
31.         alert(Ext.encode(this.getValues().data));
32.     },
33.     
34.     SubmitButtonClick: function(btn, e) {
35.         alert(Ext.encode(this.getValues().data));
36.         Ext.log(Ext.encode(this.getValues().data))
37.     },
38.     
39.     CancelButtonClick: function(btn, e) {
40.         this.reset();
41.     }
42. });

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