昨天晚上在家里写代码时遇到一个奇怪的问题。事先写好了一个FormPanle,将其添加到Window中,并在Window中添加按钮,调试,一切正常,按钮点击可以工作。随,又写了一个Panel,继承于这个FormPanel,并将其加入到TabPanel中,同样的为其添加按钮,调试,显示一切正常,可是按钮却不能工作了!点击事件失效了!!代码如下:
- POWindow=Ext.extend(Ext.Window,{
- form:null,
- constructor:function(){
- this.form=newPOFormPanel();
- POWindow.superclass.constructor.call(this,{
- width:600,
- autoHeight:true,
- modal:true,//模式窗体
- onEsc:Ext.emptyFn,
- plain:true,
- resizable:false,
- //minimizable:true,
- //closable:false,
- closeAction:"hide",
- constrain:false,
- layout:"form",
- items:[this.form],
- buttonAlign:"center",
- buttons:[{
- text:"SaveAsDraft",
- handler:this.SaveButtonClick,
- scope:this
- },{
- text:"Submit",
- handler:this.SubmitButtonClick,
- scope:this
- },{
- text:"Cancel",
- handler:this.CancelButtonClick,
- scope:this
- }]
- });
- },
- SaveButtonClick:function(btn,e){
- alert(Ext.encode(this.form.getValues().data));
- },
- SubmitButtonClick:function(btn,e){
- alert(Ext.encode(this.form.getValues().data));
- },
- CancelButtonClick:function(btn,e){
- this.hide();
- this.form.reset();
- }
- });
- //==============================================================================
- /**/
- POTabFormPanel=Ext.extend(POFormPanel,{
- //frame:true,
- title:"PurchaseOrder",
- closable:true,
- autoScroll:true,
- buttonAlign:"center",
- buttons:[{
- text:"SaveAsDraft",
- handler:this.SaveButtonClick,
- scope:this
- },{
- text:"Submit",
- handler:this.SubmitButtonClick,
- scope:this
- },{
- text:"Cancel",
- handler:this.CancelButtonClick,
- scope:this
- }],
- constructor:function(_cfg){
- if(_cfg)
- Ext.apply(_cfg);
- POTabFormPanel.superclass.constructor.call(this);
- },
- SaveButtonClick:function(){
- alert("SaveButtonClick");
- //alert(Ext.encode(this.getValues().data));
- },
- SubmitButtonClick:function(btn,e){
- alert(Ext.encode(this.getValues().data));
- },
- CancelButtonClick:function(btn,e){
- this.reset();
- }
- });
一直不知道是哪里出了问题,上网Google了一下也没有找到答案,只有自己摸索解决了。
凝视了代码好久,脑子里突然想到之前听陈治文老师视频中讲到的“设计时代码”和“运行时代码”,那问题会不会是出现在这里呢?我试着将Buttons的代码移到其构造函数里,再次调试,按钮单击正常工作了!!!
- POTabFormPanel=Ext.extend(POFormPanel,{
- frame:true,
- //title:"PurchaseOrder",
- closable:true,
- autoScroll:true,
- constructor:function(_cfg){
- if(_cfg)
- Ext.apply(this,_cfg);
- POTabFormPanel.superclass.constructor.call(this,{
- buttonAlign:"center",
- buttons:[{
- text:"SaveAsDraft",
- handler:this.SaveButtonClick,
- scope:this
- },{
- text:"Submit",
- handler:this.SubmitButtonClick,
- scope:this
- },{
- text:"Cancel",
- handler:this.CancelButtonClick,
- scope:this
- }]
- });
- },
- SaveButtonClick:function(){
- alert("SaveButtonClick");
- //Ext.log("SaveButtonClick");
- alert(Ext.encode(this.getValues().data));
- },
- SubmitButtonClick:function(btn,e){
- alert(Ext.encode(this.getValues().data));
- Ext.log(Ext.encode(this.getValues().data))
- },
- CancelButtonClick:function(btn,e){
- this.reset();
- }
- });
问题得到了解决,记录在我的Blog中,方便其他遇到类似问题的朋友参阅!!
版权声明:本文为博主原创文章,未经博主允许不得转载。
相关推荐
关于标签页的制作给出了三种方法,第一种就不介绍给大家了,因为时间久远到现在改方法已经失效,但是也放在附件中供大家参考就是那个tab。第二种是让我眼前一亮的。使用方法是这样:首先建立一个figure,并在其中...
treepanel 和 tabpanel 合在一起使用,可直接使用
解决Ext中tabPanel关闭后再次打开的2种方式。详情见文件,很小的txt文本。
NULL 博文链接:https://rowen.iteye.com/blog/446163
jquery实现新建TabPanel选卡窗口以及右键菜单功能实例
NULL 博文链接:https://daishuanglong.iteye.com/blog/789697
基于jquery的tabpanel,支持动态添加,支持滚动条,可内嵌iframe,支持关闭按钮,支持tab的背景图片配置, 这个是我在网上找到一个原始的版本,然后修改的,有详细注释,写了11个使用例子,基本涵盖了该组件的功能。...
ExtJS tabPanel实例ExtJS tabPanel实例
html javascritp+css+tabpanel的实现
Extjs4.2 设置tabpanel当前活动页签的样式
竖向标签TabPanel-------------------------------------------------
基于jquery的tabpanel,支持动态添加,支持滚动条,可内嵌iframe,支持关闭按钮,支持tab的背景图片配置, 这个是我在网上找到一个原始的版本,然后修改的,有详细注释,写了11个使用例子,基本涵盖了该组件的功能。...
Extjs4.2 根据不同的数值设置tabpanel行的背景颜色
必须唯一,或者不设置该参数,否则将无法添加到选项卡组件中,默认自动生成。 title<string> 元素标题 可以动态设置。 closeable<boolean> 是否可关闭 true可关闭,false不可关闭,默认为true。
TabPanel的使用,添加tab,加载页面,添加事件
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
NULL 博文链接:https://mstr838wind.iteye.com/blog/766860
extjs4.2.1 tabPanel刷新及关闭标签
EXTJS4.2官网上的tabpanel的右键关闭当前页,关闭其它,关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件,只要替换当前4.2的那个文件就可以使用了!
tapestry4.02中封装ext的TabPanel组件