EXTJS初级UI设计进阶教程（3）

最新推荐文章于 2019-04-11 18:08:13 发布
最新推荐文章于 2019-04-11 18:08:13 发布
阅读量1.1k 收藏
点赞数
分类专栏： ExtJs学习

转自：http://blog.youkuaiyun.com/yu624774720hua/article/details/6556864

初级login.html

[xhtml]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>注册</title>  
  7. <mce:script type="text/javascript" src="../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  8. <mce:script type="text/javascript" src="../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  9. <mce:script type="text/javascript" src="../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  10. <mce:script type="text/javascript"><!--  
  11.       
  12.     Ext.onReady(function(){  
  13.       
  14.         new Ext.Window({  
  15.                 title:"添加人员",  
  16.                 width:500,  
  17.                 height:350,  
  18.                 plain:true,  
  19.                 layout:"form",  
  20.                 labelWidth:59,  
  21.                 defaultType:"textfield",  
  22.                 items:[{  
  23.                     xtype:"panel",  
  24.                     baseCls:"x-plain",  
  25.                     style:"padding:5px",  
  26.                     layout:"column",  
  27.                     items:[{  
  28.                         columnWidth:.5,  
  29.                         layout:"form",  
  30.                         labelWidth:55,  
  31.                         defaultType:"textfield",  
  32.                         defaults:{width:160},  
  33.                         baseCls:"x-plain",  
  34.                         items:[{  
  35.                             fieldLabel:"姓名"  
  36.                         },{  
  37.                             fieldLabel:"年龄"  
  38.                         },{  
  39.                             fieldLabel:"出生日期"  
  40.                         },{  
  41.                             fieldLabel:"联系电话"  
  42.                         },{  
  43.                             fieldLabel:"手机号码"  
  44.                         },{  
  45.                             fieldLabel:"电子邮件"  
  46.                         },{  
  47.                             fieldLabel:"性别"  
  48.                         }]  
  49.                     },{  
  50.                         columnWidth:.5,  
  51.                         layout:"form",  
  52.                         labelWidth:55,  
  53.                         baseCls:"x-plain",  
  54.                         items:{  
  55.                             xtype:"textfield",  
  56.                             fieldLabel:"个人照片",  
  57.                             width:170,  
  58.                             height:177,  
  59.                             inputType:"image"  
  60.                         }  
  61.                     }]  
  62.                 },{  
  63.                     fieldLabel:"身份证号",  
  64.                     width:400  
  65.                 },{  
  66.                     fieldLabel:"具体地址",  
  67.                     width:400  
  68.                 },{  
  69.                     fieldLabel:"职位"  
  70.                 }],  
  71.                 showLock:false,  
  72.                 listeners:{  
  73.                     "show":function(_window){  
  74.                                       
  75.                                     if(!_window["showLock"]){  
  76.                                       
  77.                                         _window.findByType("textfield")[7].getEl().dom.src = "default_pic.gif" ;  
  78.                                           
  79.                                         _window["showLock"] = true;  
  80.                                       
  81.                                     }  
  82.                              }  
  83.                 },  
  84.                 buttons:[{  
  85.                     text:"确定",  
  86.                     handler:function(){  
  87.                       
  88.                         alert(this.ownerCt.buttons[1].text) ;  
  89.                       
  90.                     }  
  91.                 },{  
  92.                     text:"取消"  
  93.                 }]  
  94.             }).show() ;  
  95.               
  96.     }) ;  
  97.       
  98. // --></mce:script>  
  99. </head>  
  100. <body>  
  101. </body>  
  102. </html>  
 

 

高级login.html

