Ext2.0教程三：Ext2.0从新建窗口开始

最新推荐文章于 2017-08-25 14:30:07 发布
最新推荐文章于 2017-08-25 14:30:07 发布
阅读量139 收藏
点赞数
文章标签： EXT CSS JavaScript prototype HTML ViewUI

--wayfoon

开发中，通常需要新建窗口，比如登陆窗口，新增窗口。

新建窗口使用到Ext.Window提供的类,

你可以先预览效果：效果图

建立一个简单的窗口:

  1. varwin=newExt.Window({
  2. id:'w',
  3. title:'wayfoon:新窗口',//窗口显示名称
  4. width:300,
  5. height:140,
  6. collapsible:true,//是否可折叠
  7. layout:'column',//布局方式
  8. items:[]//窗口需要增加的内容
  9. }).show();//让窗口显示出来

上面只定义了窗口的名称、长、宽、布局方式，其他属性之后详细描述。你可以在items里面增加你需要的内容。

比如你可以直接在items里面添加html代码:

  1. items:[{
  2. xtype:'panel',//html代码容器
  3. html:"姓名：<inputtype='text'name='wayfoon'onclick='javascript:alert(wayfoon)'/>"
  4. }]

在这里，我将演示添加一个form表单。

先新建一个form。

form由Ext.form.FormPanel定义

一个标准的form定义

  1. varfrom=newExt.form.FormPanel({
  2. bodyStyle:'padding-top:5px',//距离窗口上端的距离
  3. id:'f',
  4. labelWidth:50,//文本部分的宽度
  5. labelAlign:'right',//文本的排列方式
  6. labelPad:0,//文本和输入框之间的距离
  7. layout:'form',//布局方式
  8. frame:true,
  9. defaults:{//字元素默认的属性
  10. width:200
  11. },
  12. defaultType:'textfield',//默认的input类型
  13. items:[{
  14. id:'workid',
  15. cls:'user',
  16. fieldLabel:'编号',
  17. //disabled:true,
  18. allowBlank:false//是否允许为空
  19. },{
  20. id:'workname',
  21. fieldLabel:'名称',
  22. allowBlank:false
  23. }],
  24. buttonAlign:'center',//按钮的排列方式
  25. buttons:[{//按钮写在窗口，要比写在form里面好看多了
  26. text:'确定',
  27. type:'submit',
  28. handler:function(){//点击触发事件处理
  29. }
  30. }]
  31. //这里不需要逗号，每个控件定义都是这样的
  32. })

现在可以将form加入到窗口中，items:[form] 就可以！

这样显示的窗口不是很美观，我们可以做些调整。将按钮放到表单之外，也就是放在窗口下面。

这样，修改之后的窗口，

  1. varwin=newExt.Window({
  2. id:'w',
  3. renderTo:bd,
  4. title:'wayfoon:新窗口',
  5. width:300,
  6. height:140,
  7. collapsible:true,//是否可折叠
  8. defaults:{
  9. //容器内元素是否显示边框
  10. border:true
  11. },
  12. //layout:'fit',
  13. layout:'column',//布局方式
  14. items:[form],//包含表单，多个用逗号隔开
  15. buttonAlign:'center',//按钮的排列方式
  16. buttons:[{//按钮写在窗口，要比写在form里面好看多了
  17. text:'确定',
  18. type:'submit',
  19. handler:function(){
  20. }
  21. }]
  22. }).show();

一个新窗口，基本完成！

可以将下面代码保存成*.htm执行。

