EXT 方法集锦

最新推荐文章于 2020-06-18 09:43:17 发布
转载 最新推荐文章于 2020-06-18 09:43:17 发布 · 2k 阅读 · 0
文章标签：

#ext #function #border #layout #login #button

本文介绍了ExtJS框架中的一些实用技巧，包括如何在工具栏中添加元素、设置弹窗遮罩效果、创建复杂的登录表单面板、实现表格和树形控件的默认选中状态以及MessageBox的各种使用方法。
 

1. ext的tbar中加入其他的元素方法

Js代码 复制代码
  1. tbar: [  
  2.     '公司名称：' ,  
  3.     {xtype:'textfield' ,width:200,id: 'sDepName' ,name: 'sDepName' },{xtype: 'tbseparator' },  
  4.     {text:'搜索' ,iconCls: 'search' ,handler:searchClick},{xtype: 'tbseparator' },   //iconCls是自定义中的css中说明的   
  5.     {text:'新增' ,iconCls: 'add' ,handler:addClick},{xtype: 'tbseparator' },  
  6.     {text:'查看' ,iconCls: 'view' ,handler:viewClick},{xtype: 'tbseparator' },  
  7.     {text:'编辑' ,iconCls: 'post' ,handler:editClick},{xtype: 'tbseparator' },  
  8.     {text:'删除' ,iconCls: 'del' ,handler:delClick},{xtype: 'tbseparator' },  
  9.     {text:'刷新' ,iconCls: 'refresh' ,handler: function  (){depDs.reload();}},{xtype: 'tbseparator' }                      
  10.  ]  

2.ext中弹出windows窗口后,要对windows以下的地方设为灰色,不可编辑.这时只要在弹出的windows里设置这个属性

Js代码 复制代码
  1. modal: true   

    就能到达效果.

3.一个比较少用的,但是有很多可以借鉴的formpanel

Js代码 复制代码
  1. var  login =  new  Ext.form.FormPanel({  
  2.         url : '/mcslogon.action' ,  
  3.         region:'center' ,  
  4.         labelWidth:43,  
  5.         border:false ,  
  6.         bodyStyle:'background: url(/images/login/zdjw_login.jpg) no-repeat;' ,  
  7.         width: 456,  
  8.         height:400,  
  9.         items:[{   
  10.             style:'margin-top:150px;margin-left:185px;' ,  
  11.             layout : 'form' ,  
  12.             bodyStyle:'background:transparent;' ,  
  13.             width : 200,  
  14.             border : false ,  
  15.             items : [{  
  16.                 xtype : 'textfield' ,  
  17.                 fieldLabel :' <font color="#FFFFFF" >用户名' ,  
  18.                 name : 'j_username' ,  
  19.                 anchor:'99%' ,  
  20.                 allowBlank:false   
  21.             }]   
  22.         },{  
  23.             style:'margin-left:185px;' ,  
  24.             width : 200,  
  25.             bodyStyle:'background:transparent;' ,  
  26.             layout : 'form' ,  
  27.             border : false ,  
  28.             items : [{  
  29.                 xtype : 'textfield' ,  
  30.                 fieldLabel : ' <font color="#FFFFFF" >密   码' ,  
  31.                 inputType:'password' ,   
  32.                 name : 'j_password' ,  
  33.                 anchor:'99%' ,  
  34.                 allowBlank:false   
  35.             }]  
  36.         },{   
  37.             style:'margin-top:5px;margin-left:238px;' ,  
  38.             width : 70,  
  39.             layout : 'form' ,  
  40.             bodyStyle:'background:transparent;' ,  
  41.             border : false ,  
  42.             items : [{  
  43.                 xtype : 'button' ,  
  44.                 iconCls:'login_submit' ,  
  45.                 text : '确定' ,  
  46.                 handler:loginSubmit  
  47.             }]  
  48.         },{   
  49.             style:'margin-top:-21px;margin-left:315px;' ,  
  50.             width : 70,  
  51.             layout : 'form' ,  
  52.             bodyStyle:'background:transparent;' ,  
  53.             border : false ,  
  54.             items : [{  
  55.                 xtype : 'button' ,  
  56.                 iconCls:'login_reset' ,  
  57.                 text : '注册' ,  
  58.                 handler :function (){  
  59.                         //win.setDisabled(true);   
  60.                             rigestWin.show();  
  61.   
  62.                     }   
  63.             }]  
  64.         }],  
  65.          keys:[{  
  66.             key:13,  
  67.             fn:loginSubmit  
  68.          }]  
  69.     });  

  4.ext的默认选中

         grid默认    grid.getSelectionModel().selectRow(index);

         tree默认    node.select(); 这里的node是树的任一个节点

  5.ext.message用法:

            1.Ext.MessageBox.alert()方法
               有四个参数，为简单起见，主要介绍前面三个参数：
               alert( title , msg , function(){} )
                其中title，msg为必选参数，function为可选参数，在关闭弹出窗口后出发。


