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

最新推荐文章于 2023-06-17 23:14:54 发布
最新推荐文章于 2023-06-17 23:14:54 发布
阅读量3.3k 收藏
点赞数
分类专栏： web2.0/ajax ExtJS专栏 跨平台跨语言 文章标签： ext function stylesheet layout action border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wayfoon322/article/details/2842112
版权

--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>
  6.     <link rel="stylesheet" type="text/css" href="http://www.bsshenghua.com/ext22/resources/css/ext-all.css" /> 
  7.     <script type="text/javascript" src="http://www.bsshenghua.com/ext22/adapter/ext/ext-base.js"></script>
  8.     <script type="text/javascript" src="http://www.bsshenghua.com/ext22/ext-all.js"></script>
  10.     
  11. <meta http-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.         var bd = Ext.getBody();
  20.     var form =new Ext.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.         }]
  43.         
  44.     })
  46.     var win=new Ext.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();
  68.         
  70.     });
  71.     </script>
  72. </body>
  73. </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>
  6.     <link rel="stylesheet" type="text/css" href="http://www.bsshenghua.com/ext22/resources/css/ext-all.css" /> 
  7.     <script type="text/javascript" src="http://www.bsshenghua.com/ext22/adapter/ext/ext-base.js"></script>
  8.     <script type="text/javascript" src="http://www.bsshenghua.com/ext22/ext-all.js"></script>
  10.     
  11. <meta http-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.         var bd = Ext.getBody();
  20.     var form =new Ext.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.         }]
  43.         
  44.     })
  45.  // 单击按钮时执行登陆操作
  46.     var login = function(){
  47.     var workid=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='+new Date();
  64.                    
  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.     var win=new Ext.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();
  95.         
  96.     
  97.     });
  98.     </script>
  99. </body>
  100. </html>

预览效果：效果图

wayfoon  2008-08-28

 

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