所有代码：

  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
  2. <html>
  3. <head>
  4. <title>wayfoon:新窗口</title>
  6. <linkrel="stylesheet"type="text/css"href="http://www.bsshenghua.com/ext22/resources/css/ext-all.css"/>
  7. <scripttype="text/javascript"src="http://www.bsshenghua.com/ext22/adapter/ext/ext-base.js"></script>
  8. <scripttype="text/javascript"src="http://www.bsshenghua.com/ext22/ext-all.js"></script>
  11. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"></head>
  13. <body>
  14. <script>
  15. Ext.onReady(function(){
  16. Ext.QuickTips.init();//初始化鼠标停留时的显示框
  17. Ext.form.Field.prototype.msgTarget='side';
  18. varbd=Ext.getBody();
  20. varform=newExt.form.FormPanel({
  21. bodyStyle:'padding-top:5px',//距离窗口上端的距离
  22. id:'ll',
  23. labelWidth:50,//文本部分的宽度
  24. labelAlign:'right',//文本的排列方式
  25. labelPad:0,//文本和输入框之间的距离
  26. layout:'form',//布局方式
  27. frame:true,
  28. defaults:{//字元素默认的属性
  29. width:200
  30. },
  31. defaultType:'textfield',//默认的input类型
  32. items:[{
  33. id:'workid',
  34. cls:'user',
  35. fieldLabel:'编号',
  36. //disabled:true,
  37. allowBlank:false//是否允许为空
  38. },{
  39. id:'workname',
  40. fieldLabel:'名称',
  41. allowBlank:false
  42. }]
  44. })
  46. varwin=newExt.Window({
  47. id:'w',
  48. renderTo:bd,
  49. title:'wayfoon:新窗口',
  50. width:300,
  51. height:140,
  52. collapsible:true,//是否可折叠
  53. defaults:{
  54. //容器内元素是否显示边框
  55. border:true
  56. },
  57. //layout:'fit',
  58. layout:'column',
  59. items:[form],
  60. buttonAlign:'center',//按钮的排列方式
  61. buttons:[{//按钮写在窗口，要比写在form里面好看多了
  62. text:'确定',
  63. type:'submit',
  64. handler:function(){
  65. }
  66. }]
  67. }).show();
  70. });
  71. </script>
  72. </body>
  73. </html>

效果图：

如果你想在按钮触发时，添加事件

  1. handler:function(){
  2. alert(123);
  3. varworkid=Ext.get('workid').dom.value;
  4. alert(workid);
  5. }

下面演示一个submit登陆事件，

你也可以单独定义一个方法（调用方法，handler:login）：

  1. //单击按钮时执行登陆操作
  2. varlogin=function(){
  3. var workid=Ext.get('workid').dom.value;
    alert("wayfoon:"+workid);
  4. /**
  5. 这里可以判断输入的值是否合法，（通过类似：varworkid=Ext.get('workid').dom.value;得到值日）否则不执行下面的submit
  6. **/
  7. //执行当前表单面板的submit
  8. f.form.submit({
  9. //动作发生期间显示的文本信息
  10. //waitMsg:'正在登录......',
  11. //submit发生时指向的地址
  12. url:'/xxx/login.jsp',
  13. //表单提交方式
  14. method:'POST',
  15. //数据验证通过时发生的动作
  16. success:function(form,action){
  17. //成功的走向
  18. window.location.href='main.htm?t='+newDate();
  20. },
  21. //反之......
  22. failure:function(form,action){
  23. if(action.failureType==Ext.form.Action.SERVER_INVALID)
  24. Ext.MessageBox.alert('警告',action.result.errors.msg);
  25. }
  26. });
  27. };

login 方法要在调用之前定义好。