Js代码 复制代码
  1. Ext.MessageBox.alert( "title" , "msg" );  
  2.   
  3.   
  4. Ext.MessageBox.alert("title" , "msg" , function (){alert( "关闭对话框后弹出！" )});   

     2.Ext.MessageBox.confirm()方法
         基本上同alert()方法一模一样。
         注意这点：


Js代码 复制代码
  1. Ext.MessageBox.confirm( "title" , "msg" , function (e){alert(e);});  
 



这个参数e是什么？它是你点击的弹出框的按钮的值，三种值：yes,no,cancel.Alert()方法也是如此，不过只有两种值：ok，cancel.


3.Ext.MessageBox.prompt()方法
  有六个参数，比前面alert方法多一个返回值和是否多行。
Js代码 复制代码
  1. Ext.MessageBox.prompt( "title" , "msg" );  
  2.   
  3.   
  4.   
  5. Ext.MessageBox.prompt("title" , "msg" , function (e,text){alert(e+ "-" +text);});  
  6. //输入"qianxudetianxia",点击ok按钮，弹出ok-qianxudetianxia   
  7.   
  8.   
  9. Ext.MessageBox.prompt("title" , "msg" , function (e,text){alert(e+ "-" +text);}, this , true );  
  10. //true为多行，this表示作用域   
 


4.Ext.MessageBox.show()方法
  功能很强大，采用config配置形式，比前面的方法使用更方便。
  参数很多，在此列举最常用的配置参数：


引用:
1.animEl:对话框弹出和关闭时的动画效果，比如设置为“id1”，则从id1处弹出并产生动画，收缩则相反
2.buttons:弹出框按钮的设置，主要有以下几种：Ext.Msg.OK,
                                        Ext.Msg.OKCANCEL,
                                        Ext.Msg.CAMCEL,
                                        Ext.Msg.YESNO,
                                        Ext.Msg.YESNOCANCEL
  你也可以自定义按钮上面的字：{"ok","我本来是ok的"}。
  若设为false，则不显示任何按钮.
3.closable:如果为false，则不显示右上角的小叉叉，默认为true。
4.msg:"消息的内容"
5.title:"标题"
6.fn:关闭弹出框后执行的函数
7.icon：弹出框内容前面的图标，取值为Ext.MessageBox.INFO，
                                      Ext.MessageBox.ERROR,
                                  Ext.MessageBox.WARNING,
                                  Ext.MessageBox.QUESTION
8.width:弹出框的宽度，不带单位
9.prompt：设为true，则弹出框带有输入框
10.multiline：设为true，则弹出框带有多行输入框
11.progress:设为true，显示进度条，（但是是死的）
12.progressText:显示在进度条上的字
13.wait：设为true，动态显示progress
14.waitConfig:配置参数，以控制显示progress

example:

 

Js代码 复制代码
  1. Ext.MessageBox.show({  
  2.     title:"标题" ,  
  3.     msg:"内容的消息" ,  
  4.     buttons:{"ok" : "我不再显示OK了" },  
  5.     fn:function (e){alert(e);},  
  6.     animEl:"test1" ,  
  7.     width:500,  
  8.     icon:Ext.MessageBox.INFO,  
  9.     closable:false ,  
  10.     progress:true ,  
  11.     wait:true ,  
  12.     progressText:"进度条"   
  13.   // prompt:true   
  14.   // multiline:true   
  15. });  
 


5.Ext.MessageBox.show()中的进度条的使用
  首先必须知道例外两个方法 Ext.MessageBox.hide()和Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参数，看名字就知道意思)，
  注意value为0-1之间的数，表示进度条的进度.
  第一种：（通过进度的大小控制进度，满进度为1）


