render

最新推荐文章于 2022-09-28 17:37:38 发布

朱智文

最新推荐文章于 2022-09-28 17:37:38 发布

阅读量699

点赞数

分类专栏： extjs

extjs 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

这里的事件响应主要是针对Button的事件响应来说的，主要有三种方式:
第一种是直接写handler: function() {}，这种方式默认会去响应其click事件，
第二种是通过listeners属性来实现其事件的说明，如：
listeners： ｛
       "click": function() {}
｝
第三种方式是通过on关键字来实现，如：
var btn = new Ext.Button();
btn.on("click",function() {})
 
对于render而言，如果在新建一个panel的时候指定了其render属性，那么在其后使用该对象来进行组件添加操作是不会成功的，因为有了render以后，系统会先将panel在页面上进行显示，然后通过异步的方式来执行后面的操作，所以当执行后续的添加操作时就不会进行显示了，如果确实需要这样来实现相关的添加操作，那么就可以监听其render事件，该监听方法会在render之前执行，这时候就可以把需要添加组件的操作在该方法中执行。当没有指定render属性的时候就可以随意的 进行添加操作了，只是最后需要手动的调用类似于panel.render(document.body)这样的方法。
 
 
示例代码如下：
   
   
    
    
     
     
      
      Html代码  
      
      
     
     
    
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>03.html</title>  
      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="this is my page">  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
      
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    <link rel="stylesheet" type="text/css" href="../ext4/resources/css/ext-all.css"/>  
    <style type="text/css">  
        * {  
            text-align: center;  
        }  
    </style>  
    <script type="text/javascript" src="../ext4/ext-all-debug.js"></script>  
    <script type="text/javascript">  
        Ext.onReady(function() {  
            var myPanel = new Ext.form.Panel({  
                title: "panel",  
                width: 600,  
                height: 300,  
                renderTo: Ext.getBody(),  
                defaults: {//设置一些默认属性  
                    xtype: "textfield",//默认的组件类型为textfield  
                    width: 480  
                },  
                items: [{fieldLabel: "name"},{fieldLabel: "address"}],  
                buttons: [{  
                    text: "确定",  
                    handler: function() {  
                        alert("确定");  
                    }  
                },{  
                    text: "取消",  
                    listeners: {  
                        "click": function() {  
                            alert("取消");  
                        }  
                    }  
                }]  
            });  
            var myPanel2 = new Ext.panel.Panel({  
                title: "panel2",  
                width: 600,  
                height: 300,  
                renderTo: document.body,//如果在创建的时候就把这个panel依附到了document.body等容器中,  
                //那么如果在后面直接使用myPanel2.add(component)方法添加一个组件的时候该组件不会被显示在页面上,因为  
                //在依附的时候是把依附时候的模样显示在页面上的，如果确实需要在后面添加的时候还能进行显示的话就监听其render，并  
                //在该方法中做添加操作，这样panel在依附到指定的容器中的时候就会触发该事件，此时所做的添加组件操作就可以在页面上进行  
                //显示了  
                defaults: {  
                    xtype: "textfield",  
                    width: 480  
                },  
                items: [{fieldLabel: "name"},{fieldLabel: "address"}],  
                listeners: {  
                    "render": function() {  
                        var btn1 = new Ext.Button({text: "确定", width: 100});  
                        var btn2 = new Ext.Button({text: "取消", width: 100});  
                        btn1.on("click",function() {  
                            alert("确定");  
                        });  
                        btn2.on("click",function() {  
                            alert("取消");  
                        });  
                        this.add(btn1);  
                        this.add(btn2);  
                    }  
                }  
            });  
            var myPanel3 = new Ext.panel.Panel({  
                title: "panel3",  
                width: 500,  
                height: 200,  
                defaults: {  
                    xtype: "textfield",  
                    width: 350  
                },  
                items: [{fieldLabel: "name"},{fieldLabel: "address"}]  
            });  
            myPanel3.add(new Ext.Button({text: "确定", width: 100}));  
            myPanel3.add(new Ext.Button({text: "取消", width: 100}));  
            //如果确实需要手工一步一步的添加各种组件，那么这个时候就需要手动的将生成的panel依附到指定的容器了  
            myPanel3.render(Ext.getBody());  
        });  
    </script>  
  
  </head>  
    
  <body>  
      
  </body>  
</html>

朱智文

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
render

这里的事件响应主要是针对Button的事件响应来说的，主要有三种方式:第一种是直接写handler: function() {}，这种方式默认会去响应其click事件，第二种是通过listeners属性来实现其事件的说明，如：listeners：｛ "click": function() {}｝第三种方式是通过on关键字来实现，如：var btn = new Ext.Button()
复制链接

扫一扫