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

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>

?????????????????? <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>

修改为：

<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>

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

jsp中Ext的“格局”和“表单提交”“回

热点推荐