完整的代码如下：

  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
  2. <html>
  3. <head>
  4. <title>wayfoon:新窗口</title>
  6. <linkrel="stylesheet"type="text/css"href="http://www.bsshenghua.com/ext22/resources/css/ext-all.css"/>
  7. <scripttype="text/javascript"src="http://www.bsshenghua.com/ext22/adapter/ext/ext-base.js"></script>
  8. <scripttype="text/javascript"src="http://www.bsshenghua.com/ext22/ext-all.js"></script>
  11. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"></head>
  13. <body>
  14. <script>
  15. Ext.onReady(function(){
  16. Ext.QuickTips.init();//初始化鼠标停留时的显示框
  17. Ext.form.Field.prototype.msgTarget='side';
  18. varbd=Ext.getBody();
  20. varform=newExt.form.FormPanel({
  21. bodyStyle:'padding-top:5px',//距离窗口上端的距离
  22. id:'ll',
  23. labelWidth:50,//文本部分的宽度
  24. labelAlign:'right',//文本的排列方式
  25. labelPad:0,//文本和输入框之间的距离
  26. layout:'form',//布局方式
  27. frame:true,
  28. defaults:{//字元素默认的属性
  29. width:200
  30. },
  31. defaultType:'textfield',//默认的input类型
  32. items:[{
  33. id:'workid',
  34. cls:'user',
  35. fieldLabel:'编号',
  36. //disabled:true,
  37. allowBlank:false//是否允许为空
  38. },{
  39. id:'workname',
  40. fieldLabel:'名称',
  41. allowBlank:false
  42. }]
  44. })
  45. //单击按钮时执行登陆操作
  46. varlogin=function(){
  47. varworkid=Ext.get('workid').dom.value;
  48. alert("wayfoon:"+workid);
  49. /**
  50. 这里可以判断输入的值是否合法。否则不执行下面的submit
  51. **/
  52. //执行当前表单面板的submit
  53. form.form.submit({
  54. //动作发生期间显示的文本信息
  55. waitMsg:'正在登录......',
  56. //submit发生时指向的地址
  57. url:'/mktweb/login.jsp',
  58. //表单提交方式
  59. method:'POST',
  60. //数据验证通过时发生的动作
  61. success:function(form,action){
  62. //成功走向
  63. window.location.href='main.htm?t='+newDate();
  65. },
  66. //反之......
  67. failure:function(form,action){
  68. //reset();
  69. if(action.failureType==Ext.form.Action.SERVER_INVALID)
  70. Ext.MessageBox.alert('警告',action.result.errors.msg);
  71. }
  72. });
  73. };
  74. varwin=newExt.Window({
  75. id:'w',
  76. renderTo:bd,
  77. title:'wayfoon:新窗口',
  78. width:300,
  79. height:140,
  80. collapsible:true,//是否可折叠
  81. defaults:{
  82. //容器内元素是否显示边框
  83. border:true
  84. },
  85. //layout:'fit',
  86. layout:'column',
  87. items:[form],
  88. buttonAlign:'center',//按钮的排列方式
  89. buttons:[{//按钮写在窗口，要比写在form里面好看多了
  90. text:'确定',
  91. type:'submit',
  92. handler:login
  93. }]
  94. }).show();
  97. });
  98. </script>
  99. </body>
  100. </html>

预览效果：效果图

