Bookmark and Share

Lee's 程序人生

HTML CSS Javascript XML AJAX ATLAS C# C++ 数据结构 软件工程 设计模式 asp.net Java 数字图象处理 Sql 数据库
  博客园  :: 首页  :: 新随笔  :: 联系 :: 管理

嵌套窗体

Posted on 2008-06-17 15:16  analyzer  阅读(387)  评论(0)    收藏  举报
ext的窗体当然不是噱头，通过嵌套，我们可以实现很多实用的效果，看下js代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extDemo</title>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
</head>
<body>
<script>
Ext.onReady(function(){   
          //使用表单提示
          Ext.QuickTips.init();
          Ext.form.Field.prototype.msgTarget = 'side';
       
        //定义表单
          var simple = new Ext.FormPanel({
            labelWidth: 75,         
            baseCls: 'x-plain',
            defaults: {width: 150},
            defaultType: 'textfield',//默认字段类型
                 
            //定义表单元素
            items: [{
                  fieldLabel: '帐户',
                  name: 'name',//元素名称
                  //anchor:'95%',//也可用此定义自适应宽度
                  allowBlank:false,//不允许为空
                  blankText:'帐户不能为空'//错误提示内容
               },{
                   inputType:'password',
                  fieldLabel: '密码',
                  //anchor:'95%',
                  name: 'pws',
                  allowBlank:false,
                  blankText:'密码不能为空'
               }
            ],

            buttons: [{
               text: '登陆',
               type: 'submit'
            },{
               text: '取消',
               handler:function(){simple.form.reset();}//重置表单
            }]
         });   
                //定义窗体
               win = new Ext.Window({
                  id:'win',
                  title:'用户登陆',
                  layout:'fit',   //之前提到的布局方式fit，自适应布局               
                  width:300,
                  height:150,
                  plain:true,
                  bodyStyle:'padding:5px;',
                  maximizable:false,//禁止最大化
                  closeAction:'close',
                  closable:false,//禁止关闭
                  collapsible:true,//可折叠
                  plain: true,
                  buttonAlign:'center',
                  items:simple//将表单作为窗体元素嵌套布局
               });
               win.show();//显示窗体
                             
       });
</script>
</body>
</html>


图片