[javascript]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>注册</title>  
  7. <mce:script type="text/javascript" src="../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  8. <mce:script type="text/javascript" src="../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  9. <mce:script type="text/javascript" src="../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  10. <mce:script type="text/javascript"><!--  
  11.       
  12.     Ext.onReady(function(){  
  13.       
  14.         new Ext.Window({  
  15.                 title:"添加人员",  
  16.                 width:510,  
  17.                 height:360,  
  18.                 plain:true,  
  19.                 layout:"form",  
  20.                 labelWidth:59,  
  21.                 defaultType:"textfield",  
  22.                 defaults:{anchor:"95%"},  
  23.                 items:[{  
  24.                     xtype:"panel",  
  25.                     baseCls:"x-plain",  
  26.                     style:"padding:5px",  
  27.                     layout:"column",  
  28.                     items:[{  
  29.                         columnWidth:.5,  
  30.                         layout:"form",  
  31.                         labelWidth:55,  
  32.                         defaultType:"textfield",  
  33.                         defaults:{width:160},  
  34.                         baseCls:"x-plain",  
  35.                         items:[{  
  36.                             fieldLabel:"姓名"  
  37.                         },{  
  38.                             fieldLabel:"年龄",  
  39.                             value:28,  
  40.                             readOnly:true  
  41.                         },{  
  42.                             xtype:"datefield",  
  43.                             format:"Y-m-d",  
  44.                             value:"1981-10-18",  
  45.                             readOnly:true,  
  46.                             fieldLabel:"出生日期",  
  47.                             listeners:{  
  48.                                 "blur":function(_df){  
  49.                                       
  50.                                     var _age = _df.ownerCt.findByType("textfield")[1] ;  
  51.                                       
  52.                                     _age.setValue(new Date().getFullYear() - _df.getValue().getFullYear() + 1) ;  
  53.                                 }  
  54.                             }  
  55.                         },{  
  56.                             fieldLabel:"联系电话"  
  57.                         },{  
  58.                             fieldLabel:"手机号码"  
  59.                         },{  
  60.                             fieldLabel:"电子邮件"  
  61.                         },{  
  62.                             xtype:"combo",  
  63.                             fieldLabel:"性别",  
  64.                             mode :"local",  
  65.                             displayField :"sex",  
  66.                             readOnly:true,  
  67.                             triggerAction : "all",  
  68.                             value:"男",  
  69.                             store:new Ext.data.SimpleStore({  
  70.                                             fields:["sex"],  
  71.                                             data:[["男"] , ["女"]]  
  72.                                       })  
  73.                         }]  
  74.                     },{  
  75.                         columnWidth:.5,  
  76.                         layout:"form",  
  77.                         labelWidth:55,  
  78.                         baseCls:"x-plain",  
  79.                         items:{  
  80.                             xtype:"textfield",  
  81.                             fieldLabel:"个人照片",  
  82.                             width:170,  
  83.                             height:177,  
  84.                             inputType:"image"  
  85.                         }  
  86.                     }]  
  87.                 },{  
  88.                     fieldLabel:"身份证号",  
  89.                     width:400  
  90.                 },{  
  91.                     fieldLabel:"具体地址",  
  92.                     width:400  
  93.                 },{  
  94.                     fieldLabel:"职位"  
  95.                 }],  
  96.                 showLock:false,  
  97.                 listeners:{  
  98.                     "show":function(_window){  
  99.                                       
  100.                                     if(!_window["showLock"]){  
  101.                                       
  102.                                         _window.findByType("textfield")[5].getEl().dom.src = "default_pic.gif" ;  
  103.                                           
  104.                                         _window["showLock"] = true;  
  105.                                       
  106.                                     }  
  107.                              }  
  108.                 },  
  109.                 buttons:[{  
  110.                     text:"确定",  
  111.                     handler:function(){  
  112.                       
  113.                         alert(this.ownerCt.buttons[1].text) ;  
  114.                       
  115.                     }  
  116.                 },{  
  117.                     text:"取消"  
  118.                 }]  
  119.             }).show() ;  
  120.               
  121.     }) ;  
  122.       
  123. // --></mce:script>  
  124. </head>  
  125. <body>  
  126. </body>  
  127. </html>  
 

 

login界面

 

twoTextFieldLoginWindow.html

[xhtml]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>登陆窗体</title>  
  7. <mce:script type="text/javascript" src="../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  8. <mce:script type="text/javascript" src="../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  9. <mce:script type="text/javascript" src="../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  10. <mce:script type="text/javascript"><!--  
  11.       
  12.     Ext.onReady(function(){  
  13.       
  14.         var _window = new Ext.Window({  
  15.                             title:"测试窗体",  
  16.                             layout:"form",  
  17.                             width:300,  
  18.                             plain:true,  
  19.                             items:[{  
  20.                                 xtype:"textfield",  
  21.                                 fieldLabel:"姓名"  
  22.                             },{  
  23.                                 xtype:"textfield",  
  24.                                 fieldLabel:"密码"  
  25.                             }],  
  26.                               
  27.                             buttons:[{  
  28.                                 text:"确定",  
  29.                                 handler:function(){  
  30.                                   
  31.                                     var _coll = this.ownerCt.items ;  
  32.                                       
  33.                                     var _temp = "" ;  
  34.                                   
  35.                                     _temp += "姓名是:" + _coll.first().getValue() ;  
  36.                                       
  37.                                     _temp += "密码是:" + _coll.itemAt(1).getValue() ;  
  38.                                       
  39.                                     alert(_temp) ;  
  40.                                   
  41.                                 }  
  42.                             }]  
  43.                       }) ;  
  44.                         
  45.         _window.show() ;  
  46.               
  47.     }) ;  
  48.       
  49. // --></mce:script>  
  50. </head>  
  51. <body>  
  52. </body>  
  53. </html>  
 

