无废话ExtJs 入门教程六[按钮：Button]

无废话ExtJs 入门教程六[按钮：Button]

extjs技术交流，欢迎加群（201926085)

继上一节内容，我们在表单里加了个两个按钮“提交”与重置。如下所示代码区的第68行位置， buttons: [btnsubmit, btnreset]。

1.代码如下：

  1 
  2 
  3 
  4     
  5     
  6     
  7     
  8     
  9     
 10     
 87 
 88 
 89 
100 
101 

 

2.效果如下：

3.button组件常用的：属性、方法及事件 

一、属性

text:字符串，显示在按钮上的文字。

minWidth: 整型，最小宽度。

二、事件

handler:首发方法处理事件。

listeners:事件监听。

活到老,学到老,练到老...

分类: 无废话ExtJs系列教程

好文要顶 关注我 收藏该文 联系我

李林峰的园子
关注 - 37
粉丝 - 1827

+加关注

19

0

(请您对文章做出评价)

« 上一篇： 无废话ExtJs 入门教程五[文本框：TextField]
» 下一篇： 无废话ExtJs 入门教程七[登陆窗体Demo：Login]

posted on 2012-06-21 17:00 李林峰的园子 阅读( 25495) 评论( 21) 编辑 收藏

发表评论

  

#1楼 2012-06-21 17:27 | 成长中  

沙发 楼主 加油 继续更新

支持(0) 反对(0)

  

#2楼 [ 楼主] 2012-06-21 17:37 | 李林峰的园子  

@ 成长中
谢谢支持，刚入园子不久，共同成长，恩，都加油。

支持(0) 反对(0)

http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u414533.gif?id=31160526

  

#3楼 2012-06-24 16:44 | 牛腩  

好东西。。。

支持(0) 反对(0)

http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u41249.jpg

  

#4楼 2012-06-25 13:27 | 天意人间  

可恶的IE6一运行就假死，要等好长时间。。不过谷歌挺好的
楼主加油，跟着学习

支持(0) 反对(0)

http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u160372.gif

  

#5楼 2012-06-25 13:52 | 天意人间  

为什么这个生成的代码里面没有form标记呢，不懂。。
比如，我生成个form，设置个id

var form= new Ext.form.FormPanel({
    frame: true ,
    id: "frmTest" ,
    title: "测试表单" ,
    style: "margin:10px" ,
    items:[textuser,textpass],
    buttons:[btnSubmit,btnReset]
});

然后在reset的按钮里面添加事件

var btnReset= new Ext.Button({
    text: "重置" ,
    listeners:{
        'click' : function (){
            var frmTest=Ext.getDom( "frmTest" );
            frmTest.reset();
        }
    }
});

就会出现错误，下面是出错信息

说明生成的是个div
纠结，请教

支持(0) 反对(0)

http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u160372.gif

  

#6楼 [ 楼主] 2012-06-25 14:57 | 李林峰的园子  

@ 天意人间

'click' : function () {
                        var frmTest = Ext.getDom( "frmTest" );
                        frmTest.reset();
                    }

问题(1)：没有区分开，getDom与getCmp的区别。
getDom方法－获得DOM节点
getCmp方法－获得Ext组件
这里应该使用var frmTest = Ext.getCmp("frmTest");
详细请查看下面链接：
Ext中的get、getDom、getCmp、getBody、getDoc的区别
问题(2)frmTest.reset();
应该是:frmTest.getForm().reset();
获取到Ext组件后再调用个获取表单的方法再重置。
完整代码如下：

'click' : function () {
                       var frmTest = Ext.getCmp( "frmTest" );
                       frmTest.getForm().reset();
                   }

支持(0) 反对(0)

http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u414533.gif?id=31160526

  

#7楼 2012-06-26 12:01 | 天意人间  

@ 李林峰的园子
谢谢了

支持(0) 反对(0)

http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u160372.gif

  

#8楼 2012-06-30 23:47 | 牛腩  

好好学习。。。。
http://test.oncecode.com/q164423073/www/

支持(0) 反对(0)

http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u41249.jpg

  

#9楼 2012-07-27 11:30 | 航叔  

楼主，你好！有个问题请教，我按照你的方法把代码写完之后能顺利的执行，但是，窗口的边框是透明的，或者说是与背景色是一致的颜色，我想问问怎么能让它显示出来····