`

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

EXTCSSJavaScriptprototypeHTML 
阅读更多

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

预览效果：效果图

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ext2.0官方文档(chm),Ext 2.0 简明教程,Ext2经典应用

    3. **EXT2.0中文教程.exe**: 这可能是一个以可执行文件（.exe）形式的中文教学程序，对于中文用户来说非常友好。它可能包含了视频教程、交互式示例或者图文并茂的讲解，帮助学习者更直观地理解Ext 2.0的用法和功能。...

    ext-2.0 ext-2.0 ext-2.0 ext-2.0 ext-2.0

    ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0

    最新的ext2.0下载

    EXT2.0是EXT框架的一个重要升级版本，它在EXT1.0的基础上进行了大量的改进和增强，提供了更为丰富的组件、优化的性能以及更美观的界面效果。 EXT2.0的核心特性包括： 1. **组件库增强**：EXT2.0扩展了原有的组件库...

    EXT2.0中文教程

    EXT2.0中文教程是一个专为Windows用户设计的教育资源，旨在帮助用户理解和操作EXT2.0文件系统。EXT2.0是Linux操作系统中早期广泛使用的日志式文件系统，它在1993年由Rene Rebe开发，作为EXT1的升级版。EXT2.0在性能...

    ext2.0官方文档

    6. **文件权限与所有权**：EXT2.0遵循Unix的权限模型，支持用户、用户组以及其他人三种权限，以及读、写和执行操作。 7. **软链接和硬链接**：EXT2.0支持软链接（符号链接）和硬链接，前者是一个指向另一个文件的...

    ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记

    ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记...

    EXT2.3+EXT2.0教程

    总的来说，EXT2.0和EXT2.3教程为学习者提供了全面的EXT开发知识，包括但不限于组件使用、布局设计、数据绑定、AJAX交互等方面。配合中文手册和源码，无论是入门还是深入研究，都能为开发者提供强有力的支持。通过...

    ext2.0（jsp标签）

    1. **组件化**：EXT 2.0中的所有元素都是组件，如窗口、面板、表格、表单、菜单等，这些组件可以相互组合，构建出各种复杂的界面结构。组件具有独立的生命周期和事件处理机制，方便复用和维护。 2. **数据绑定**：...

    Ext2.0 中文教程

    extjs是从yui-ext发展来的一套ajax控件，在下认为它是当今最好用的js控件库了，非常有学习的价值。 如果没听说过extjs或者对extjs没有兴趣，请不要继续看下去。 extjs是一套完整的富客户端解决方案，也因为功能完整...

    EXT2.0中文教程、ExtJS 实用简明教程

    对于初次接触EXT的开发者，建议先从EXT2.0中文教程开始，逐步了解EXT的基本概念和使用方式，然后再通过ExtJS实用简明教程和开发指南深入学习，提升开发技能。在实践中不断探索和学习，能够更好地掌握EXT这一强大的...

    Ext2.0教程与实例 开发与实践笔记

    这个教程和实例集主要涵盖了Ext2.0的基础知识、开发技巧以及实践应用，旨在帮助开发者快速掌握这一技术。 首先，让我们关注"Ext2.0的入门小实例"。这个部分可能包括了创建基本的用户界面元素，如窗口（Windows）、...

    Ext2.0中文文档

    1. **组件化**：Ext 2.0基于组件的设计思想，允许开发者通过组合各种小部件来构建复杂的用户界面。这些组件可以是按钮、表单、面板、窗口等，每个组件都有其特定的功能和样式，可以单独使用或与其他组件组合。 2. *...

    EXT2.0 简明教程.rar

    EXT2.0 简明教程 EXT2.0 是Linux操作系统中的一种文件系统，它在1993年由Rene Rebeau开发，并作为EXT（第二扩展文件系统）的改进版发布。EXT2.0在当时是Linux社区广泛使用的标准文件系统之一，尤其在早期的Linux...

    EXT2.0简明教程

    EXT2.0简明教程是针对EXT JavaScript库的一个学习资源，EXT js是一个强大的前端开发框架，主要用于构建富互联网应用程序（RIA）。EXT2.0在当时是EXT库的一个重要版本，提供了许多新的特性和改进，使得开发者能够更...

    Ext 2.0 简明教程

    1. **组件化**：Ext 2.0的核心是其组件模型，它允许开发者通过组合各种预定义的UI组件来构建复杂的用户界面。这些组件包括按钮、表单、面板、树视图、网格等，可以灵活地进行定制和扩展。 2. **数据绑定**：Ext 2.0...

    Ext2.0 中文文档

    EXT2.0的学习路径建议从基本的Element操作和事件处理开始，逐步掌握Widgets的使用，然后深入到Ajax和数据管理，最后研究源码以提升对EXT框架的整体理解。通过实践和查阅相关资源，如推荐的中文网站和书籍，可以加快...

Magicbox
Global site tag (gtag.js) - Google Analytics