Carl_YC
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJS2.0中文API珍藏版
06-15
很多人还在用Ext2.0却找不着离线版的API，这里为大家献上。 记得是运行里面的 API Documentation.exe，而不是打开index.html那么简单，否则里面的链接会失效。
ExtJs关闭面板时清空面板中的内容
翻滚吧小牛
01-13 1485
在用ExtJs写前台代码时，一些控件在关闭时需要设置他的关闭为隐藏，方便下次继续使用，但是如果用户在填写完信息后直接关闭下次打开后信息继续存在，影响用户体验。可以通过以下解决方案，设置关闭按钮的监听事件，当用户点击关闭按钮后清空对应formpanel中的数据。 下面首先看一个formPanel，实现添加用户界面。 var addUser = new Ext.form.FormPanel({
extjs Ext模态窗口、表单面板
最新发布
西京刀客
06-17 1003
⭐️来自很多年前的extjs笔记，只是一个归档，不做更新！⭐️
extjs通过单选按钮动态创建form表单
songjinwu的专栏
11-07 1124
function checkAssign(){ if(grid.getSelectionModel().getSelections().length==0){ alert('请选择一条记录'); return; } var store = new Ext.data.JsonStore({ fields:[{name:'ufcitycode'},{name:'ufcityname'}
ext window的问题（包括关闭、重复加载、清除无效）
u010204322的专栏
09-01 1583
关闭问题： 1、配置 closeAction:'hide',   ext .window右上角的XX(关闭功能)，设置成这个表示点击那时是隐藏而不是从节点中删除此组件。 2、使用window.hide()方法 。window的close是销毁，即从内存清除此window。一般不使用它 重复加载： 使用ext.window的时候，从平台菜单点击的时候。会出现里面的元素重复加载。或者里面的内容
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
EXTJS 2.0.2
07-12
EXT2.0,也就是EXTJS2.0是目前最新的技术产品,很强大的功能和完善、美观的界面，是JavaScript（JS）和JAVA用户开发WEB应用程序想要美化界面必需的插件，现打包完整，下载解压后在编写的代码中相应的调用就可以了！<br><br>具体的帮助文档请去网上查询 搜索EXTJS 或者EXT2.0使用教程即可<br><br>还有可以一起使用的开发类工具 <br>FreeMarker (www.freemarker.org)<br>JSON (www.json.org)
Extjs之form reset方法重置无效果（getForm().reset()）
绣花针
09-03 2450
自己循环setValue("")了一遍，getForm().getEl().dom.reset()；所有数据清空了下，发现效果并不是很好，清除数据是清除了，但是，所有的水印提示连带清除掉了 handler : function(){ //调用新增方法 editWindow.setTitle("新增系统菜单"); editForm.getForm().reset(); ...
Ext2.0教程一：Ext介绍以及 ext页面布局
热门推荐
南极光经验分享
08-27 1万+
 学习ext有一段时间了，也开发了几个项目，抽点时间做个总结，刚好公司让我做个Ext培训，于是随便写个Ext教程。 Ext介绍Ext是一个很不错的Ajax框架，可以用来开发带有华丽外观的胖客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等
第 2 章 震撼吧！让你知道ext表格控件的厉害。
飞鸟Blog
01-06 2458
2.1. 功能丰富，无人能出其右 无论是界面之美，还是功能之强，ext的表格控件都高居榜首。单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。再加上可编辑grid，添加新行，
ExtJS 序言一
weixin_30237281的博客
01-04 133
最近看到博客里好多关于ExtJS的不少文章，自己在网上也搜索里一些，特整理出来给初学者学习下，望大家不要介意。 1.1.一切从extjs发布包开始 非常幸运的是，我们可以免费去extjs.com下载ext发布包，里边源代码，api文档，例子一应俱全。不过要是想访问svn获得最新的代码，就要花钱了。不过我们现阶段只要这个免费的发布包就可以了，通过里边的...
Ext中创建Window窗体
曹晗的博客
09-19 3378
在Ext中应该来说Window窗体是非常重要的吧，window窗体并非Extjs独有的组件，这也是JavaScript定义的，它分属于浏览器的组件，窗体是程序和用户进行交互的可视界面，窗体也是对象，窗体定义了生成窗体的模板，实例化一个窗体类就产生了一个窗体。在window窗体中也有特别多的事件方法供我们进行使用，在现实生活中，窗口是可视化的，我们可以通过窗体用眼睛看到窗体中发生的一切，在程序世界中
ExtJS4 Ext.create弹出新窗口
祥子的博客
08-15 5284
效果图： Grid.js Ext.define('V5.user.view.Grid', { extend : 'Ext.grid.Panel', xtype : 'userGrid', tbar : [{ xtype : 'basebutton', text : '新建', btype : 'add' }, '->', { xtype : 'rse
Ext创建自定义窗口显示html内容
zhangfeng2124的专栏
06-20 5192
引入ext相关js和css，具体如何引用，这里不写了。  创建窗口代码： var win = new Ext.Window({ layout: 'fit', width: 500, height: 300, closeAction: 'hide', draggable: true, items: [{title:'窗口示例',html:'Ext简单窗
Ext窗体创建
晶谛-giserDev
12-15 426
一、通过Ext.window.Window直接创建并显示 Ext.create('Ext.window.Window', { title:"my first window", height:300, width:500, constrain:true, // 不超出浏览器边界 modal:true, // 模态窗口 icon:"../../js/extjs/icons/used/browser_window.png", x:300, y:200, autoScroll:
EXT.js xtype : 'treefield' fieldLabel不显示
06-02
如果您在 Ext.js 中使用 xtype: 'treefield'，但是 fieldLabel 不显示，您可以尝试以下解决方法： 1. 确认您的 treefield 组件是否正确定义了 fieldLabel 属性，例如： ```javascript { xtype: 'treefield', fieldLabel: 'My Tree Field', ... } ``` 2. 确认您的 treefield 组件是否正确添加到了表单（form）中，例如： ```javascript Ext.create('Ext.form.Panel', { title: 'My Form', items: [{ xtype: 'treefield', fieldLabel: 'My Tree Field', ... }] ... }); ``` 3. 确认您的表单（form）是否正确添加到了显示界面的容器（container）中，例如： ```javascript Ext.create('Ext.container.Container', { renderTo: Ext.getBody(), items: [{ xtype: 'form', title: 'My Form', items: [{ xtype: 'treefield', fieldLabel: 'My Tree Field', ... }] ... }] ... }); ``` 如果以上方法都无法解决问题，您可以尝试查看 Ext.js 的官方文档或者提供更多的代码和详细描述以便我更好地帮助您解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值