• 1. ExtJS Web应用设计
  • 2. Web 2.0 介绍Web2.0 是指新一代的万维网服务,这个服务能令使用者在在线共同合作或交流信息。与第一代相比,Web2.0 提供一个比传统静态网页更接近桌面应用的经验予使用者。 Web2.0 应用程序有时会与1990年代后期发展的技术互相结合使用,包括:WebService、Ajax和RSS。 Web2.0,是相对Web1.0(2003年以前的互联网模式)的新的一类互联网应用的统称,是一次从核心内容到外部应用的革命。由Web1.0单纯通过网络浏览器浏览html网页模式向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展已经成为互联网新的发展趋势。 Web2.0是以 以Blog、TAG、SNS、RSS、wiki等应用为核心,依据六度分隔、xml、ajax等新理论和技术实现的互联网新一代模式。
  • 3. RIA(富互联网应用)RIA 具有的桌面应用程序的特点包括:在消息确认和格式编排方面提供互动用户界面;在无刷新页面之下提供快捷的界面响应时间;提供通用的用户界面特性如拖放式以及在线和离线操作能力。 客户机在RIA中的作用不仅是展示页面,它可以在幕后与用户请求异步地进行计算、传送和检索数据、显示集成的用户界面和综合使用声音和图像,这一切都可以在不依靠客户机连接的服务器或后端的情况下进行。 对于企业来说,部署RIA的好处在于: 1. RIA可以继续使用现有的应用程序模型(包括J2EE和.NET),因而无需大规模替换现有的Web应用程序 2. RIA可以帮助企业提供多元化的重要业务效益,包括提高销量、提高品牌忠诚度、延长网站逗留时间、较频繁的重复访问、减少带宽成本等。
  • 4. Adobe Flex
  • 5. Adobe Flex
  • 6. Adobe Flex
  • 7. EXTJS
  • 8. EXTJS
  • 9. ZK
  • 10. 让我们开始ExtJS之旅认识ExtJS开发包 ExtJS开发包可以从http://extjs.com网站下载到最新ExtJS 4.1版本。结构,如图。 adapter 放置的是核心代码与底层库的适配器。 air 包含了ExtJS以Adobe air进行改进后的代码库,还有 以该代码库实现的任务管理实例。 build 目录放置ExtJS内核文件拆分压缩成的若干库文件。 docs 放置ExtJS API文档 examples 里面是ExtJS官方演示例子 resource 中是各种图片与CSS文件 source 中是ExtJS的源文件
  • 11. 也从HelloWorld开始对于ExtJS的学习可以从HelloWorld开始,熟悉其开发与运行过程。ExtJS只是一套用JavaScipt实现界面的组件,所以在没有与服务器进行数据交换的情况下,并不需要服务器的支持。
  • 12. ExtJS2-HelloWorld
  • 13. ExtJS开发工具Spket插件:具有代码自动完成、语法高亮、内容概要等功能特点
  • 14. FullSource FullSource是一款用于浏览由JavaScript动态生成的HTML网页源代码的工具软件
  • 15. ExtJS 2.0的基本功能JSON介绍 JSON全称是JavaScript Object Notation(JavaScript对象符号)。JSON是一种结构化的、轻量级的、完全独立于语言的、基于文本的数据传输格式,在很多场合下用来替代XML文件格式。表达相同信息时,JSON比XML形成的文件更小更便于及其解析。 JSON格式格式非常适合于那些具有一些属性和值得简单对象,它以‘{’开始,以‘}’结束,属性赋值使用‘:’,属性之间用‘,’分隔。
  • 16. 信息提示框组件程序开发中最常见也是最常用的组件就是信息提示框了,在Web页面中alert()可谓是人人皆知,利用它提示各种信息。ExtJS提供了一系列美观实用的信息提示框组件,它们的种类如下: Ext.MessageBox.alert() 只读信息提示框,替换alert() Ext.MessageBox.confirm() 确认提示框,替换confirm() Ext.MessageBox.prompt() 输入提示框,替换prompt() Ext.MessageBox.wait() 进度条提示框 Ext.MessageBox.show() 可以定制的信息提示框
  • 17. 认识Ext.MessageBoxExt.MessageBox是一个工具类,它继承自Object对象,用来生成各种风格的对话框,Ext.Msg是该类的别名,使用时具有相同效果。 Ext.MessageBox生成的对话框不是一个真正的弹出窗口,它只是一个DIV图层,所以无法用窗口捕捉软件来捕捉它。 Ext.MessageBox提示内容支持使用HTML格式文本,采用HTML中的格式化排版效果更佳丰富多彩。 Ext.MessageBox是异步的,它的调用并不会停止浏览器中代码的执行,这一点是跟JS里的alert()有着本质的差别。
  • 18. Ext.MessageBox.alert()调用格式: alert(String tiltle,String msg,[function fn],[Object scope]) 参数说明: title:标题 msg:正文 function fn:回调函数(可选) Object scope:回调函数的作用域(可选) 返回值: Ext.MessageBox
  • 19. Ext.onReady(function(){ Ext.Msg.alert('提示','请点击我,确定',callBack); function callBack(id){ alert("您点击了"+id); } });
  • 20. Ext.onReady(function(){ Ext.Msg.alert('提示','
    请点击我,确定
    ',callBack); function callBack(id){ alert("您点击了"+id); } });
  • 21. Ext.MessageBox.confirm()调用格式: confirm(String title,String msg,[function fn],[Object scope]) 参数说明: title:标题 msg:正文 function fn:回调函数(可选) Object scope:回调函数的作用域(可选) 返回值: Ext.MessageBox
  • 22. Ext.onReady(function(){ Ext.MessageBox.confirm('提示','请点击我做出选择',callBack); function callBack(id){ alert("单击的按钮ID:"+id); } });
  • 23. Ext.MessageBox.prompt()调用格式: prompt(String title,String msg,[function fn],[Object scope],Boolean/Number multiline,String value) 参数说明: title:标题 msg:正文 function fn:回调函数(可选) Object scope:回调函数的作用域(可选) Boolean/Number multiline:文本域像素高度,false为单行。 value:默认值 返回值: Ext.MessageBox
  • 24. Ext.onReady(function(){ Ext.MessageBox.prompt('提示','输入一些内容看看', callBack,this,true,'我是默认值'); function callBack(id,msg){ alert('你单击的按钮ID:'+id+"\n 输入的内容为:"+msg); } });
  • 25. Ext.MessageBox.wait()调用格式: wait(String msg,[String title],[Object config]) 参数说明: msg:正文 title:标题(可选) Object config:配置对象(可选) 返回值: Ext.MessageBox
  • 26. Ext.onReady(function(){ Ext.MessageBox.wait('请您等待,操作需要很长时间','提示',{ text:'进度条文字' }); });
  • 27. Ext.MessageBox.show()配置项类型说明titleStringmsgStringwidthString closableBoolean窗口右上角关闭按钮fnFunction回调函数buttonsObject按钮对象progressBoolean显示进度条progressTextString进度条文字promptBoolean显示文本域multilineBoolean多行文本域iconStringCSS文件中图片变量
  • 28. buttons配置 调用格式: show(Object config) 返回值: Ext.MessageBox 按钮说明Ext.MessageBox.CANCEL'取消'按钮Ext.MessageBox.OK‘确定’按钮Ext.MessageBox.OKCANCEL‘确定’、‘取消’按钮Ext.MessageBox.YESNO‘是’、‘否’按钮Ext.MessageBox.YESNOCANCEL‘是’、‘否’、‘取消’按钮
  • 29. Ext.onReady(function(){ Ext.MessageBox.show({ title:'提示', msg:'我有三个按钮和一个文本框', modal:true, prompt:true, value:'请输入', fn:callBack, buttons:Ext.Msg.YESNOCANCEL, icon:Ext.MessageBox.QUESTION }); function callBack(id,msg){ alert('你单击的按钮ID:'+id+"\n 输入的内容为:"+msg); } });
  • 30. 改变按钮文字 Ext.MessageBox.buttonText.yes="同意"; Ext.MessageBox.buttonText.no="不同意"; Ext.MessageBox.buttonText={ yes:'同意', no:'不同意' };
  • 31. Ext.onReady(function(){ Ext.MessageBox.buttonText.yes="同意"; Ext.MessageBox.buttonText.no="不同意"; Ext.MessageBox.show({ title:'提示', msg:'自定义按钮文字', modal:true, buttons:Ext.MessageBox.YESNO }); });
  • 32. 要知后事且听下回
  • 33. ExtJS进度条Ext.ProgressBar是一个可更新的进度条类,继承自Ext.BoxComponent,该进度条具有两种不同的模式:手工模式和自动模式。手工模式需要自己控制更新和清除,在自动模式里只需要调用wait方法,进度条就会无限制地滚动下去。配置类型说明applyToString组件追加到已经存在的后面,不是创建新的容器renderToString以存在的组件作为容器heightNumberwidthNumberclsStringCSS样式扩展
  • 34.
    id:'layer_2' applyTo:'layer_1'追加新的组件
    id:'layer_2' renderTo:'layer_1'
  • 35. 工具栏和菜单栏在标准桌面应用程序中都会提供菜单栏和工具栏,他们经常会给用户提供一种快速的执行操作方式。
  • 36. 工具栏常用个具栏元素元素名称说明Ext.Toolbar.Button工具栏按钮Ext.Toolbar.Fill空白元素Ext.Toolbar.Item元素Ext.Toolbar.Separator分隔符Ext.Toolbar.SplitButton菜单按钮Ext.Toolbar.TextItem文本元素
  • 37. (本页无文本内容)
  • 38. (本页无文本内容)
  • 39. 菜单Ext.menu.Menu配置选项 菜单元素 配置参数说明itemsMixed菜单数组shadowBoolean/String阴影显示方式。 true:使用默认阴影;false无阴影 sides:左-右-下;frame:四边阴影;drop:下-右配置说明TextItem文本元素Separator分隔符CheckItem复选框
  • 40. (本页无文本内容)
  • 41. (本页无文本内容)
  • 42. 最常用的表单表单在Web应用中处于非常重要的地位,时刻都在使用表单手机用户信息与用户交互,并将收集到的有用信息提交给后台服务器,表单是客户端与服务器之间通信的主要桥梁。 传统HTML表单形式单一,无法对表单的复杂操作提供支持,不能满足服客户端的需要。EXTJS对原有HTML表单进行了有用的扩展,形成了一系列使用美观的组件,这些组件的特性主要表现在以下几个方面: 1. 表单可以异步提交 2. 可以配置表单验证 3. 配置验证错误提示 4. 含有特殊数据输入控件(日期时间、货币类型、数组等等)
  • 43. Ext.from.BasicFormBasicForm是基本的表单组件,默认情况下采用ajax方式异步提交数据。 BasicForm配置如下 配置类型说明baseParamsObject传递到请求中的参数,{id:'20',name:'James'}errorReaderDataReader表单提交时候读取错误信息的数据读取器(非必须)fileUploadBoolean是否上传文件methodString设置POST或GET上传方式readerDataReader表单提交时候读取信息的数据读取器(非必须)timeoutNumber表单提交超时时间urlString提交地址
  • 44. BasicForm方法如下 方法说明clearInvalid()清除表单验证无效的控件数据findFiled()查找表单之内的控件isDirty()表单是否更改过isValid()验证表单字段load()执行表单读取动作loadRecord()读取Ext.data.Record中的数据到表单里面reset()重设表单setValues()给表单字段赋值,{id:20,name:'James'}submit()执行表单提交updateRecord()把表单中的数据写入到Record里面
  • 45. Ext.form.FormPanelFormPanel与HTML表单不仅表现形式不同,对表单的操作以及处理也并不相同,这些不同体现在以下方面: 1. 表单提交方式 2. 对表单验证支持 3. 对表单组件支持表单组件说明表单组件 说明Ext.from.CheckBox复选框Ext.from.TextArea多行文本框Ext.from.ComboBox下拉列表Ext.from.TextFiled单行文本框Ext.from.DateFiled日期选择框Ext.from.TimeFiled时间选择框Ext.from.Hidden隐藏域Ext.from.TriggerFiled触发按钮文本框Ext.from.HtmlEditorHTML文本编辑器Ext.from.NumberFiled数字输入框Ext.from.Radio单选按钮
  • 46. FormPanel配置选项 配置类型说明buttonsArray按钮数组,按钮被添加到页脚buttonAlignString按钮对其方式,默认centerfooterboolean是否创建表单页脚headerboolean是否创建标题栏itemsArray表单元素labelAlignNumber表单元素所含有的标签对齐方式labelWithNumber标签宽度titleString标题
  • 47. 表单控件Ext.form.Filed是表单字段的基类,从中可以派生出TextField、TextArea、NumberFiled等控件。 配置类型说明nameStringidStringvalueStringreadOnlybooleanalidationOnBlurboolean失去焦点验证alidationDelayNumber验证的延时时间,单位毫秒disabledboolean控件是否可用filedLabelString标签labelSeparatorString标签与控件之间的分隔符,默认是:msgTargetString设置错误消息的位置。 qtip:显示浮动提示 title:显示浏览器浮动提示 under:控件下方显示提示 side:在控件右边显示提示
  • 48. Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side';
  • 49. 表单控件Ext.form.TextFiled文本框可以替换HTML表单中的文本框 配置类型说明alllowBlankBoolean是否允许为空,默认为trueblankTextString为空验证失败后显示的提示信息emptyTextString在空字段中默认显示的信息growboolean控件是否跟随文字长度而伸展收缩,默认falsegrowMaxNumber伸缩嘴道宽度growMinNumber伸缩最小宽度maxLengthNumber文字输入的宽度maxLengthTextString文字最大长度验证失败后显示的提示minLengthNumberminLengthTextStringregexString正则表达式regexTextString正则表达式失败的提示selectOnFocusboolean控件获得焦点是否自动选择文本,默认false
  • 50. 表单控件Ext.form.TextArea 文本域继承自TextFiled,因此含有TextFiled的属性和方法,其特有的属性如下: Ext.form.NumberField数字输入框也是继承自TextFiled组件,在严格要求输入数字的场合使用,免去了相关验证的复杂逻辑,简化编程。 配置类型说明preventScrollbarsBoolean文本内容溢出空间时候是否显示滚动条,配置类型说明allowDecimalsboolean是否允许小数,默认trueallowNegativeboolean是否允许输入负数,默认truebaseCharsString可以输入的有效数字,默认为0-9decimalPrecisionNumber输入数字的精度,默认精确小数点后两位decimalSeparatorString小数点分隔符,默认.maxValueNumber
  • 51. 表单控件 Ext.form.CheckBox 复选框 Ext.form.Radio 单选按钮 配置类型说明maxTextString超过最大值时候显示的提示minValueNumberminTextStringnanTextString输入非有效值之后的提示
  • 52. 表单控件Ext.form.ComboBox下拉列表支持自动完成、远程加载数据、分页等特性,是在开发中使用频率非常高的组件。配置类型说明allQueryString发往服务器用来查询全部数据的查询字符串,默认为“”displayFieldString显示在下拉列表框中的字段名editableboolean可编辑内容,默认trueforceSelectionboolean是否输入的文字是下拉选项的文字,默认falselazyInitboolean是否延迟加载,得到焦点时候才初始化下拉列表,默认truelistAlignStringlistWidthNumberloadingTextString加载下拉列表的过程中提示的等待文字minCharsNumber自动匹配列表选项时候必须输入的最少字符modeStringlocal:本地数据,remote:远程数据pageSizenumber数据分页大小
  • 53. 配置类型说明queryParamString查询参数storeStore数据源triggerActionString点击列表按钮出触发的动作,默认值alltypeAheadboolea输入过程中自动匹配剩余文字
  • 54. 感谢您的关注