刚从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>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="../shared/examples.js"></script>
<script type="text/javascript" src="ExtStart.js"></script>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<link rel="stylesheet" type="text/css" href="ExtStart.css">
</head>
<body>
</body>
</html>
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;
}