jsp
中
Ext
的
“
布局
”
和
“
表单提交
”“
回填
”
教程
网络上有很多
ext
的很全面的教程，但是学习起来不免还是有些负担，今天我制作这个教程目的是让迷惑的朋友能更快的对
ext
有一定的了解，不至于对
ext
还是那么抽象。
在这里大家可以先下载我写好的
Struts-Spring
模板（后面讲到与后台交互时会用到，现在先不下也没关系）
http://down.51cto.com/data/201424
51ct
http://dl.dbank.com/c0zu1qyv6f
dbank
http://u.115.com/file/e6crn8t0
115
但是这个一定要下载：
ext
基础包
http://dl.dbank.com/c0zzqvugdc
dbank
http://u.115.com/file/clioh2zq
115
接着，教程开始了：
一．搭建环境：在
myeclipse
下先新建一个
WebProject
工程（导入之前下载的
Struts-Spring
项目均可）
如果你是新建一个
WebProject\
工程，那必须先吧下载的
ext
基础包复制到工程的
WebRoot
下，并把
ext/src/locale/ext-lang-zh_CN.js
包的编码改为
UTF-8
二．
画界面：
1.
画界面必须都必须的第一步：在
.jsp/html
里导入包：在
</
head
>
前面加入以下几句即可
<link href=”<%=path%>/ext/resources/css/ext-all.css” rel=”stylesheet”
type=”text/css” />
<script type=”text/javascript”
src=”<%=path%>/ext/adapter/ext/ext-base.js” charset=”GBK”>
</script>
<script type=”text/javascript” src=”<%=path%>/ext/ext-all.js” charset=”GBK”>
</script>
<script type=”text/javascript” src=”<%=path%>/test0512/test1.js” charset=”GBK”>
</script><!–
这里指明你编写的
ext
的
.js
文件的路径，因为这个页面已经不需要在修改了
–>
<script type=”text/javascript” src=”<%=path%>/ext/src/locale/ext-lang-zh_CN.js”>
</script>
<script type=”text/javascript” charset=”GBK”>
var path='<%=path%>’;
</script>
注：我这里页面使用的是
UTF-8
编码所以在以上几句引入中加入：
charset=”GBK”
如果你的页面使用的是
GBK
编码，可以把
charset=”GBK”
去掉，并且把
<script type=”text/javascript” src=”<%=path%>/ext/src/locale/ext-lang-zh_CN.js”>
</script>
修改为：
<script type=”text/javascript” src=”<%=path%>/ext/src/locale/ext-lang-zh_CN.js” charset=”UTF-8″>
</script>
2.
定义
Ext
制作的界面风格，
txt
有两种风格：
a.
一个小窗口停留在页面（像
webQQ
中的标签一样）。
b.
布局编写到界面（普通的写入页面）
3.
我们先编写一个
a
风格的登入界面：
新建一个
ext
的
.js
文件，即
javascript
文件，命名，并修改之前页面的导入语句
:
<script type=”text/javascript” src=”<%=path%>/test0512/test1.js” charset=”GBK”>
</script><!–
这里指明你新建的
.js
文件的路径
–>
将以下内容复制进
.js
文件：
Ext.onReady(function(){
//
自动读取内容，加以显示，否者不显示任何东西
Ext.QuickTips.init(); //
初始化
Ext.QuickTips
，以使得
tip
提示可用
//
可拖动窗口
var fp = new Ext.form.FormPanel( {//new
一个
FormPanel
表单，相当于
jsp
中的
form
表单，用于提交
// title : ‘
测试登入
‘, //
注释掉可以看到区别
frame : true, //
是否使用样式
layout:’border’, //
边框布局
items:[{
//
控件，往这个
FormPanel
表单内装什么
region: ‘center’, //
中间控件，这个要写中间，然后才能
north
、
east
、
west
、
south
，不然会出现警告或显示异常
layout : ‘absolute’, //
绝对布局
// layoutConfig : {
// extraCls : ‘x-abs-layout-item’
// },
defaultType : ‘textfield’, //
默认控件类型为
textfield,
这里不写里面就要一个一个写
items : [{
x : 0, //
绝对路径
X
轴
y : 5, //
绝对路径
y
轴
xtype : ‘label’, //
控件类型为标签
text : ‘
用户名
:’ //
显示内容
提示：这里要注意的事，最后一个属性的后面不能加逗号，不然会不显示并且报错
}, {
x : 60,
y : 0,
name : ‘username’, //
文本框名字，用户表单提交对应后台
anchor : ‘100%’ //
控件长度占总长度的百分比
}, {
x : 0,
y : 35,
xtype : ‘label’,
text : ‘
密码
‘
}, {
x : 60,
y : 30,
name : ‘password’,
anchor : ‘100%’
}, {
x : 0,
y : 60,
xtype : ‘textarea’,
name : ‘mess’,
anchor : ‘100% 100%’
}
]
},{
region:’south’, //
边框布局的南边
height:30, //
设置南边布局的高度，
center
则自动调整
layout:’absolute’, //
设置为绝对布局
items:[{
x:10,
y:5,
xtype: ‘button’, //
设置控件类型为按钮类型
width:70, //
按钮宽度
text:”
登入
” //
显示内容
}]
}]
});
//
定义窗体
var _window = new Ext.Window( {
//
定义一个标签窗体
title : ”
測試登入
“, //
设置标题
layout : “fit”, //
布局设置为全部填充
width : 335, //
窗体宽度
height : 260, //
窗体高度
minWidth:335, //
窗体最小宽度
minHeight:260, //
窗体最小高度
draggable:true, //
是否可以拖动
resizable:false, //
是否可以改变大小
maximizable:false, //
是否可最大化窗体
maximizable : false, //
初始化时最大化显示窗口
closeAction : “close”, //
关闭窗口的动作，包括以下两种：
//close
：从
DOM
删除窗口，销毁窗口及其所属组件，窗口不再可用，重新显示需要调用
show
方法。此为默认值。
//hide
：通过设置可见性隐藏窗口，窗口还可用，调用
show
方法后重新显示。
closable : false, //
是否允许关闭窗口，默认为
true
。
constrain:false, //
是否约束窗口只能在容器内移动，默认为
false
。窗口默认渲染到
document.body
。
constrainHeader:false, //
是否约束窗口头部只能在容器内移动，默认为
false
。
collapsible : true, //
可否最小化窗体
plain : true, //
主体背景是否透明，默认为
false
。
modal:false, //
是否为模式窗口，默认为
false
。
manager:false, //
是否为模式窗口，默认为
false
。
buttonAlign : “center”,
// x:50,//
窗口的
X
坐标值。设置居中后无需在设置坐标值
// y:50,//
窗口的
Y
坐标值。
items : fp //
内容为之前
new
的
fp
表单，如果去掉将仅显示窗体，无内容
//
注，最后一个属性如果去掉，要将前一个的逗号去掉
});
_window.show(); //
显示窗体，否则不显示
});
之后部署项目，访问
.jsp
文件即可看到内容：窗体内一个可拖动的窗口
4..
编写登入后的主页面，把登入后的界面分为上、左、中三块
新建一个
.jsp
页面、
.js
文件，在
.jsp
文件里导入
ext
（步骤
1
）和
.js
。
开始编写
.js
文件：
Ext
.onReady(
function
(){
//
必须的，自动读取内容，加以显示，否则不显示任何东西
Ext .QuickTips.init();
var
tree =
new
Ext .tree.TreePanel( {
rootVisible:
false
, //
隐藏根节点
el : ‘tree’ //
使用
body
中的
tree
});
var
root =
new
Ext .tree.TreeNode({text:’all’}); //
定义根节点
var
node1 =
new
Ext .tree.TreeNode({text:’
一级子节点
‘}); //
定义一级子节点
var
node11 =
new
Ext .tree.TreeNode({text:’
二级子节点
‘}); //
定义二级子节点
node1.appendChild(node11); //
往一级子节点添加二级子节点
root.appendChild(node1); //
往根节点添加一级子节点
tree.setRootNode(root); //
往树中添加根节点
tree.render(); //
调用树，我想是用于跟新吧
root.expand(
true
,
true
); //
初始化是是否展开节点
//viewport
分割页面（一定要有
center
）
new
Ext .Viewport({
//ewPort
会随着浏览器显示区域的大小自动改变，代表整个浏览器的显示区域，它直接渲染到页面的
body
区域，所以在一个页面中就只能有一个
ViewPort
实例
layout: ‘border’, //
边框布局
items: [{
region: ‘north’, //border
布局中，这个不能漏掉
// html: ‘<h1 class=”x-panel-header”>1Page Title</h1>’,
// border: true, //
是否需要边框
margins: ‘0 0 0 0’, //
上右下左边距
// title:’test’, //
标题
// collapsible:true, //
有上方缩小箭头
// collapseMode: ‘mini’, //
缩小按钮（与缩小箭头方式不同）
Xtype:’tabpanel’, //
相当于
load,
需要的时候才实例化（看不到区别）
items: [{
baseCls: ‘x-plain’,
//
分页中编写
html
代码
html: ‘The first tab\’s<br/> content. Others may be added dynamically’
//
分页中加载
jsp
页面
// html : ‘<iframe src=”http://www.baidu.com” width=”100%” height=”100%” name=”top”></iframe>’
}],
// autoHeight: true,
锁定高度，如果锁定，以下三句就没有效果了
split:
true
,//
可调整，只在
border
布局中有效，要配合上
minHeight
一起使用
height: 150,
minHeight: 100
}, {//
现有
center
才能有
east/west
，不然会抛出异常没有接住
,
而且
center
要设宽，否则会占用整个屏幕，或者报未结束
region:’center’
},{
region:’west’,
split:
true
,
width:160,
minWidth:100,
// layout:fit,
items:tree
}]
});
});
黏贴上以上代码后，页面就会被分成上、左、中三分。 :
教程2：
http://yonghengmoming.iteye.com/admin/blogs/1044945