Ext JS的Html标签与Ext组件的交互

来源：互联网发布：图书管理系统java案例编辑：程序博客网时间：2024/05/16 15:45

刚从C/S转过来的程序员，估计想我一样，刚开始接触Ext这样的Javascript开发的UI组件时，往往十分困惑，它是如何运作的呢，我通过摸索和查阅资料，今天有了心得，分享一下。

众所周知，Html允许自定义标签，通常我们会给每个标签一个ID作为标识，那么我们通过Ext组件的get方法就可以得到某个

ID的标签的句柄，然后就可以对它进行处理了。

代码如下：

ExtStart.js

         Ext.onReady(function(){
                         new Ext.Viewport({
                                               enableTabScroll:true,
                                               layout:"fit",
                                               items:[{title:"面板",
                                                              html:"",
                                                               bbar:[{ id:"button1",
                                                                            text:"按钮1"},
                                                          {text:"按钮2"}]
                                                           }]
          });

          Ext.get('button1').on('click', function(e){
                          Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
          });

          function showResult(btn){
                          Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
           };


});

这个代码，我在web浏览器上，创见了一个Button1，自定了一个ID：button1，然后调用Ext.get('button1').on('click', function(e)

捕获它的click事件，显示一个对话框。

LearnExt.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Learn EXT JS Starter Page</title>

ExtStart.css

body {
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size:12px;
color:#333;
padding: 20px;
}
h1 {
font-family: Georgia,"Times New Roman",Times,serif;
font-size:26px;
color:#083772;
letter-spacing:-1px;
font-weight:normal;
}
h2 {
font-size: 18px;
line-height:18px;
color:#083772;
margin-bottom:15px;
font-weight:normal;
}
p {
margin:8px 20px;
line-height:18px;
}
input {
margin: 8px 20px;
}
#myDiv {
border:2px solid #1F3E75;
background:#DFECFB;
margin:20px 50px;
padding:10px 20px;
width:200px;
text-align:center;
}
.red {
color: red;
}