- 浏览: 335068 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
zuoguoyao:
版主,有没有 ext数据互动的。。教程
Ext2.0教程一:Ext介绍以及 ext页面布局 -
NineInchNails:
谢谢分享:D
Ext2.0教程一:Ext介绍以及 ext页面布局 -
风雨故都:
liuming
ext 多文件上传控件 Ext.ux.UploadDialog 使用中的问题 -
yanjiarui:
下必须能下,就是卡了点
oracle11g下载Oracle 10g下载 Oracle 9i 下载 -
coolbaby1984514:
public int findMonkey(int n, in ...
约瑟夫问题 java
--wayfoon
开发中,通常需要新建窗口,比如登陆窗口,新增窗口。
新建窗口使用到Ext.Window提供的类,
你可以先预览效果:效果图
建立一个简单的窗口:
- var win=new Ext.Window({
- id:'w',
- title:'wayfoon:新窗口',//窗口显示名称
- width:300,
- height:140,
- collapsible: true,//是否可折叠
- layout : 'column',//布局方式
- items:[]//窗口需要增加的内容
- }).show();//让窗口显示出来
上面只定义了窗口的名称、长、宽、布局方式,其他属性之后详细描述。你可以在items里面增加你需要的内容。
比如你可以直接在items里面添加html代码:
- items:[{
- xtype : 'panel',//html代码容器
- html : "姓名:<input type='text' name='wayfoon' onclick='javascript:alert(wayfoon)'/>"
- }]
在这里,我将演示添加一个form表单。
先新建一个form。
form由Ext.form.FormPanel定义
一个标准的form定义
- var from =new Ext.form.FormPanel({
- bodyStyle : 'padding-top:5px',//距离窗口上端的距离
- id:'f',
- labelWidth:50,//文本部分的宽度
- labelAlign:'right',//文本的排列方式
- labelPad : 0,//文本和输入框之间的距离
- layout:'form',//布局方式
- frame : true,
- defaults:{//字元素默认的属性
- width:200
- },
- defaultType:'textfield',//默认的input 类型
- items:[{
- id:'workid',
- cls : 'user',
- fieldLabel:'编号',
- //disabled:true,
- allowBlank:false//是否允许为空
- },{
- id:'workname',
- fieldLabel:'名称',
- allowBlank:false
- }],
- buttonAlign:'center',//按钮的排列方式
- buttons:[{//按钮写在窗口,要比写在form里面好看多了
- text:'确定',
- type:'submit',
- handler:function(){//点击触发事件处理
- }
- }]
- //这里不需要逗号,每个控件定义都是这样的
- })
现在可以将form加入到窗口中,items:[form] 就可以!
这样显示的窗口不是很美观,我们可以做些调整。将按钮放到表单之外,也就是放在窗口下面。
这样,修改之后的窗口,
- var win=new Ext.Window({
- id:'w',
- renderTo: bd,
- title:'wayfoon:新窗口',
- width:300,
- height:140,
- collapsible: true,//是否可折叠
- defaults :{
- // 容器内元素是否显示边框
- border : true
- },
- //layout:'fit',
- layout : 'column',//布局方式
- items:[form],//包含表单,多个用逗号隔开
- buttonAlign:'center',//按钮的排列方式
- buttons:[{//按钮写在窗口,要比写在form里面好看多了
- text:'确定',
- type:'submit',
- handler:function(){
- }
- }]
- }).show();
一个新窗口,基本完成!
可以将下面代码保存成*.htm执行。
所有代码:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <title> wayfoon:新窗口 </title>
- <link rel="stylesheet" type="text/css" href="http://www.bsshenghua.com/ext22/resources/css/ext-all.css" />
- <script type="text/javascript" src="http://www.bsshenghua.com/ext22/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="http://www.bsshenghua.com/ext22/ext-all.js"></script>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
- <body>
- <script>
- Ext.onReady(function(){
- Ext.QuickTips.init();//初始化鼠标停留时的显示框
- Ext.form.Field.prototype.msgTarget = 'side';
- var bd = Ext.getBody();
- var form =new Ext.form.FormPanel({
- bodyStyle : 'padding-top:5px',//距离窗口上端的距离
- id:'ll',
- labelWidth:50,//文本部分的宽度
- labelAlign:'right',//文本的排列方式
- labelPad : 0,//文本和输入框之间的距离
- layout:'form',//布局方式
- frame : true,
- defaults:{//字元素默认的属性
- width:200
- },
- defaultType:'textfield',//默认的input 类型
- items:[{
- id:'workid',
- cls : 'user',
- fieldLabel:'编号',
- //disabled:true,
- allowBlank:false//是否允许为空
- },{
- id:'workname',
- fieldLabel:'名称',
- allowBlank:false
- }]
- })
- var win=new Ext.Window({
- id:'w',
- renderTo: bd,
- title:'wayfoon:新窗口',
- width:300,
- height:140,
- collapsible: true,//是否可折叠
- defaults :{
- // 容器内元素是否显示边框
- border : true
- },
- //layout:'fit',
- layout : 'column',
- items:[form],
- buttonAlign:'center',//按钮的排列方式
- buttons:[{//按钮写在窗口,要比写在form里面好看多了
- text:'确定',
- type:'submit',
- handler:function(){
- }
- }]
- }).show();
- });
- </script>
- </body>
- </html>
效果图:
如果你想在按钮触发时,添加事件
- handler:function(){
- alert(123);
- var workid=Ext.get('workid').dom.value;
- alert(workid);
- }
下面演示一个submit登陆事件,
你也可以单独定义一个方法(调用方法,handler:login):
- // 单击按钮时执行登陆操作
- var login = function(){
- var workid=Ext.get('workid').dom.value;
alert("wayfoon:"+workid); - /**
- 这里可以判断输入的值是否合法,(通过 类似:var workid=Ext.get('workid').dom.value;得到值日)否则不执行下面的submit
- **/
- // 执行当前表单面板的submit
- f.form.submit({
- // 动作发生期间显示的文本信息
- //waitMsg : '正在登录......',
- // submit发生时指向的地址
- url : '/xxx/login.jsp',
- // 表单提交方式
- method : 'POST',
- // 数据验证通过时发生的动作
- success : function(form, action){
- //成功的走向
- window.location.href = 'main.htm?t='+new Date();
- },
- // 反之......
- failure : function(form, action){
- if (action.failureType == Ext.form.Action.SERVER_INVALID)
- Ext.MessageBox.alert('警告', action.result.errors.msg);
- }
- });
- };
login 方法要在调用之前定义好。
完整的代码如下:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <title> wayfoon:新窗口 </title>
- <link rel="stylesheet" type="text/css" href="http://www.bsshenghua.com/ext22/resources/css/ext-all.css" />
- <script type="text/javascript" src="http://www.bsshenghua.com/ext22/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="http://www.bsshenghua.com/ext22/ext-all.js"></script>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
- <body>
- <script>
- Ext.onReady(function(){
- Ext.QuickTips.init();//初始化鼠标停留时的显示框
- Ext.form.Field.prototype.msgTarget = 'side';
- var bd = Ext.getBody();
- var form =new Ext.form.FormPanel({
- bodyStyle : 'padding-top:5px',//距离窗口上端的距离
- id:'ll',
- labelWidth:50,//文本部分的宽度
- labelAlign:'right',//文本的排列方式
- labelPad : 0,//文本和输入框之间的距离
- layout:'form',//布局方式
- frame : true,
- defaults:{//字元素默认的属性
- width:200
- },
- defaultType:'textfield',//默认的input 类型
- items:[{
- id:'workid',
- cls : 'user',
- fieldLabel:'编号',
- //disabled:true,
- allowBlank:false//是否允许为空
- },{
- id:'workname',
- fieldLabel:'名称',
- allowBlank:false
- }]
- })
- // 单击按钮时执行登陆操作
- var login = function(){
- var workid=Ext.get('workid').dom.value;
- alert("wayfoon:"+workid);
- /**
- 这里可以判断输入的值是否合法。否则不执行下面的submit
- **/
- // 执行当前表单面板的submit
- form.form.submit({
- // 动作发生期间显示的文本信息
- waitMsg : '正在登录......',
- // submit发生时指向的地址
- url : '/mktweb/login.jsp',
- // 表单提交方式
- method : 'POST',
- // 数据验证通过时发生的动作
- success : function(form, action){
- //成功走向
- window.location.href = 'main.htm?t='+new Date();
- },
- // 反之......
- failure : function(form, action){
- // reset();
- if (action.failureType == Ext.form.Action.SERVER_INVALID)
- Ext.MessageBox.alert('警告', action.result.errors.msg);
- }
- });
- };
- var win=new Ext.Window({
- id:'w',
- renderTo: bd,
- title:'wayfoon:新窗口',
- width:300,
- height:140,
- collapsible: true,//是否可折叠
- defaults :{
- // 容器内元素是否显示边框
- border : true
- },
- //layout:'fit',
- layout : 'column',
- items:[form],
- buttonAlign:'center',//按钮的排列方式
- buttons:[{//按钮写在窗口,要比写在form里面好看多了
- text:'确定',
- type:'submit',
- handler:login
- }]
- }).show();
- });
- </script>
- </body>
- </html>
预览效果:效果图
wayfoon 2008-08-28
教程下载地址:http://download.csdn.net/source/594644
发表评论
-
Ext FormPanel submit 提交与Ext.Ajax.request提交的区别 深究
2008-12-12 12:36 1373前置: 后台成功返回字符串:{success:true, ... -
ext 多文件上传控件 Ext.ux.UploadDialog 使用中的问题
2008-12-17 17:07 5408Ext.ux.UploadDialog 像ext一样展现给用户 ... -
Ext2.0教程一:Ext介绍以及 ext页面布局
2008-08-27 09:18 5786学习ext有一段时间了,也开发了几个项目,抽点时间做个总结 ... -
Ext2.0教程下载_ppt版
2008-09-11 23:35 2899下载地址:http://download.csdn.ne ... -
Ext2.0:Ext登陆窗口代码
2008-07-10 10:04 3749Ext登陆窗口代码,关键 ... -
Ext2.0:Json 介绍以及与xml的区别
2008-07-10 12:36 1283wayfoon: 学习ext 必须要 ... -
Ext中的get、getDom、getCmp、getBody、getDoc的区别
2008-07-11 11:20 3882Ext中包含了几个以get开头的方法,这些方法可以用来得到文档 ... -
Ext.data.Store介绍
2008-07-11 12:06 5461store是一个为Ext器件提供record对象的存储容器,行 ... -
Javascript的调试:Firebug安装与使用详解
2008-07-11 14:56 23504Javascript的调试,是开发Web应用尤其是AJAX ... -
EXT2.0: GridPanel 分页方法绝好例子
2008-07-15 11:17 6495EXT2.0: GridPanel 分页方法绝好例子 将代码保 ... -
Ext.form.ComboBox 属性详解及使用方法介绍和级联使用
2008-07-18 11:22 27025Ext.form.ComboBox 属性详解(见注释)及使用方 ... -
EXT:按条件查询再分页
2008-07-23 15:12 2779问题描述:使用ext 中的分页控件 Ext.grid.Gri ... -
Ext2.0:ext2.0 Alpha 1 版本的bug问题
2008-08-07 10:50 1576ext2.0 Alpha 1 版本 版本 ... -
Ext2.2:ext最新版2.2发布
2008-08-07 14:23 9218Ext2.2正式发布了,刚下载体验了下。 在ext官方网上下 ...
相关推荐
ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记...
ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0
extjs是从yui-ext发展来的一套ajax控件,在下认为它是当今最好用的js控件库了,非常有学习的价值。 如果没听说过extjs或者对extjs没有兴趣,请不要继续看下去。 extjs是一套完整的富客户端解决方案,也因为功能完整...
1.1. 一切从extjs发布包开始 1.2. 看看ext-1.1.1的文档 1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总找不到图片 1.6. 我们还需要什么?...
EXT2.0中文教程 EXT2.0中文教程 EXT2.0中文教程
Ext2.0实用简明教程.pdf
ext2.0官方文档(chm),Ext 2.0 简明教程,Ext2经典应用
Ext2.0 中文文档。
这是一部Ext2.0的入门级教程,适合那些刚开始学习和研究Ext2.0的人员
语言很幽默的一本EXT 2.0基础知识教程,想进军AJAX的朋友可以参考一下,主要说些基本性的东西。
资源名称:Ext2.0学习入门资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
在网上搜索了一大篇,终于找到啦,不敢独享,现发出来,希望能帮到大家EXT2.0 中文API
Ext 2.0 框架结构图 Ext.Component ,Ext.BoxComponent ,Ext.Button, Ext.Editor
公司同事给我的一个EXT教程,希望对学习EXT的朋友有所帮助
ext是一个强大的js类库,以前是基于YAHOO-UI,现在已经完全独立了。附件内包括了:《EXT2.0简明教程》CHM版本 和 《ext基础教程》DOC版本。