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("关闭对话框后弹出!")});
基本上同alert()方法一模一样。
注意这点:
Ext.MessageBox.confirm("title","msg",function(e){alert(e);});
这个参数e是什么?它是你点击的弹出框的按钮的值,三种值:yes,no,cancel.Alert()方法也是如此,不过只有两种值:ok,cancel.
有六个参数,比前面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表示作用域
功能很强大,采用config配置形式,比前面的方法使用更方便。
参数很多,在此列举最常用的配置参数:
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 });
首先必须知道例外两个方法 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…… } },