`

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

阅读更多

--wayfoon

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

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

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

建立一个简单的窗口:

  1. var win=new Ext.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 : "姓名:<input type='text' name='wayfoon' onclick='javascript:alert(wayfoon)'/>"
  4. }]

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

先新建一个form。

form由Ext.form.FormPanel定义

一个标准的form定义

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

效果图:

 

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

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

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

你也可以单独定义一个方法(调用方法,handler:login):

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

预览效果:效果图

wayfoon  2008-08-28

 

教程下载地址:http://download.csdn.net/source/594644

分享到:
评论

相关推荐

    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框架的整体理解。通过实践和查阅相关资源,如推荐的中文网站和书籍,可以加快...

Global site tag (gtag.js) - Google Analytics