jsp中Ext的“布局”和“表单提交”“回填”教程（1）
jsp中Ext的“布局”和“表单提交”“回填”教程
如果你是新建一个WebProject\工程，那必须先吧下载的ext基础包复制到工程的WebRoot下，并把ext/src/locale/ext-lang-zh_CN.js包的编码改为UTF-8
?
二．画界面：
1.画界面必须都必须的第一步：在.jsp/html里导入包：在</head>前面加入以下几句即可
<linkhref="<%=path%>/ext/resources/css/ext-all.css"rel="stylesheet"
??????????????????????????? type="text/css"/>
?????????????????? <scripttype="text/javascript"
??????????????????????????? src="<%=path%>/ext/adapter/ext/ext-base.js"charset="GBK">
???????? ???????? </script>
?????????????????? <scripttype="text/javascript" src="<%=path%>/ext/ext-all.js"charset="GBK">
?????????????????? </script>
?????????????????? <scripttype="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>
?????????????????? <scripttype="text/javascript" charset="GBK">
??????????????????????????? varpath='<%=path%>';
?????????????????? </script>
注：我这里页面使用的是UTF-8编码所以在以上几句引入中加入：charset="GBK"
如果你的页面使用的是GBK编码，可以把charset="GBK"去掉，并且把
<script type="text/javascript"src="<%=path%>/ext/src/locale/ext-lang-zh_CN.js">
?????????????????? </script>
修改为：
<scripttype="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: '<h1style="text-indent: 21pt; line-height: 10pt;">?
//????????? border: true,?????????? //是否需要边框
??????????? margins: '0 0 00',???? //上右下左边距
//????????? title:'test',?????????? //标题
//????????? collapsible:true,?????? //有上方缩小箭头
//????????? collapseMode:'mini',?? //缩小按钮（与缩小箭头方式不同）
??????????? Xtype:'tabpanel',?????? //相当于load,需要的时候才实例化（看不到区别）
??????????? items: [{
??????????????? baseCls:'x-plain',
??????????????? //分页中编写html代码
??????????????? html: 'Thefirst 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
?
