ExtJs基础UI设计进阶教程(1)
2013-02-21 15:01
423 查看
转自：http://blog.csdn.net/yu624774720hua/article/details/6552190
了解Ext.Button
说明：该主键代替了传统的submit，reset，button,HTML控件
构造参数：--text：按钮上的名称
属性：-text：获得当前按钮上的名称 -minWindth：按钮的最小宽度
方法：-setText：设置按钮上的名称
事件：-click：当点击按钮是触发
button实例
[xhtml]
view plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>普通按钮</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _button = new Ext.Button({
renderTo:document.body,
text:"确 定",
minWidth:100
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
Ext.Button产生的引申话题
属性： -renderTO：将当前对象所生成的HTML对象存放进指的的对象中
构造参数 -handler：指定一个函数句柄，在默认事件触发是调用，此时的默认事件为click
-listeners：这个是在对象初始化之前，就将1系列事件进行定义的手段，在进行组件化编程时，特别有用
click（handler）实例
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>带事件的按钮</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
new Ext.Button({
renderTo:Ext.getBody(),
text:"确 定",
handler:function(){
alert("欢迎你学习EXTJS") ;
}
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
listeners调用（推荐）：
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>第二种编写带事件的按钮</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
new Ext.Button({
renderTo:Ext.getBody(),
text:"确 定",
listeners:{
"click":function(){
alert("欢迎你学习EXTJS") ;
}
}
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
传统调用方法（不推荐）
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>第三种编写带事件的按钮</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _btn = new Ext.Button({
renderTo:Ext.getBody(),
text:"确 定"
}) ;
_btn.on("click" , function(){
alert("欢迎你学习EXTJS") ;
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
了解Ext.form.TextField
说明：该组件代替了传统的text组件
属性：-fieldLabel：文本框的标签名称
方法-getValue()：得到文本框的值
textfield实例
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>文本框</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
new Ext.form.TextField({
renderTo:Ext.getBody(),
fieldLabel:"姓名"
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
以上这个代码，无法实现textLabel的内容，原因是我们没有使用布局
由Ext.form.TextField产生的引申话题
Ext.layout.FormLayout:只有在此布局下才能正确显示文本框的标签名，布局的宿主对象必须是Ext.Container或者Ext.Container的子类
在应用FormLayout布局时只要在宿主对象的参数中指定layout:"form"即可
Ext.getCmp(String_id):的到id为_id的组件对象
布局后实例
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>嵌套在具有FormLayout布局特性面板里的文本框</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _panel = new Ext.Panel({
renderTo:Ext.getBody(),
layout:"form",
labelWidth:30,
listeners:{
"render":function(_panel){
_panel.add(new Ext.form.TextField({
id:"txt_name",
fieldLabel:"姓名"
})) ;
}
}}) ;
new Ext.Button({
text:"确 定",
renderTo:Ext.getBody(),
handler:function(){
alert(Ext.getCmp("txt_name").getValue()) ;
}
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
了解Ext.Panel
说明：从某种意义来讲，其彻底改变了网页界面是通过HTML Table进行布局的历史
属性：-title：面板的标签名 -width ：指定版面的宽度 -height：指定版面的高度 -frame 把4个脚变圆角，改变背景色
方法：-addButton（String/Object_config，Function_handler，Object_scope）添加一个按钮对象到面板中
panel基础实例
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>面板</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
new Ext.Panel({
renderTo:Ext.getBody(),
title:"人员信息"
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
panel实例（2）
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>指定长与宽的面板</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
new Ext.Panel({
renderTo:Ext.getBody(),
title:"人员信息",
width:200,
height:300
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
addButton实例：
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>带两个按钮的面板</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"人员信息",
frame:true,
width:200,
height:300
}) ;
_panel.addButton({text:"确 定"}) ;
_panel.addButton(new Ext.Button({text:"取 消"})) ;
_panel.render(Ext.getBody()) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
panel居中（定位）
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>不顶边面板</title>
<mce:style type="text/css"><!--
.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center {
position:absolute;
top:30%;
left:43%;
text-align:left;
}
--></mce:style><style type="text/css" mce_bogus="1">.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center {
position:absolute;
top:30%;
left:43%;
text-align:left;
}</style>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"人员信息",
frame:true,
width:200,
height:300
}) ;
_panel.addButton({text:"确 定"}) ;
_panel.addButton(new Ext.Button({text:"取 消" , minWidth:100})) ;
_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), {
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
} , true).child("div")) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
2个textfield
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>带两个文本框的面板</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"人员信息",
frame:true,
width:300,
height:200,
layout:"form",
listeners:{
"render":function(_panel){
_panel.add({xtype:"textfield" , fieldLabel:"姓名"}) ;
_panel.add(new Ext.form.TextField({
fieldLabel:"地址"
})) ;
}
}
}) ;
_panel.addButton({text:"确 定"}) ;
_panel.addButton(new Ext.Button({text:"取 消" , minWidth:100})) ;
_panel.render(Ext.getBody()) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
登陆界面：
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>登陆程序</title>
<mce:style type="text/css"><!--
.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center {
position:absolute;
top:30%;
left:43%;
text-align:left;
}
--></mce:style><style type="text/css" mce_bogus="1">.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center {
position:absolute;
top:30%;
left:43%;
text-align:left;
}</style>
<mce:script type="text/javascript" src="../../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"登 陆",
frame:true,
width:260,
height:130,
layout:"form",
labelWidth:45,
listeners:{
"render":function(_panel){
_panel.add({xtype:"textfield" , fieldLabel:"账号" , width:180}) ;
_panel.add({xtype:"textfield" , fieldLabel:"密码" , width:180}) ;
}
}
}) ;
_panel.addButton({text:"确 定"}) ;
_panel.addButton({text:"取 消"}) ;
_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), {
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
} , true).child("div")) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
以上全是Ext2.0以下版本的写法，写起来很麻烦
2.2版本的登陆界面
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>登陆程序</title>
<mce:style type="text/css"><!--
.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center {
position:absolute;
top:30%;
left:43%;
text-align:left;
}
--></mce:style><style type="text/css" mce_bogus="1">.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center {
position:absolute;
top:30%;
left:43%;
text-align:left;
}</style>
<mce:script type="text/javascript" src="../../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"登 陆",
frame:true,
width:260,
height:130,
layout:"form",
labelWidth:45,
defaults:{xtype:"textfield" , width:180},
items:[{
fieldLabel:"账号"
},{
fieldLabel:"密码"
}],
buttons:[{
text:"确 定"
},{
text:"取 消"
}]
}) ;
_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), {
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
} , true).child("div")) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
了解Ext.Button
说明：该主键代替了传统的submit，reset，button,HTML控件
构造参数：--text：按钮上的名称
属性：-text：获得当前按钮上的名称 -minWindth：按钮的最小宽度
方法：-setText：设置按钮上的名称
事件：-click：当点击按钮是触发
button实例
[xhtml]
view plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>普通按钮</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _button = new Ext.Button({
renderTo:document.body,
text:"确 定",
minWidth:100
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
Ext.Button产生的引申话题
属性： -renderTO：将当前对象所生成的HTML对象存放进指的的对象中
构造参数 -handler：指定一个函数句柄，在默认事件触发是调用，此时的默认事件为click
-listeners：这个是在对象初始化之前，就将1系列事件进行定义的手段，在进行组件化编程时，特别有用
click（handler）实例
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>带事件的按钮</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
new Ext.Button({
renderTo:Ext.getBody(),
text:"确 定",
handler:function(){
alert("欢迎你学习EXTJS") ;
}
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
listeners调用（推荐）：
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>第二种编写带事件的按钮</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
new Ext.Button({
renderTo:Ext.getBody(),
text:"确 定",
listeners:{
"click":function(){
alert("欢迎你学习EXTJS") ;
}
}
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
传统调用方法（不推荐）
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>第三种编写带事件的按钮</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _btn = new Ext.Button({
renderTo:Ext.getBody(),
text:"确 定"
}) ;
_btn.on("click" , function(){
alert("欢迎你学习EXTJS") ;
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
了解Ext.form.TextField
说明：该组件代替了传统的text组件
属性：-fieldLabel：文本框的标签名称
方法-getValue()：得到文本框的值
textfield实例
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>文本框</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
new Ext.form.TextField({
renderTo:Ext.getBody(),
fieldLabel:"姓名"
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
以上这个代码，无法实现textLabel的内容，原因是我们没有使用布局
由Ext.form.TextField产生的引申话题
Ext.layout.FormLayout:只有在此布局下才能正确显示文本框的标签名，布局的宿主对象必须是Ext.Container或者Ext.Container的子类
在应用FormLayout布局时只要在宿主对象的参数中指定layout:"form"即可
Ext.getCmp(String_id):的到id为_id的组件对象
布局后实例
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>嵌套在具有FormLayout布局特性面板里的文本框</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _panel = new Ext.Panel({
renderTo:Ext.getBody(),
layout:"form",
labelWidth:30,
listeners:{
"render":function(_panel){
_panel.add(new Ext.form.TextField({
id:"txt_name",
fieldLabel:"姓名"
})) ;
}
}}) ;
new Ext.Button({
text:"确 定",
renderTo:Ext.getBody(),
handler:function(){
alert(Ext.getCmp("txt_name").getValue()) ;
}
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
了解Ext.Panel
说明：从某种意义来讲，其彻底改变了网页界面是通过HTML Table进行布局的历史
属性：-title：面板的标签名 -width ：指定版面的宽度 -height：指定版面的高度 -frame 把4个脚变圆角，改变背景色
方法：-addButton（String/Object_config，Function_handler，Object_scope）添加一个按钮对象到面板中
panel基础实例
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>面板</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
new Ext.Panel({
renderTo:Ext.getBody(),
title:"人员信息"
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
panel实例（2）
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>指定长与宽的面板</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
new Ext.Panel({
renderTo:Ext.getBody(),
title:"人员信息",
width:200,
height:300
}) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
addButton实例：
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>带两个按钮的面板</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"人员信息",
frame:true,
width:200,
height:300
}) ;
_panel.addButton({text:"确 定"}) ;
_panel.addButton(new Ext.Button({text:"取 消"})) ;
_panel.render(Ext.getBody()) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
panel居中（定位）
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>不顶边面板</title>
<mce:style type="text/css"><!--
.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center {
position:absolute;
top:30%;
left:43%;
text-align:left;
}
--></mce:style><style type="text/css" mce_bogus="1">.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center {
position:absolute;
top:30%;
left:43%;
text-align:left;
}</style>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"人员信息",
frame:true,
width:200,
height:300
}) ;
_panel.addButton({text:"确 定"}) ;
_panel.addButton(new Ext.Button({text:"取 消" , minWidth:100})) ;
_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), {
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
} , true).child("div")) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
2个textfield
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>带两个文本框的面板</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"人员信息",
frame:true,
width:300,
height:200,
layout:"form",
listeners:{
"render":function(_panel){
_panel.add({xtype:"textfield" , fieldLabel:"姓名"}) ;
_panel.add(new Ext.form.TextField({
fieldLabel:"地址"
})) ;
}
}
}) ;
_panel.addButton({text:"确 定"}) ;
_panel.addButton(new Ext.Button({text:"取 消" , minWidth:100})) ;
_panel.render(Ext.getBody()) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
登陆界面：
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>登陆程序</title>
<mce:style type="text/css"><!--
.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center {
position:absolute;
top:30%;
left:43%;
text-align:left;
}
--></mce:style><style type="text/css" mce_bogus="1">.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center {
position:absolute;
top:30%;
left:43%;
text-align:left;
}</style>
<mce:script type="text/javascript" src="../../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"登 陆",
frame:true,
width:260,
height:130,
layout:"form",
labelWidth:45,
listeners:{
"render":function(_panel){
_panel.add({xtype:"textfield" , fieldLabel:"账号" , width:180}) ;
_panel.add({xtype:"textfield" , fieldLabel:"密码" , width:180}) ;
}
}
}) ;
_panel.addButton({text:"确 定"}) ;
_panel.addButton({text:"取 消"}) ;
_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), {
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
} , true).child("div")) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
以上全是Ext2.0以下版本的写法，写起来很麻烦
2.2版本的登陆界面
[xhtml] view
plaincopy
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>登陆程序</title>
<mce:style type="text/css"><!--
.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center {
position:absolute;
top:30%;
left:43%;
text-align:left;
}
--></mce:style><style type="text/css" mce_bogus="1">.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center {
position:absolute;
top:30%;
left:43%;
text-align:left;
}</style>
<mce:script type="text/javascript" src="../../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"登 陆",
frame:true,
width:260,
height:130,
layout:"form",
labelWidth:45,
defaults:{xtype:"textfield" , width:180},
items:[{
fieldLabel:"账号"
},{
fieldLabel:"密码"
}],
buttons:[{
text:"确 定"
},{
text:"取 消"
}]
}) ;
_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), {
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
} , true).child("div")) ;
}) ;
// --></mce:script>
</head>
<body>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [第3讲]ExtJs基础UI设计进阶教程(1)
- EXTJS初级UI设计进阶教程（2）
- EXTJS初级UI设计进阶教程（2）
- EXTJS初级UI设计进阶教程（3）
- EXTJS初级UI设计进阶教程（3）
- EXTJS初级UI设计进阶阶段
- 《『若水新闻』客户端开发教程》——04.设计新闻分类UI(2)
- 网页设计基础：Div+CSS布局入门教程
- Extjs可视化设计视频教程二
- Xamarin XAML语言教程将XAML设计的UI显示到界面
- 弘扬的博客，一些基础的和进阶的安卓教程
- 多图详解 “Android UI”设计官方教程(二)
- (转)iOS7界面设计规范(12) - UI基础 - 品牌
- Ajax基础教程---- 1.7 设计考虑
- 【备忘】BIGD牛魔王UI图标设计iocn主题设计全套高清视频教程
- 《『若水新闻』客户端开发教程》——05.设计新闻列表UI
- Android UI基础教程【2】 TimerTacker源码
- 【安卓开发】UI设计基础5：用约束布局 ConstraintLayout实现计算器UI
- Extjs可视化设计视频教程三
- UI零基础网页设计小白想月薪10K的…