extjs3.3教程，extjs3.3教程.中文教程
04-24
extjs3.3教程.中文教程。程序员福利。
Extjs FineUI开发框架 FineOffice框架 OA源码
01-05
ExtJS FineUI 开发框架与 FineOffice 框架是两个在企业级Web应用开发中常用的工具，尤其在构建OA（办公自动化）系统时。本文将深入探讨这两个框架及其在OA源码中的应用。 首先，ExtJS是一个强大的JavaScript库，...
教你创建Ext UI控件（转载）
hzylyl2402的专栏
04-19 355
使用ExtJs创建新的UI控件 此文档介绍了怎么在ExtJS 2.x的库中，把现有类的能力扩展为新的用户界面控件。如果阁下想就此文进行讨论，请到论坛的帖子。 组合或扩展 当创建一个新类，往往要作出这么的一个选择：要么拥有某个工具类的实例来扮演首要的角色，要么扩展那个类。 使用ExtJs过程中，推荐从最靠近的基类开始扩展，实现所需的功能即可。这是因为Ext提供的自动生存周期引入了自动...
EXTJS初级UI设计进阶教程（2）
codeStone
02-21 1168
转自：http://blog.csdn.net/yu624774720hua/article/details/6556799 了解Ext.Window   1、主要配置项：        closable：是否允许关闭窗口，默认为true。        closeAction：关闭窗口的动作，包括以下两种：              close：从DOM删除窗口，
EXTJS初级UI设计进阶阶段
u010724583的专栏
09-14 893
了解Ext.Button 说明：该组件代替了传统submit、reset、button HTML控件 Ext.onready(function(){ var -button = new Ext.Button( renderTo:Ext.getBody()， text:"确定"， miniWidth:100, handler:function(){             
ExtJS初级UI设计进阶教程(1)-Ext.Button
qqbwww的专栏
06-29 159
取自dojochina视频教程PPT     了解Ext.Button 说明：该组件代替了传统submit,reset,button HTML控件。 构造参数：  text:按钮上的名称  属性：   -text:获得当前按钮上的名称   -minWidth:按钮的最小宽度  方法：   -setText:设置按钮上的名称  事件：    -click：当点击按钮时触发 ...
初级程序员进阶之路
sinat_16790541的专栏
07-27 804
月光博客6月12日发表了《写给新手程序员的一封信》，翻译自《An open letter to those who want to start programming》，我的朋友（他在本站的id是Mailper）告诉我，他希望在酷壳上看到一篇更具操作性的文章。因为他也是喜欢编程和技术的家伙，于是，我让他把他的一些学习Python和Web编程的一些点滴总结一下。于是他给我发来了一些他的心得和经历
ExtJs从入门到精通(1)
Keyboard Knight
07-27 369
一、Web程序的革命 CGI Java Applet Flash Web Start AJAX RIA 基于Flex、Sliverlight   二、学习ExtJs的前提 JavaScript JSON       （减肥的XML数据传送模式） HTML DOM   (1) Component 组件 (2) Class 类 数据支持类（data）,拖放支持类(dd...
ExtJs应用
10-25 148
http://yitong.xiaodoutao.com/ ExtJs是一种Ajax的框架 1、基于javaScript语言 2、基于java Swing的MVC架构 3、支持组件化，模块化设计，提供本地数据源的支持，可绑定到控件上。 4、完善与服务端的交互机制。 ---------------------------------------------------------...
JAVA这门语言 如何从刚毕业的小菜鸟进阶成月薪15K以上的工程师
当富网络
04-11 8343
岁月不饶人，时间总是从不经意的指缝间流逝，越来越觉得，朝九晚五，晚上回来，一两个钟的时间，是非常宝贵的自我增长知识的机会。 从14年到如今，加上大学4年，不知不觉已经接触8年多了，觉得这门语言很好玩，啥都能搞，平时自己想弄点好玩的东西，都能拿它来玩起来。 所以，我们要学会，学好，喜欢上这门语言，一但在这门语言上有一定功底，再平行学习其他语言，如python、ruby、golang、swift、kotiln等语言，基本也就是了解，然后再下源码学习，就能上手。 全套java视频文档+企业级源码
编程语言--进阶之路
yAodoNg_y的专栏
10-13 889
如果想成为一个好的程序员，甚至架构师、技术总监等，显然只精通一种编程语言是不够的，还应该在常见领域学会几门编程语言，正如我们要成为高级人才不仅要会中文还要会英文，甚至还要会德文、俄文一样，其实是每一种语言都给人另一种思维方式，编程语言也一样。 汇编语言    每种架构CPU都有自己的汇编语言，如果不涉及很底层的修改，了解X86的即可，理解一下机器语言的工作方式，便于优化核心代码。 C
extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_
09-29
在“extjs流程界面设计器参考”中，我们主要关注的是如何利用ExtJS来开发工作流设计器。 工作流设计器是一种工具，它允许用户通过图形化界面定义、修改和执行业务流程。基于ExtJS的工作流设计器，利用了ExtJS的强大...
基于ExtJS2.0的PHP CURD设计源码及SQL文件新手入门教程
09-29
9个PSD设计文件指的是Photoshop的设计文件，通常用于界面设计，但在此教程中，它们可能用作界面设计的参考。1个Git忽略文件，即.gitignore，用于指导Git版本控制工具忽略特定文件和目录，避免将它们添加到版本库中。...
FineUI_v3.2.0_source_all.zip_extjs 6_fineui_opera_web UI CSHARP
09-19
FineUI - 基于 ExtJS 的专业 ASP.NET 2.0 控件库，拥有完善的 AJAX 支持和丰富的界面效果 FineUI 是一组基于 ExtJS 的专业 ASP.NET 2.0 控件库，拥有完善的 AJAX 支持和丰富的界面效果。 FineUI 是为了创建没有 ...
基于Django花卉商城系统的设计与实现-2885fb37-.zip
04-16
基于Django花卉商城系统的设计与实现_2885fb37--.zip
102页-智慧农业解决方案.pdf
最新发布
04-16
智慧农业，作为现代农业的新篇章，正引领着农业生产的革命性变革。本解决方案以物联网、云计算、大数据等先进技术为核心，为农业生产打造了一套全面、智能的管理系统。 想象一下，从温室大棚到广袤田野，智能传感器遍布每个角落，它们能实时感知空气温湿度、土壤水分、光照强度等环境参数，仿佛为农作物装上了“眼睛”和“耳朵”。这些数据通过物联网技术传输到云端，经过大数据分析，为农民提供精准的种植建议，如何时灌溉、施肥、防虫，让农业生产变得更加科学、高效。 更有趣的是，通过智慧农业平台，农民可以远程监控作物生长情况，甚至用手机就能控制温室大棚的遮阳板、通风设备等，实现“指尖上的农业”。此外，方案还包含了农产品可追溯系统，从田间到餐桌，每一步都可追溯，让消费者吃得放心。而智慧农业电商平台，则让农产品销售更加便捷，农民直接对接市场，收益倍增。 总之，这套智慧农业解决方案不仅让农业生产变得更加智能、高效，还提升了农产品的质量和安全，为农民带来了实实在在的收益，开启了农业现代化的新篇章。 对于想要投身智慧农业领域的你来说，这不仅仅是一套解决方案，更是一把开启现代农业大门的钥匙，引领你走向更加辉煌的未来。
【人工智能模型部署】DeepSeek本地部署与WebUI可视化：环境搭建、模型启动及界面开发指南文档的主要内容
04-16
内容概要：本文档详细介绍了DeepSeek本地部署与WebUI可视化的一般步骤。本地部署方面，涵盖了环境准备（硬件要求如多核CPU、8GB以上内存或带适当显存的NVIDIA GPU，软件环境涵盖操作系统如Ubuntu 20.04及以上版本、Python环境及依赖库如PyTorch或TensorFlow）、获取DeepSeek模型代码和权重（通过官方仓库克隆代码，从指定渠道下载权重）、模型配置与启动（配置模型参数，运行启动脚本以初始化模型和服务）。WebUI可视化部分则推荐了Streamlit和Gradio两种框架，介绍了它们的安装、使用方法（通过编写脚本调用DeepSeek API构建交互界面），以及集成与部署（确保WebUI与模型服务之间的数据正确传递，在本地运行后可通过浏览器访问）。 适合人群：对深度学习模型部署有一定了解的技术人员，尤其是那些希望将DeepSeek模型应用于本地环境并提供用户友好界面的研发人员。 使用场景及目标：①为希望在本地环境中运行DeepSeek模型的研究者或开发者提供详细的部署指南；②帮助用户快速搭建一个带有图形化操作界面的DeepSeek应用，降低使用门槛，提高用户体验。 阅读建议：在阅读时，应根据自己的操作系统环境和硬件条件调整相应的配置要求，同时注意按照官方文档的具体指引操作，确保各组件版本兼容，以便顺利完成部署和可视化工作。
MISRA C 2014和MISRA CPP 2008版本
04-16
MISRA C 2014和MISRA CPP 2008版本
Revit2024二次开发之安装Addin
04-16
Revit2024二次开发之安装Addin
ExtJS开发实用源码初级教程指南
ExtJS框架采用了模块化的方式，它包括了丰富的UI组件，如按钮、面板、表格、树形视图、表单组件等。这些组件能够实现复杂的应用逻辑，并具有良好的浏览器兼容性。ExtJS使用组件驱动的开发模式，这使得Web页面的开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值