• 1. 第9章 Ext原理
  • 2. 本章内容Ext消息对话框 Ext表单控件 Ext树形结构
  • 3. 本章目标掌握Ext不同消息对话框的使用 掌握Ext表单控件的使用 掌握Ext树形结构
  • 4. 1. Ext消息对话框 1.1 Ext.MessageBox介绍 Ext中的MessageBox是一种特殊的窗口,这种窗口配置很简单,可以任意拖动、摆放,也可以使用任何控件 Ext.MessageBox提供的alert、confirm、prompt等对话框完全可以替代传统使用alert、confirm、prompt等对话框
  • 5. 1.2 Ext.MessageBox.alert() Ext.MessageBox.alert()最多有四个参数,主要介绍三个 alert( title , msg , function(){} )说明: title,msg为必选参数 function为可选参数,在关闭弹出窗口后触发
  • 6. 一个alert的对话框 Array Grid Example

    消息对话框

    --------------------

    确认对话框

    Ext.MessageBox.alert()

  • 7. 1.3 Ext.MessageBox.confirm()Ext.MessageBox.confirm("title","msg",function(e){alert(e);}); 说明: Function中参数e是点击弹出框的按钮的值 Ext.MessageBox.confirm中有两种值:ok、cancel
  • 8. 一个确认/取消的对话框 Array Grid Example

    消息对话框

    --------------------

    “yes/no”对话框

    Ext.MessageBox.confirm()

  • 9. Ext.MessageBox.prompt("title","msg",function(e,text){ alert(e+"-"+text); },this,true ); 1.4 Ext.MessageBox.prompt()Ext.MessageBox.prompt()方法U8E8L有六个参数,比前面alert方法多一个返回值和是否多行 true为多行,this表示作用域 Ext.MessageBox.prompt("title","msg");Ext.MessageBox.prompt("title","msg",function(e,text){ alert(e+"-"+text); });
  • 10. 一个输入充值卡金额的对话框 Array Grid Example

    消息对话框

    --------------------

    交互对话框

    Ext.MessageBox.prompt()

  • 11. Ext.MessageBox.prompt()更改上面代码,当用户点击“ok”和“cancel”效果Ext.get('messageBox4').on('click',function(){ Ext.MessageBox.prompt('金额','请输入充值金额:',function(bt,text){ if(bt == 'ok'){ alert('您输入的充值金额:'+text); } else{ alert("您取消了充值!"); } }); });点击ok 点击cancel
  • 12. 1.5 Ext.MessageBox.show() Ext.MessageBox.show() 常用的配置参数 参数说明animEl对话框弹出和关闭时的动画,如设置为“idName”,则从idName处弹出并产生动画,收缩则相反buttons弹出框按钮的设置,主要有以下几种:Ext.Msg.OK、 Ext.Msg.OKCANCEL、Ext.Msg.CAMCEL、Ext.Msg.YESNO、Ext.Msg.YESNOCANCELclosable如果为false,则不显示右上角的小叉叉,默认为truemsg消息的内容title标题fn关闭弹出框后执行的函数icon弹出框内容前面的图标,取值:Ext.MessageBox.INFO, Ext.MessageBox.ERROR, ,Ext.MessageBox.WARNING,Ext.MessageBox.QUESTIONwidth弹出框的宽度,不带单位prompt设为true,则弹出框带有输入框multiline设为true,则弹出框带有多行输入框progress设为true,显示进度条progressText显示在进度条上的字wait设为true,动态显示progresswaitConfig配置参数,以控制显示progress
  • 13. 制作带Yes/No/Cancel的对话框

    消息对话框

    --------------------

    “是/否/取消”对话框

    Ext.MessageBox.show() 省略Ext的样式及Ext库文件,下同

  • 14. Ext.MessageBox.show() Ext.MessageBox.show()简单的制作进度条 Ext.MessageBox.show({ title:'请稍等...', msg:'处理中...', width:300, progress:true, closable:false, animE1:'messageBox5' });progress设置为true,对话框就会出现进度条
  • 15. Ext.MessageBox.show() 制作带百分比的进度条 Ext.get('messageBox5').on('click',function(){ Ext.MessageBox.show({ title:'请稍等...', msg:'处理中...', width:300, progress:true, closable:false, animE1:'messageBox5' }); var fv = function(v){ return function(){ if(v == 100){ Ext.MessageBox.hide(); } else{ Ext.MessageBox.updateProgress(v/100, '内容加载中,进度 ' + v + ' / 100...'); } } } for(var i=1;i<101;i++){ setTimeout(fv(i),i*100); } }); Ext.MessageBox.show()
  • 16. 2. Ext表单控件 在Ext表单中, Ext.form.FormPanel继承了Ext.Panel,作为一个Panel,我们可以把Ext.form.FormPanel放到Ext.Viewport中作为整个页面布局的一部分
  • 17. Ext表单控件 Ext提供的表单控件 基本输入控件Ext.form.Field 文本输入控件Ext.form.TextField 多文本输入控件Ext.form.TextArea 日期输入控件Ext.form.DateField 时间输入控件Ext.form.TimeField 在线编辑器控件Ext.form.HtmlEditor 隐藏域控件Ext.form.Hidden
  • 18. Ext表单控件 基本输入控件Ext.form.Field Ext.form.Field是所有表单输入控件的基类,其他的输入控件都是基于它扩展的来的
    显示field的错误信息样式 msgTarget设置为qtip样式 msgTarget设置为title样式
  • 19. Ext表单控件 文本输入控件Ext.form.TextField Ext.form.TextField继承Ext.form.Field,它是一个专门用来输入文本的输入控件var field3 = new Ext.form.TextField({ fieldLabel:'tel', allowBlank:false, emptyText:'empty', maxLength:16, minLength:8 });带非空的验证 带数据的最大最小长度的验证
  • 20. Ext表单控件 多文本输入控件Ext.form.TextArea Ext.form.TextArea用来进行输入文本的输入控件,与TextField不同的是它可以输入多行文本var field4 = new Ext.form.TextArea({ width:122, grow:true, preventScrollbars:true, fieldLabel:'remark', allowBlank:false, emptyText:'empty', maxLength:100, minLength:10 });多文本输入
  • 21. Ext表单控件 日期输入控件Ext.form.DateField Ext.form.DateField是常用的日期选择控件,除了选择日期功能外,它还支持Ext.form.TextField和Ext.form.Field中定义的功能var field5 = new Ext.form.DateField({ fieldLabel:'birthday', allowBlank:false, emptyText:'empty', format:'Y-m-d', disabledDays:[0,6] });日期输入控件
  • 22. Ext表单控件 时间输入控件Ext.form.TimeField Ext.form.TimeField就是用来选择时间的输入控件,它可以指定一天的开始时间、结束时间以及时间间隔来选择时间var field8 = new Ext.form.TimeField({ fieldLabel:'time', emptyText:'请选择', minValue:'1:00 AM', maxValue:'23:00 PM', increment:60 });时间输入控件
  • 23. Ext表单控件 在线编辑器控件Ext.form.HtmlEditor Ext提供了简单实现在线编辑器功能的Ext.form.HtmlEditor,它能对文本进行各项设置var field6 = new Ext.form.HtmlEditor({ fieldLabel:'introduce', enableAlignments: true, enableColors: true, enableFont: true, enableFontSize: true, enableLinks: true, enableFormat: true, enableLists: true, enableSourceEdit: true, autoHeight: "auto", anchor: "90%" }); 在线编辑器控件
  • 24. Ext表单控件 隐藏域控件Ext.form.Hidden Ext提供了隐藏域控件Ext.form.Hidden,它直接继承自Ext.form.Field,通过Hidden的setValue()和getValue()函数可以对它进行赋值和取值var field7 = new Ext.form.Hidden({ fieldLabel:'empId' }); field7.setValue('0003'); var empId = field7.getValue(); 说明: 页面上将有一个隐藏域empId为0003
  • 25. 3. Ext树 3.1 Ext树的基本应用 基于Ajax异步加载的树,不但涉及到Ajax数据加载及处理技术,还需要考虑跨浏览器支持等,处理起来非常麻烦 ExtJS中提供了现存的树控件,通过这些控件可以在B/S 应用中快速开发出包含树结构信息的应用 树控件由Ext.tree.TreePanel类定义,TreePanel 类继承自 Panel面板
  • 26. 3.1 Ext树的基本应用ExtJS中树控件的使用
    TreeNode来创建树的根节点和子节点 往root节点中加入一个子节点
  • 27. 3.2 Ext树控件的TreeNode和TreeLoader在ExtJS中,有两种类型的树节点 普通的简单树节点,由 Ext.tree.TreeNode 定义 需要异步加载子节点信息的树节点,由 Ext.tree.AsyncTreeNode 定义
  • 28. 同时使用TreeNode和AsyncTreeNode的树 Ext树控件的TreeNode和TreeLoader
    说明: 树一直尝试加载子节点2,这是因为这里没有指定树的加载器
  • 29. Ext树控件的TreeNode和TreeLoader读取本地JSON数据的树
  • 30. Ext树控件的TreeNode和TreeLoaderTreePanel的配置参数 名称说明animatetrue展开,收缩动画,false则没有动画效果autoHeighttrue表示自动高度,默认为falseenableDragtrue表示树的节点可以拖动DragenableDD不仅可以拖动,还可以通过Drag改变节点的层次结构lines节点间的虚线条loader加载节点数据root根节点rootVisiblefalse不显示根节点,默认为truetrackMouseOverfalse则mouseover无效果useArrows小箭头
  • 31. 总结ExtJS各种消息对话框 Ext.MessageBox.alert() Ext.MessageBox.confirm() Ext.MessageBox.prompt() Ext.MessageBox.show() ExtJS表单控件:TextField、TextArea、CheckBox、Radio、ComboBox、DateField、HtmlEditor以及Hidden和TimeField ExtJS树控件TreeNode和TreeLoader使用
  • 32. (本页无文本内容)