jsp中Ext的“布局”和“表单提交”“回填”教程（1）

最新推荐文章于 2022-05-28 12:47:28 发布

yonghengmoming

最新推荐文章于 2022-05-28 12:47:28 发布

阅读量272

点赞数

分类专栏： ext 文章标签： EXT JSP JavaScript FP Spring ViewUI

本文链接：https://blog.csdn.net/yonghengmoming/article/details/83921433

版权

ext 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jsp 中Ext 的“ 布局” 和“ 表单提交”“ 回填” 教程

网络上有很多 ext 的很全面的教程，但是学习起来不免还是有些负担，今天我制作这个教程目的是让迷惑的朋友能更快的对 ext 有一定的了解，不至于对 ext 还是那么抽象。

doc版教程下载：51cto ,dbank ,115

在这里大家可以先下载我写好的 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 > 前面加入以下几句即可

type="text/css" />

src="<%=path%>/ext/adapter/ext/ext-base.js" charset="GBK">

</script>

</script>

</script>

</script>

var path='<%=path%>';

</script>

注：我这里页面使用的是 UTF-8 编码所以在以上几句引入中加入： charset="GBK"

如果你的页面使用的是 GBK 编码，可以把 charset="GBK" 去掉，并且把

</script>

修改为：

</script>

2. 定义 Ext 制作的界面风格， txt 有两种风格：

a. 一个小窗口停留在页面（像 webQQ 中的标签一样）。

b. 布局编写到界面（普通的写入页面）

3. 我们先编写一个 a 风格的登入界面：

新建一个 ext 的 .js 文件，即 javascript 文件，命名，并修改之前页面的导入语句 :

</script>

将以下内容复制进 .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

yonghengmoming

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsp中Ext的“布局”和“表单提交”“回填”教程（1）

jsp中Ext的“布局”和“表单提交”“回填”教程网络上有很多ext的很全面的教程，但是学习起来不免还是有些负担，今天我制作这个教程目的是让迷惑的朋友能更快的对ext有一定的了解，不至于对ext还是那么抽象。 doc版教程下载：51cto,dbank,115在这里大家可以先下载我写好的Struts-Spri...
复制链接

扫一扫