学习ExtJS4 常用控件
ExtJS组件配置方式介绍
1.使用逗号分隔参数列表配置组件
首先来看一个简单的逗号分隔参数列表的例子。这个例子非常简单,它用来显示信息提示框。
2.使用Json对象配置组件
接下来看一个使用Json对象配置组件的例子,很多地方习惯性称之为配置对象。
<script>Ext.onReady(function () {//使用逗号配置Ext.Msg.alert('提示', '逗号分隔参数列表');//使用Json对象配置var config = {title: '使用Json对象配置',msg:'这里是提示信息!'};Ext.Msg.show(config);});</script>
ExtKS开放了大量配置项以满足程序员在实际项目中的不同需求,熟悉各个配置项的配置方式以及效果是我们快速掌握EXTJS的一个捷径。
信息提示框组件介绍
Ext.window.MessageBox是一个工具类,用来生成各种风格的信息提示框。其实例对象可以通过Ext.MessageBox或Ext.Msg来访问,两者具有相同的效果,后者提供更简便的调用方式。
Ext.MessageBox提供的信息对话框显示的文本不仅支持纯文本显示还支持HTML格式文本,采用HTML格式文本进行排版,效果更加丰富多彩。
Javascript中标准的alert会阻塞浏览器脚本的执行,但是Ext.MessageBox不会,它是异步调用。
1.Ext.MessageBox.alert是一个只读信息提示框,可以为其提供一个回调函数,该函数将在单击按钮后被调用(不包括右上角的退出按钮),所单击按钮的ID将作为唯一的参数传递到回调函数中。
<script>Ext.onReady(function () {Ext.Msg.alert('提示',"<b>提示信息</b>");});</script>
2.Ext.MessageBox.confirm确认对话框,支持传入回调函数,与Ext.MessageBox.alert一致。
<script>Ext.onReady(function () {Ext.Msg.confirm('提示', '你确定要这样做吗',callback);function callback(id) {alert("你点击了:"+id);}});</script>
3.Ext.MessageBox.prompt显示用户输入信息的对话框。支持传入回调函数,所单击的按钮id以及文本框的内容将作为参数传递到回调函数中。
<script>Ext.onReady(function () {//true表示多行文本输入框Ext.Msg.prompt("提示", "请输入信息",callback,true,'默认值');function callback(id, msg) {alert("点击按钮:"+id+" 输入信息:"+msg);}});</script>
4.Ext.MessageBox.wait()显示一个自动滚动的进度框。它被用在一个耗时的交互操作中,它不能定义一个时间间隔自动关闭,需要手动关闭。
<script>Ext.onReady(function () {Ext.Msg.wait("请等待", "温馨提示", {text:'进度条上的文字'});});</script>
5.Ext.MessageBox.show()基于配置显示新的信息提示框或重置一个已经存在的信息提示框。前面介绍的3个方法内部调用的都是它,尽管调用简捷,但是它不支持所有的配置项,要建立更加强大、个性化的提示框还需要掌握Ext.MessageBox.show方法做起。配置项太多,碍于篇幅,不列出,需要的人去查阅ExtJSAPI。该提示框是异步执行的,使用时请注意。
<script>Ext.onReady(function () {function callback(id, msg) {alert("点击的按钮:"+id+" 信息:"+msg);}Ext.Msg.show({title: '温馨提示',msg: '三个按钮和一个文本区',modal: true,//模态prompt: true,//含输入框value: '请输入',//输入框默认值fn: callback,//回调函数buttons: Ext.Msg.YESNOCANCEL,//可用按钮 icon:Ext.Msg.QUESTION});});</script>
6.Ext.MessageBox其他功能
(1) 改变默认的按钮文字
<script>Ext.onReady(function () {//okExt.Msg.msgButtons[0].setText('按钮一');//yesExt.Msg.msgButtons[1].setText('按钮二');//noExt.Msg.msgButtons[2].setText('按钮三');//cancelExt.Msg.msgButtons[3].setText('按钮四');Ext.Msg.show({title: '提示',msg: '防火防盗防校长',modal: true,buttons:Ext.Msg.YESNOCANCEL});});</script>
(2) 动态更新信息提示框
<script>Ext.onReady(function () {var msgBox = Ext.MessageBox.show({title: '提示',msg: '动态更新的信息文字',modal: true,buttons: Ext.Msg.OK,fn: function () {//回调函数//停止定时任务 Ext.TaskManager.stop(task);}});//Ext.TaskManager是一个功能类,用来执行定时程序var count = 1;var task = {run: function () {msgBox.updateText("正在上传第" + count + "条数据...");count++;},interval:1000};Ext.TaskManager.start(task);});</script>
(3) 更新进度以及提示信息
<script>Ext.onReady(function () {var msgBox = Ext.Msg.show({title: '显示',msg: '信息',modal: true,width: 300,progress: true //使用进度条 });var count = 0;//滚动条刷新的次数var percentage = 0;//进度百分比var progressText = '';//进度条信息var task = {run: function () {count++;//计算进度percentage = count / 10;//生成进度条上的文字progressText = '当前完成度:' + percentage * 100 + '%';//更新信息提示对话框msgBox.updateProgress(percentage, progressText, '当前时间:' + Ext.util.Format.date(new Date(), 'Y-m-d g:i:s A'));//刷新10次关闭信息提示对话框if (count > 10) {Ext.TaskManager.stop(task);msgBox.hide();}},interval:1000};Ext.TaskManager.start(task);});</script>
进度条组件介绍
Ext.ProgressBar是一个可更新的进度条组件,该进度条具有手工模式和自动模式。手工模式下,需要自己控制进度条的显示,自动模式下,只要调用wait方法,进度条就会无限制的滚动下去,它适合为那么耗时长的同步操作进行提示。
<script>Ext.onReady(function () {var ProgressBar = new Ext.ProgressBar({title: '进度条',width: 300,text:'请等待...',//使用htmlbody作为渲染容器//renderTo:Ext.getBody()renderTo: 'div'});});</script>
手工模式的进度条是通过调用进度条的updateProgress()方法来实现的。手工更新的进度条非常适合可以掌握程序的执行状态的长时间操作。例如文件的上传进度,如果有些操作无法实时获取进度,只能采用自动更新的进度条信息。
<script>Ext.onReady(function () {var progressbar = new Ext.ProgressBar({width: 300,renderTo:'div'});var count = 0;//滚动条更新次数var percentage = 0;//进度条百分比var progressText = '';//进度条信息 Ext.TaskManager.start({run: function () {count++;if (count >= 10)progressbar.hide();//计算进度percentage = count / 10;progressText = percentage * 100 + '%';//更新信息 参数含义:百分比,进度条文字,是否使用动画效果progressbar.updateProgress(percentage,progressText,true);},interval: 1000,//方法执行时间间隔repeat:6 //设置执行次数 });});</script>
创建一个自动模式的进度条并不复杂,只用调用进度条的wait方法,进行必要的配置即可得到一个理想状态的自动更新的进度条了。
<script>Ext.onReady(function () {var ProgressBar = new Ext.ProgressBar({text: '正在处理,请稍后...',width: 300,renderTo: 'ProgressBar'});ProgressBar.wait({duration: 10000,//进度条持续更新10秒interval: 1000,//每1秒更新一次increment: 10,//进度条分10次更新完毕text: 'waiting',//进度条上的文字scope: this,//回调函数的执行fanwfn: function () {Ext.Msg.alert('提示', '更新完毕');}});});</script>
通过cls配置改变进度条的样式。
<style type="text/css">.custom .x-progress-inner{height: 17px;background: #fff;}.custom .x-progress-bar{height: 15px;background: transparent url(images/custom-bar-red.gif) repeat-x 0 0;border-top: 1px solid #BEBEBE;border-bottom: 1px solid #EFEFEF;border-right: 0;}</style><script>Ext.onReady(function () {var ProgressBar = new Ext.ProgressBar({width: 300,//设定进度条的宽度renderTo: 'ProgressBar',cls: 'custom'//使用自定义样式 });ProgressBar.wait({duration: 10000,//进度条持续更新10秒钟interval: 1000,//每1秒钟更新一次increment: 10//进度条分10次更新完毕 });});</script>
实现工具和菜单栏
Ext.toolbar.Toolbar是工具栏的基础组件,它相当于容器,在其中可以放置各种工具栏元素,主要包括按钮、文字和菜单组件。
<script>Ext.onReady(function () {var toolbar = new Ext.toolbar.Toolbar({renderTo: 'toolbar',width: 300});toolbar.add([{text: '新建',//按钮上的文字handler: function () {alert('新建');},},{text: '打开',handler: function () {alert('打开');}},{text: '保存',handler: function () {alert('');}}]);});</script>
toolbar1
<script>Ext.onReady(function () {var toolbar = new Ext.toolbar.Toolbar({renderTo: 'toolbar',width:500});toolbar.add({text:'新建'},{text:'打开'},{text:'保存'},{text:'编辑'},'-',{//加入表单元素xtype: 'textfield',hideLabel: true,width:150},'->',//加入一个充满工具栏的空白元素'<a href=#>链接</a>',//加载一个HtmlElement{xtype:'tbspacer',width:50},//加入一个空白元素'静态文本'//加入一个简单字符串 );Ext.get('btnEnable').on('click', function () {//启用工具栏 toolbar.enable();});Ext.get('btnDisable').on('click', function () {//启用工具栏 toolbar.disable();});});</script>
toolbar2
Ext.menu.Menu菜单
作为我们编写的第一个菜单栏,它以熟悉的文本编辑软件菜单栏为原型,主要分为文件菜单和编辑菜单,在文件下拉菜单中有3个菜单选项,分别是新建、打开、关闭,在编辑下拉菜单中包含复制、粘帖、剪切。
<script>Ext.onReady(function () {function onMenuItem(item) {alert(item.text);}var toolbar = new Ext.toolbar.Toolbar({renderTo: 'toolbar',width: 300});var fileMenu = new Ext.menu.Menu({shadow: 'frame',//设置菜单四条边都有阴影allowOtherMenus: true,items: [new Ext.menu.Item({text: '新建',handler: onMenuItem}),//添加菜单项{ text: '打开', handler: onMenuItem },{ text: '关闭', handler: onMenuItem }]});var editorMenu = new Ext.menu.Menu({shadow: 'drop',//设置菜单在右下有阴影allowOtherMenus: true,items: [{ text: '复制', handler: onMenuItem },{ text: '粘帖', handler: onMenuItem },{ text: '剪切', handler: onMenuItem }]});toolbar.add({text: '文件',menu:fileMenu},{text: '编辑',menu:editorMenu});});</script>
接下来看多级菜单的实现方式,在以下示例中是通过Ext.menu.Item的menu配置项来完成多级菜单的关联。
<script>Ext.onReady(function () {function handleItem(item) {alert(item.text);}var Toolbar = new Ext.toolbar.Toolbar({renderTo: 'toolbar',width: 300});var infoMenu = new Ext.menu.Menu({ignoreParentClicks: true, //忽略父菜单的点击事件plain: true,items: [{text: '个人信息',menu: new Ext.menu.Menu({ignoreParentClicks: true,items: [{text: '基本信息',menu: new Ext.menu.Menu({items: [{text: '身高',handler: handleItem},{text: '体重',handler: handleItem}]})}]})},{text: '公司信息'}]});Toolbar.add({text: '设置',menu: infoMenu});});</script>
将更多组件加入菜单。再以上2个示例中介绍了简单菜单和多级菜单的创建,示例中菜单项都是Ext.menu.Menu对象,其表现形式中规中矩,下面演示一下向菜单栏
中添加丰富的组件。
<style type="text/css">.userManagerIcon{background-image: url(images/userManager.gif) !important; }.newIcon{background-image: url(images/new.gif) !important; }.openIcon{background-image: url(images/open.gif) !important; }.saveIcon{background-image: url(images/save.gif) !important; }</style><script>Ext.onReady(function () {var Toolbar = new Ext.toolbar.Toolbar({//创建工具栏renderTo: 'toolbar',width: 300});var fileMenu = new Ext.menu.Menu({//文件创建菜单 items: [{xtype: 'textfield',//创建表单字段hideLabel: true,width: 100}, {text: "颜色选择",menu: new Ext.menu.ColorPicker()},{ xtype: 'datepicker' },//添加日期选择器组件 {xtype: 'buttongroup',//添加按钮组组件columns: 3,title: '按钮组',items: [{text: '用户管理',scale: 'large',colspan: 3,width: 170,iconCls: 'userManagerIcon',iconAlign: 'top'}, {text: '新建', iconCls: 'newIcon'}, {text: '打开', iconCls: 'openIcon'}, {text: '保存', iconCls: 'saveIcon'}]}]});Toolbar.add({ text: '文件', menu: fileMenu }//将菜单加入工具栏 );});</script>
文中示例代码下载
示例代码
转载于:https://www.cnblogs.com/codealone/p/3152375.html
学习ExtJS4 常用控件相关推荐
- Android学习:常用控件
Android学习:常用控件 学习要点:掌握文本框.编辑框.按钮.单选按钮.复选框等基本控件的用法 控件是Android应用程序中用户界面的重要组成元素,正是因为Android应用程序提供了很多具有不 ...
- Android学习--02(猜猜我的星座App源码+Android常用控件TextView+EditText+Button+ImangeView+DatePicker+App间通信+跳转页面)
猜猜我的星座App 1 Android常用控件 1.1 TextView控件 1.1.1 简介 1.1.2属性 1.1.3 扩展属性 1.1.4 TextView的使用方法 1.1.5总结 1.2 E ...
- Android入门到精通|安卓/Android开发零基础系列Ⅱ【职坐标】-学习笔记(1)-- 常用控件及资源介绍
前言 为了巩固Android基础知识,回顾一下学习内容,才有此学习笔记. IDE Androdi Studio 4 + Genymotion 创建项目 修改项目的 build.gradle,添加国内镜 ...
- 记录学习Android基础的心得05:常用控件(基础篇)
文章目录 前言 一.复合按钮CompoundButton的常见子类 1.单选按钮RadioButton 2.复选框CheckBox 3.开关Switch 二.进度展示控件 1.进度条ProgressB ...
- 设计器的使用及常用控件
设计器的使用及常用控件 文章目录 设计器的使用及常用控件 一.设计器 二.设计器中的常用控件 一.设计器 1.设计器的使用 2.通过代码操作ui文件 #include "mainwindow ...
- VS2010/MFC编程入门之二十(常用控件:静态文本框)
上一节鸡啄米讲了颜色对话框之后,关于对话框的使用和各种通用对话框的介绍就到此为止了.从本节开始鸡啄米将讲解各种常用控件的用法.常用控件主要包括:静态文本框.编辑框.单选按钮.复选框.分组框.列表框.组 ...
- openlayers添加按钮_OpenLayers3加载常用控件使用方法详解
本文实例为大家分享了OpenLayers3加载常用控件使用的具体代码,供大家参考,具体内容如下 1. 前言 地图控件就是对地图的缩放.全屏.坐标显示控件等,方便我们对地图进行操作.OpenLayers ...
- Windows Phone7屏幕方向与常用控件
跟林永坚老师学习wp7 屏幕方向(Orientation) 常用控件(Canvas,Grid,StackPanel,TextBlock,Image,MediaElement) 屏幕方向感应页面(Por ...
- 鸡啄米之VS2010/MFC编程入门之二十四(常用控件:列表框控件ListBox)
目录 一.目的: 1.点击列表框某个变量后,编辑框就显示出来这个变量名字 一.参考: 1.VS2010/MFC编程入门之二十四(常用控件:列表框控件ListBox) ①总结:good:亲测有效,适合多 ...
最新文章
- python中采用字典建立统,Python中使用Counter进行字典创建以及key数量统计的方法...
- [铁道部信息化管理]号外
- SAP CRM one order框架到了S/4HANA后是如何重构的
- PHP webshell
- rdlc报表输入中文出现小方块
- 使用XLog、Spring-Boot、And-Design-Pro搭建日志系统
- Mysql 索引案例学习
- 把live2D模型放上网页
- 多平台、简洁思维导图工具推荐-幕布[高级会员获取]
- QListView 的高性能加载方案
- Verilog语法练习
- 远程桌面用户账户无效
- 单击选定单元格后输入新内容_Excel表格处理基本操作部分习题参考解答
- 如何抓取安卓APP日志?
- 知名爆料者:新款MacBook Air采用类似iMac的多彩设计
- HTML中的Switch开关
- 【正点原子FPGA连载】第十九章IP核之双端口RAM实验 -摘自【正点原子】新起点之FPGA开发指南_V2.1
- 团队作业第六次——团队Github实战训练
- 用c语言实现字母排列组合,C语言字母排列组合的实现.doc
- FPGA实现SD卡音乐播放
热门文章
- 单片机c语言实现表格数据调用,哪位师傅知道51单片机怎样编写子程序?C语言的。在主程序里调...
- tiav15安装重启_西门子博途TIA Portal V15.1安装无限重启和.net3.5SP1错误处理
- 自动取款机如何使用无卡取款_如何设计700度高温下使用的自动夹具?
- net core mysql 连接池_EF Core 小坑:DbContextPool 会引起数据库连接池连接耗尽
- java list 自定义类型转换_java – 可以从List生成平面XML结构的XStream自定义转换器?...
- java遍历bean_javaweb利用javabean将数据库中内容遍历在页面输出
- mysql timestamp 更新_[mysql] timestamp自动更新和初始化
- 0基础培训java必须掌握的一些知识点
- PaddleClas
- PCL点云处理算法目录