`
coral0212
  • 浏览: 101527 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

EXT 方法集锦

    博客分类：
  • UI
EXTCSSWindowsF#J# 
阅读更多

EXT 方法集锦 (后续添加中)

 

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

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

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

   modal:true

    就能到达效果.

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

 var login = new Ext.form.FormPanel({
	    	url : '/mcslogon.action',
	    	region:'center',
	        labelWidth:43,
	        border:false,
	        bodyStyle:'background: url(/images/login/zdjw_login.jpg) no-repeat;',
	        width: 456,
	        height:400,
	        items:[{ 
	        	style:'margin-top:150px;margin-left:185px;',
				layout : 'form',
				bodyStyle:'background:transparent;',
				width : 200,
				border : false,
				items : [{
					xtype : 'textfield',
					fieldLabel :' <font color="#FFFFFF" >用户名',
					name : 'j_username',
					anchor:'99%',
					allowBlank:false
				}] 
	        },{
	        	style:'margin-left:185px;',
	        	width : 200,
				bodyStyle:'background:transparent;',
				layout : 'form',
				border : false,
				items : [{
					xtype : 'textfield',
					fieldLabel : ' <font color="#FFFFFF" >密   码',
					inputType:'password', 
					name : 'j_password',
					anchor:'99%',
					allowBlank:false
				}]
	        },{ 
	        	style:'margin-top:5px;margin-left:238px;',
	        	width : 70,
				layout : 'form',
				bodyStyle:'background:transparent;',
				border : false,
				items : [{
					xtype : 'button',
					iconCls:'login_submit',
					text : '确定',
					handler:loginSubmit
				}]
	        },{ 
	        	style:'margin-top:-21px;margin-left:315px;',
	        	width : 70,
				layout : 'form',
				bodyStyle:'background:transparent;',
				border : false,
				items : [{
					xtype : 'button',
					iconCls:'login_reset',
					text : '注册',
					handler :function(){
							//win.setDisabled(true);
           					rigestWin.show();

        				} 
				}]
	        }],
		     keys:[{
		     	key:13,
		     	fn:loginSubmit
		     }]
	    });

  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为可选参数，在关闭弹出窗口后出发。


Ext.MessageBox.alert("title","msg");


Ext.MessageBox.alert("title","msg",function(){alert("关闭对话框后弹出！")});

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


Ext.MessageBox.confirm("title","msg",function(e){alert(e);});
 


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


3.Ext.MessageBox.prompt()方法
  有六个参数，比前面alert方法多一个返回值和是否多行。
Ext.MessageBox.prompt("title","msg");



Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text);});
//输入"qianxudetianxia",点击ok按钮，弹出ok-qianxudetianxia


Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text);},this,true);
//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:

  

Ext.MessageBox.show({
    title:"标题",
    msg:"内容的消息",
    buttons:{"ok":"我不再显示OK了"},
    fn:function(e){alert(e);},
    animEl:"test1",
    width:500,
    icon:Ext.MessageBox.INFO,
    closable:false,
    progress:true,
    wait:true,
    progressText:"进度条"
  // prompt:true
  // multiline:true
});
 


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


Ext.get("btn1").on(
          "click",
          function(){
            Ext.MessageBox.show({
                title:"df",
                msg:"dfd",
                progress:true,
                width:300,
                closable:true
            });
            var f=function(v){
              return function(){
                if(v==12)
                {
                  Ext.MessageBox.hide();
                  //alert("加载完成！");
                }
                else
                {
                  var i=v/11;
                  Ext.MessageBox.updateProgress(i,Math.round(100*i)+"% completed",i);
                }
              }
            }
            for(var i=1;i<13;i++)
            {
              setTimeout(f(i),i*500);//从点击时就开始计时，所以500*i表示每500ms就执行一次
            }
          }
  );



Ext.get("btn1").on(
          "click",
          function(){
            Ext.MessageBox.show({
                title:"时间进度条",
                msg:"5s后关闭进度框",
                progress:true,
                width:300,
                wait:true,
                waitConfig:{interval:600},//0.6s进度条自动加载一定长度
                closable:true
            });
            setTimeout(function(){Ext.MessageBox.hide()},5000);//5后执行关闭窗口函数
          }
 

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

6.ext 工具栏toolbar的按钮的可用设置

 

_grid.getTopToolbar().items.item(0).disable();
_grid.getTopToolbar().items.item(2).enable();

7.获取url的参数值

Boat.APP = {
	//获取url参数值 name:参数名称 ; def :默认值
	geturlPar: function(name,def){
		var value = location.search.match(new RegExp('[\?\&]'+name+'=([^\&]*)(\&?)'));
		return value?decodeURIComponent(value[l]:def?def:'');
	}
};

  8 改变ext行列样式

    修改GRID某一行样式 grid.getView().addRowClass(r,css) //修改grid某一单元格样式                  Ext.get(grid.getView().getCell(r,c)).addClass(css) 或 grid.getView().getRow(r).style.backgroundColor="red"; //css样式为自定义样式

 

 

 

获得Ext.grid.EditorGridPanel编辑信息 grid.on('afteredit',function(e){ e.row;//修改过的行从0开始 e.column;//修改列 e.originalValue;//原始值 e.value;//新值 });

 

 

控制GRID单元个样式/高度/网格线

/增加CSS样式即可达到效果 .x-grid3-row td,.x-grid3-summary-row td{ line-height:18px;//控制GRID高度 vertical-align:top; -moz-user-select:none; border-right: 1px solid #eceff6 !important;//控制列线 border-top: 1px solid #eceff6 !important;//控制行线 }




viewConfig : {
                forceFit : true,
                getRowClass : function(record,rowIndex,rowParams,store){
                    //禁用数据显示红色
                    if(rowIndex%2==0){
                        return 'x-grid-back-css1';
                    }else{
                        return 'x-grid-back-red';
                    }
                   
                }
            },

 

 

 

 

有什么方法可以给 Ext.form.TextField组件后边 多加出2个字 。比如我的组件里边写的是价格  我想给组件后添加个（元）。有高手帮忙下么？


方法1：

Ext.get("你的文本框ID").insertSibling({
    tag:'span',
    html:'*'
},'after')
 

 

 

 

方法2：

{
 xtype:'label',
 html:'文本'
}
 


用column的布局 到文本框右边

 

 

 

怎么用内部函数调用外部函数。。。

createNode : function(ro){}
，processResponse : function(response, node, callback) {
this.createNode
}，
现在变成，
createNode : function(ro){}
，processResponse : function(response, node, callback) {
function abc(){
this.createNode//问一下这里的this要怎么转换作用域呢？
}
}，
 

 

createNode : function(ro){}
，processResponse : function(response, node, callback) {
var self = this;
function abc(){
self.createNode……
}
}，
 

 

 

 

  • 大小: 39 KB
分享到：
| Exchanging Complex Data with Back-End Sy ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    EXT dojochina Ext类静态方法.rar

    EXT dojochina Ext类静态方法是一个关于EXT框架在JavaScript中的使用的主题，主要聚焦于Ext类的静态方法。EXT是一个强大的前端开发框架，由Sencha公司开发，它提供了丰富的组件库，用于构建复杂的Web应用程序。在EXT...

    ext 的一些常用方法

    ext 的一些常用方法 ext 的一些常用方法 ext 的一些常用方法

    经典Ext常用方法详解

    经典Ext常用方法详解,帮助你攻克Ext难题。

    Ext.Store的获取方法

    总结来说，在Ext.js中，获取`Ext.Store`应使用`Ext.getStore`方法，而不是`Ext.getCmp`，因为Store是通过`storeId`在内存中注册和管理的，而不是作为页面上的一个可视组件。同时，Store的设计方式有助于数据的安全性...

    EXT dojochina Ext方法重写.rar

    EXT dojochina Ext方法重写是一个关于EXT.js框架中函数重写的专题。EXT.js是一个流行的JavaScript库，用于构建富客户端应用，它提供了丰富的组件、布局管理和数据绑定机制。在EXT.js中，方法重写是一种常见的实践，...

    Ext一些方法的重写

    在这个主题"Ext一些方法的重写"中，我们将深入探讨如何在`Ext`库中重写方法，以满足特定的需求或优化性能。 `Ext.extend()` 是`Ext`库中的一个核心函数，它用于创建类的继承链。在JavaScript这种没有类的语言中，`...

    在eclipse中可以显示ext方法的组件

    在Eclipse中，"ext方法"通常指的是扩展方法，这是一种在编程时增加类功能的方式，尤其在一些动态语言如Groovy中常见。然而，Java本身并不直接支持扩展方法，但通过Eclipse的插件或特定的编程实践，我们可以实现类似...

    在windows下使用Ext2Fsd访问EXT4分区

    在Windows操作系统中，由于默认不支持Linux文件系统如EXT4，因此无法直接读取或写入EXT4格式的分区。但有一些第三方工具可以帮助我们解决这个问题，其中之一就是Ext2Fsd。Ext2Fsd是一个免费的开源软件，专门设计用于...

    EXT4 自己整理的一些常用方法

    这个压缩包文件包含了一些EXT4文件系统使用中的常见方法和技巧，主要分为四个部分：grid、function、data和util。 1. **Grid**： Grid在EXT中通常指的是数据网格，用于展示和管理大量结构化数据。这部分可能包含了...

    ext4解压工具和操作方法.rar

    包含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....

    Windows读取Ext4分区的工具 Ext2Read

    **使用方法** 1. 下载并安装Ext2Read，注意提供的压缩包文件名为`ext2explore.exe`，这通常是一个可执行文件。 2. 安装完成后，运行程序，选择需要访问的Linux分区。 3. 在程序界面中，你可以看到类似Windows资源...

    Ext AJAX submit方法实例

    Ext AJAX的`submit`方法是Ext JS框架中用于发送异步HTTP请求的重要组成部分，它主要用于处理表单数据的提交。这个方法提供了与服务器端进行数据交互的灵活性，使得无需页面刷新就能更新或保存数据，极大地提高了用户...

    ext3.jar ext使用非常多

    EXT3.jar的使用，意味着开发者可以在Java环境中直接调用EXT的相关类和方法，实现客户端的动态渲染。这种服务器端集成的方式，减少了前端与后端的通信负担，提高了应用的整体性能。在实际项目中，开发者可以通过Maven...

    Ext、Ext4中各个组件、属性、方法详解

    Ext、Ext4中各个组件、属性、方法详解，一个不漏；Ext学习入门及参考最好的资料

    制作ext2文件系统的方法 .

    在Linux操作系统中，EXT2（Second Extended File System）是一种经典的文件系统，由Rene Rebeau于1992年开发。它最初是为了解决当时存在的MINIX和EXT文件系统的局限性而设计的，特别是在处理大文件和大量小文件方面...

    EXT dojochina Ext类构造方法.rar

    在本压缩包“EXT dojochina Ext类构造方法.rar”中，主要聚焦于Ext类的构造方法这一核心概念。Ext JS是一个强大的前端开发框架，它基于组件模型，提供了丰富的用户界面组件和强大的数据绑定机制。深入理解Ext类的...

    ext教程、ext核心API 、ext中文教程

    教程会详细讲解这些组件的属性、方法和事件，帮助初学者快速上手。 "EXT核心API"则深入介绍了EXT的内部机制和主要类库，包括Store（数据存储）、Model（数据模型）、Controller（控制器）以及Ext.application（应用...

    Windows 7下使用Ext2Fsd读取写入Linux Ext3&Ext4分区文件

    总之，Ext2Fsd提供了一种实用的方法，使得Windows用户能够在不离开熟悉的Windows环境的情况下，方便地访问和管理Linux Ext3和Ext4分区。通过正确安装、配置和使用，你可以轻松跨越Windows与Linux之间的文件系统障碍...

    EXT dojochina Ext类实例方法.rar

    EXT dojochina Ext类实例方法.rar 是一个与EXT JS框架相关的压缩文件，EXT JS是一个广泛使用的JavaScript库，用于构建富互联网应用程序（RIA）。这个压缩包可能包含了关于EXT JS中的Ext类的一些实例方法的详细教程或...

Magicbox
Global site tag (gtag.js) - Google Analytics