logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

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

 Ethan的博客 2011-07-04

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

2009-05-20 10:37 310人阅读 评论(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>

  6.     <link rel="stylesheet" type="text/css" href="http://www./ext22/resources/css/ext-all.css" /> 
  7.     <script type="text/javascript" src="http://www./ext22/adapter/ext/ext-base.js"></script>
  8.     <script type="text/javascript" src="http://www./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./ext22/resources/css/ext-all.css" /> 
  7.     <script type="text/javascript" src="http://www./ext22/adapter/ext/ext-base.js"></script>
  8.     <script type="text/javascript" src="http://www./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>

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： Ethan的博客 > 《javaWeb》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多