Js代码 复制代码
  1. Ext.get( "btn1" ).on(  
  2.           "click" ,  
  3.           function (){  
  4.             Ext.MessageBox.show({  
  5.                 title:"df" ,  
  6.                 msg:"dfd" ,  
  7.                 progress:true ,  
  8.                 width:300,  
  9.                 closable:true   
  10.             });  
  11.             var  f= function (v){  
  12.               return   function (){  
  13.                 if (v==12)  
  14.                 {  
  15.                   Ext.MessageBox.hide();  
  16.                   //alert("加载完成！");   
  17.                 }  
  18.                 else   
  19.                 {  
  20.                   var  i=v/11;  
  21.                   Ext.MessageBox.updateProgress(i,Math.round(100*i)+"% completed" ,i);  
  22.                 }  
  23.               }  
  24.             }  
  25.             for ( var  i=1;i<13;i++)  
  26.             {  
  27.               setTimeout(f(i),i*500);//从点击时就开始计时，所以500*i表示每500ms就执行一次   
  28.             }  
  29.           }  
  30.   );  
  31.   
  32.   
  33.   
  34. Ext.get("btn1" ).on(  
  35.           "click" ,  
  36.           function (){  
  37.             Ext.MessageBox.show({  
  38.                 title:"时间进度条" ,  
  39.                 msg:"5s后关闭进度框" ,  
  40.                 progress:true ,  
  41.                 width:300,  
  42.                 wait:true ,  
  43.                 waitConfig:{interval:600},//0.6s进度条自动加载一定长度   
  44.                 closable:true   
  45.             });  
  46.             setTimeout(function (){Ext.MessageBox.hide()},5000); //5后执行关闭窗口函数   
  47.           }  
 

1.interval:进度的频率
2.duration：执行进度的持续时间，超过这个时间后，interval失效，不再产生进度效果，但进度狂也不会消失。
3.fn:duration的时间到后执行的函数
所以，上面的通过时间控制进度另外一种写法为:
  
Js代码 复制代码
  1. Ext.get( "btn1" ).on(  
  2.          "click" ,  
  3.          function (){  
  4.            Ext.MessageBox.show({  
  5.                title:"时间进度条" ,  
  6.                msg:"5s后关闭进度框" ,  
  7.                progress:true ,  
  8.                width:300,  
  9.                wait:true ,  
  10.                waitConfig:{  
  11.                              interval:600,  
  12.                              duration:5000,  
  13.                              fn:function (){  
  14.                                Ext.MessageBox.hide();//让进度条消失   
  15.                              }},  
  16.                closable:true   
  17.            });  
  18.            //setTimeout(function(){Ext.MessageBox.hide()},5000);   
  19.          }  
  20.  );  
  效果一样。
Js代码 复制代码
  1. Ext.MessageBox.show({  
  2.             title:'提示' ,   
  3.             msg:'该过11程正在统计中11...' ,  
  4.             modal : false  ,  
  5.             progress:true   ,  
  6.             wait :true   ,  
  7.             closable :true   
  8.         });  
 

Ext JS 如何定义公用方法（单例类 or 静态方法）
oscar999的专栏
09-15 663
这种类型的类在后端语言中一般使用静态方法或者是单例类来是实现， 在Ext JS中实现的思路也基本类似， 这里介绍三种实现公用方法的方式： 1. 基于JS的原生方式实现公用方法—立即执行函数 2. [推荐]定义Ext JS的单例类 3. 在一般类中使用静态关键字statics实现
extjs两个tbar问题探讨
01-19
版本：extjs3.4 接触过extjs的同志们都知道每个panel都有一个tbar(top bar 上面工具栏) ,bbar(bottom bar 底部工具栏) 大家做查询页面，一般都是啥样子的？ 最基本的是一个table，来显示数据。 再进一步： 添加对数据的操作，比如添加按钮 再进一步： 一般查询都会有查询条件，查询条件可以快速定位。 那对于extjs来说，extjs中封装了很多组件，其中组件的概念很类似于java swing，比如panel，button，component，container等这种东西。 对于上述的查询页面，做java开发，相比一点问题都没有，三个table，或三个d
ext常用方法
nicelife19的专栏
10-22 498
Ext.util.Observable:一个抽象基类，为事件机制的管理提供一个公共接口,如果你希望的类可以有事件，就继承它吧 Ext.apply:如果只传入两个参数，则将C继承D的所有方法属性，如果定义了B则每次都先继承B的方法属性然后再继承D的方法属性，即B是默认继承对象 1、Ext.apply(Object obj, Object config, Object defaults ) :...
Ext 中组件中的tbar 换行显示
xiaoshang的专栏
01-17 4166
有些时候Panel 中的按钮一行不够显示的时候，这个时候我们可以考滤让按钮显示在两行。 var tbarForm = new Ext.form.FormPanel({ frame : true, layout : 'column', collapsible : true, // hight:70, defaultType : 'textfield',
Ext.js 方法
qq_36987708的博客
01-14 1342
面是几个内置函数，主要在Ext JS中使用: Ext.is类: 此类检查您使用的平台，无论是手机还是桌面，Mac或Windows操作系统。 这些是与Ext.is类相关的以下方法 编号 方法和描述 1 Ext.is.Platforms 此函数返回此版本可用的平台。 例如。 当你运行下面的函数，它返回如下: [Object { property=...
ext方法整理
weixin_37765605的博客
06-18 321
//------------------------- //清空panel等后面空白属性 //------------------------- baseCls:"x-plain" //------------------------- //有关于是否button //------------------------- Ext.Msg.confirm("提示", "你确定要删除该用户吗？", function (button) { if (button == "yes") { } //-------
ext监听事件方法[初级篇]
12-10
本文将深入探讨`Ext`对象的监听事件方法，以【初级篇】的角度出发，讲解如何使用`addListener`和`on`方法来绑定事件处理函数。 首先，我们需要了解基本的HTML结构，如示例中给出的`<input>`标签，它定义了一个ID为...
最有效的方法是删除shell360ext.dll文件
最新发布
10-16
shell360ext.dll是与360安全卫士相关的DLL文件，主要为系统提供扩展功能。然而，在某些情况下，用户可能需要删除该DLL档案以解决冲突、感染或误删等问题。本文将深入探讨如何安全且高效地删除shell360ext.dll，并...
ext4解压工具和操作方法.rar
04-04
包含3个工具：make_ext4fs、simg2img、kusering.sh。 1. 解压system.img为system.img.ext4。命令：simg2img system.img system.img.ext4 2. 创建system.img.ext4挂载目录tmp； 命令：mkdir tmp； 3. 挂载system....
ext for eclipse插件安装方法
12-08
第一：eclipse环境建立（基于项目组目前的环境设置） 第二：下载jsEclipse... 第四：打开任意一个js文件(为了出现JSEclipse菜单)，在JSEclipse菜单下，选择Add Library，导航到ext-all-debug.js，引入该库，然后在菜单
extjs 常用方法总结 备忘录
z826903251的专栏
10-11 1236
Ext学习笔记 1：ext.decode与ext.encode Ext.decode方法是把字符串转换成对象，ext.encode方法是把对象转换成字符串。   例如：json字符串   2.ext.apply的用法：                             Ext中apply及applyIf方法的应用 apply及applyIf方法都是用于实现把一个对象中的属
Ext中显示多行tbar方法
学无止境
07-30 6655
ExtJS <!-- 注意：ext-base.js必须放在ext-all.js前面 --> var oneTbar=new Ext.Toolbar({ items:[ {text:'复制'}, {text:'粘贴'} ] }); var twoTbar=new Ext.Toolbar({
ExtJS基础第四讲学习
xiaozhengN的博客
11-10 323
第四讲：工具栏和菜单栏 一、头部工具栏。 准备工作，创建一个Panel，代码如下。 Ext.onReady( function() { var mypanel = new Ext.Panel({ renderTo:hello, width:300, height:300, title:"Panel", html:"测试Panel...
Ext 中带有tbar按钮右侧对齐方法
weixin_30737363的博客
03-28 264
如标题所示： 关键就在那个‘－>‘，这是一个fill element,它下面的元素将会靠右侧对齐。自动填充的功能。 关键符号'-',代表一个分隔符效果 tbar: ["->",{ id: 'addExceltab', text: '添加Excel文件', iconCls: 'ok-icon'...
Extjs grid 的title和tbar的位置
Ellie
05-08 1818
大部分的时候我们需要将title放在tbar的下面，但是在Extjs中我们直接放不可以成功，会变成下面的样子。 这种是直接在grid加tbar,没有进行任何设置。 xtype:'gridbase', title: '石油特别收益金比率表', titleAlign: "center", ...
ExtJs组件的获取方式
idomyway的博客
12-01 3939
需求ExtJs中有多种捕捉元素的方法,其中Ext.get(),Ext.select(),Ext.query()是获得的dom，不是获得的Ext定义组件。 ExtJS也有自己独特的方式查找组件。本次从全局查找、容器内查找、form表单查找、通用组件等4个方面介绍组件的查找方式。 ###目录 全局查找方式 容器内查找 form查找子组件 通用组件查找方式 1. 全局查找方式全局查找方式指在整个E
EXT实例集锦：学习与开发实用资源
综上所述，这些知识点涵盖了Ext JS实例集锦的基本概念、重要性、学习方法以及文件格式和命名规则。对于希望通过实例学习Ext JS的开发者来说，这是一个宝贵的资源。通过浏览和学习这些实例，开发者可以更深入地理解...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值