`
chengyu_555
  • 浏览: 34979 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类

EXT非ajax登录页面

阅读更多
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/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',//默认字段类型
            onSubmit: Ext.emptyFn,
submit: function(){
this.getEl().dom.action = '${pageContext.request.contextPath}/web/manager/login.do'; //连接到服务器的url地址
this.getEl().dom.submit();
},
                
            //定义表单元素
            items: [{
                  fieldLabel: '帐户',
                  name: 'name',//元素名称
                  //anchor:'95%',//也可用此定义自适应宽度
                  allowBlank:false,//不允许为空
                  blankText:'帐户不能为空'//错误提示内容
               },{
                   inputType:'password',
                  fieldLabel: '密码',
                  //anchor:'95%',
                  name: 'pwd',
                  allowBlank:false,
                  blankText:'密码不能为空'
               }
            ],

            buttons: [{
               text: '登陆',
               type: 'submit',
               //定义表单提交事件
               handler:function(){simple.form.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>
分享到:
评论

相关推荐

    Ajax和Ext插件的使用

    使用Ajax技术在ExtGrid插件中展示数据,这是一个开源的JavaScript Jabber Messenger,采用Ext2.0与Prototype开发,界面比较美观

    EXT+ajax.dll 的简单实现

    Ext的界面设计非常方便,但通信起来,只有用JSON或XML等中间件来传递,存在解译成本和传递成本,WebService即要花N多安全功夫,效率也很低, 突发灵感把两者用在了一块,感觉效率上有较大提升。 该代码为入门级

    Ext.NET(基于.NET Framework 3.5的一套支持ASP.NET AJAX的Web控件)

    由于Ext.NET基于ExtJS的缘故,所以不可避免会有类似ExtJS控件运行又大又慢的毛病,但因为它界面美观,减少了很多美工的精力,你就可以省掉一大串的js代码,界面完全可以用Ext.NET简单配置就得到很炫的页面效果,使...

    Ext2.1+教程(超强的AJAX界面)

    Ext2.1+教程(超强的AJAX界面)

    Ext介绍以及_ext页面布局

    Ext是一个很不错的Ajax框架,可以用来开发带有华丽外观的胖客户端应用,使得我们的b/s应用更加具有活力及生命力,提高用户体验。ExtJS是一个用javascript编写,与后台技术无关的前端ajax框架。因此,可以把Ext用在...

    Ext界面生成器,功能强大

    Ext界面生成,功能不错!可以自动生成界面,适合Ext学习者

    EXT开发文档

    EXT绚丽多彩的界面吸引了 许多程序员的眼球,同时也吸引了众多客户,它似乎一夜之间就迅速流行开来。对于企业应用系 统,尤其是MIS类型的系统而言,EXT非常适用。 当我们第一次使用EXT时,就被它深深地吸引住了。...

    jq-extgrid v1.2 表格插件

    extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过css修改自己想要的样式 extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax...

    Ext2.2开发指南--完整翻写Ext官方网站学习指南介绍

    3. 如果看到全中文的响应页面,说明工程运行正常,参见ExtStart.js文档,有非常详细的注释说明Ext.Element类与Ext.select()选择器的使用,以及事件处理的几种使用情况,最后是Ext框架使用Ajax技术的演示部分,需要...

    Ext+JS高级程序设计.rar

    1.2 Ext Core的Ajax功能 19 1.3 DomQuery详解 20 1.4 模板介绍 23 1.5 实用功能 24 1.6 定时执行代码 25 1.7 本章小结 26 第2章 Ext Core实例系统设计 27 2.1 需求分析 27 2.2 系统设计 28 2.3 功能结构图 29 2.4 ...

    Ext 操作数据库,对数据的增删改查,包括数据库,Ajax请求和store请求的设置

    Ext框架学习,包括登录,以及登录后主页面的显示,采用美观的布局,一句对后台数据的增删改查,通过Ajax dwr异步获得数据和对store多种请求方式的分析,很适合初学者。欢迎下载

    Ext制作的布局编辑器 傻瓜式页面设计 让每个人体验Ajax的乐趣

    几行代码轻松设计漂亮Ajax,设计漂亮界面不在是难题,傻瓜是布局,拖动式控件,体验ext乐趣。

    JSP中使用EXT实现grid table

    在jsp中使用ext显示一个简单的数据表格,非常实用,以后如果要开发Ajax的页面数据表格可以直接套用,使用编码UTF-8

    Ext 开发指南 学习资料

    8.12. 回头谈一谈Ext里的ajax 9. 沉寂吧!我们要自己的控件。 9.1. 下拉树形选择框TreeField 9.2. 带全选的checkbox树形CheckBoxTree 9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. ...

    Ajax中responseText返回的是一个页面而不是一个值

    自己在struts2中的写好了业务逻辑用response返回的内容却是... 您可能感兴趣的文章:ajax的responseText乱码的问题的解决方法jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXMLAjax request response 乱码解决

    EXT2.0中文教程

    如何在页面中引用ext A.3.1. 顺便说说常见的Ext is not defined错误 A.4. 想把弹出对话框单独拿出来用的看这里 A.5. 想把日期选择框单独拿出来用的看这里 A.6. 听说有人现在还不会汉化ext A.7. 碰到使用ajax获得...

    Ext.js教程完整版

    4. 充分利用 AJAX 技术; 5. 在您的语言中展示 ExtJS 对象; 关于 Ext: 我们采用最新的的 Ext 2.x 版本, 1.x 版本到 2.x 版本的是一个重组的过程,包括 添加新的组件、重命名组件用来重新组织结构等等。这使得 1.x...

    采用ext的简单实例

    是采用ext框架设计的简单实例,ext集成了ajax,优美的设计界面成为现在小型系统项目设计的首选框架,设计简单快捷,高度集成

    Ext js 教程大全

    ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。 功能丰富,无人能出其右。 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,推拽改变列...

    Ext4.1.0中文API离线版

    资源名称:Ext4.1.0 中文API离线版内容简介:ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架Ext JS具有115多种高性能,预测试和集成的UI组件,包括日历,网格,图表等。Ext JS Grid...

Global site tag (gtag.js) - Google Analytics