yangwenzhuang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ExtJS2·0入门级简明教程
02-17
ExtJS2.0实用简明教程 chm版教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS入门教程。本教程主要是针对ExtJS2.0进行介绍，全部代码、截图等都是基于ExtJS2.0。
ext中加载html,Extjs打开window窗口自动加载html网页
weixin_31869917的博客
05-31 898
Window inherits theautoLoadconfig option from Panel. Note that I included all config options below, where most are optional:var w = new Ext.Window({autoLoad: {url: "someApplicationURL",params: {first...
extjs里面 Ext.Window ,的window放一个URL从新跳转一个页面
开发小盆友的博客
08-25 1498
点击按钮触发某个弹窗function function openMap(){ var lng = Ext.getCmp('lng').getValue(); var lat = Ext.getCmp('lat').getValue(); var url="glCaseInfo.ered?reqCode=go2AMap&lng="+lng+"&lat="+lat; var wi
ExtJS 2 系列教程
llying
02-08 100
[b]如果大家对JEE的深入研究有兴趣 可以加入Q群：46176507 共同进步学习 [/b] [b]ExtJS 2 系列教程[/b] [url="http://llying.iteye.com/blog/308897"][ExtJS2.1教程-1]HelloWorld[/url] [url="http://llying.iteye.com/blog/308965"][ExtJS2.1...
Ext2.0教程一：Ext介绍以及 ext页面布局
南极光经验分享
08-27 1万+
 学习ext有一段时间了，也开发了几个项目，抽点时间做个总结，刚好公司让我做个Ext培训，于是随便写个Ext教程。 Ext介绍Ext是一个很不错的Ajax框架，可以用来开发带有华丽外观的胖客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等
Ext2.0学习入门
07-22
资源名称：Ext2.0学习入门资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
Ext2.0 中文教程
03-16
extjs是从yui-ext发展来的一套ajax控件，在下认为它是当今最好用的js控件库了，非常有学习的价值。 如果没听说过extjs或者对extjs没有兴趣，请不要继续看下去。 extjs是一套完整的富客户端解决方案，也因为功能完整...
JSP+EXt2.0实现分页的方法
10-23
主要介绍了JSP+EXt2.0实现分页的方法,涉及JavaScript结合JSP遍历及分页的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
EXT2.0中文教程
04-29
无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。本文将简单地介绍Ext的几个基本概念，和如何快速地做出一个动态的页面并运行起来，假设读者已具备了一些JavaScript经验和初级了解HTML Dom
EXT2.3+EXT2.0教程
09-19
总的来说，EXT2.0和EXT2.3教程为学习者提供了全面的EXT开发知识，包括但不限于组件使用、布局设计、数据绑定、AJAX交互等方面。配合中文手册和源码，无论是入门还是深入研究，都能为开发者提供强有力的支持。通过...
EXTJS入门教程（非常详细）
11-16
EXTJS入门教程 组件的介绍与应用 ext核心 Element：Ext的核心 获取多个DOM的节点 响应事件
ExtJs 2.2 简明教程 02 基础知识
06-18
主要内容有： 程序结构 对象简介 程序编写建议
ExtJS2实例教程教
03-12
ExtJS2实例教程教
ExtJS2.0实用简明教程——ExtJS的组件
小肖的专栏
02-23 1083
Ext2.0对框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext的控件，Ext组件是由 Component类定义，每一种组件都有一个指定的xtype属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。ExtJS中的组件体系由下图所示： 组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。基本组件有：  xtype   
ExtJs2.0学习系列(3)--Ext.Window
知 行 合 一
07-18 696
 前言：关于extjs，为了照顾还没有入门的新手，我给一点提示，有一个网站浪曦视频在线里面请了个老师录制了extjs的介绍入门的视频，环境可能不同，但原理和使用方法是一样的，绝对值得一看（如果你想入门的话），希望没有广告的意思。主站：浪曦视频在线extjs介绍及应用举例：ExtJS视频教程 第1讲 ExtJS介绍及应用举例我不知道是不是要注册，觉的好的话，就值！前面介绍了pan
EXTJS入门教程及其框架搭建
热门推荐
云淡风轻、仅此一抹
04-01 2万+
EXTJS入门教程及其框架搭建,代码下载地址:http://www.zuidaima.com/share/1724474768788480.htm
extJs 2.0学习笔记(ext.js篇)
JavaEE架构与开发
01-09 153
要是以前，我铁定整天到处找教程看，光说不练，现在觉悟了，看教程看得最多，不一定能看完，看完了不一定能比作者更明白，看明白了不一定能用得好。所以看教程其实好处不大，只能作为小小的参考。很多东西看别人的始终是没有用。只有将实验进行到底才是王道…… 　　这儿主要是代码分析。   　　研究工具： Dreamweave cs3( 装那个 extJs 2.0 插件老装不上 ...
JavaScript 音乐播放器及其源代码.zip
最新发布
07-22
项目：带有源代码的 JavaScript 音乐播放器 JavaScript 音乐播放器是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这个项目很有趣。在这里，用户可以通过单击不同颜色的图块来播放不同类型的曲调，并欣赏音乐的声音。此外，用户可以像钢琴一样使用它们来生成不同的曲调。   项目制作 音乐播放器项目仅包含 HTML、CSS 和 JavaScript。谈到该系统的功能，用户可以播放不同类型的音乐。您只需单击不同颜色的图块即可收听音乐。该项目包含大量 JavaScript，用于使项目正常运行。 如何运行该项目？ 要运行此项目，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要运行此系统，首先，通过单击 index.html 文件在浏览器中打开项目。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
学习 ExtJs2.0 教程：掌握 Ext.MessageBox 方法和参数
ext教材是一本关于ext js的教程，旨在帮助更多的人掌握这项技术。这本教材分为多个学习系列，其中第一篇介绍了Ext.MessageBox类的几个方法。 第一个方法是Ext.MessageBox.alert()，有四个参数，但为了简单起见，只...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值