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

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

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

完整的代码如下:

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

预览效果:效果图

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值