extjsscope

A. extjs函数调用方法

当前this所引用的作用域已经改变了,可简单修改为
init: function() {
var me = this;//保存作用域
this.control({
'userlist textfield[id=searchId]':{
keyup:function(textfield, e){

if (e.getKey() == 13) {
me .searchUserByEnter(textfield); //调用原作用域方法
}
}
}
}
规范点可参照extjs写成scope参数控制this

B. extjs中怎么添加事件

extjs中如何添加事件啊

JScript code
var mywin = Ext.create('Ext.window.Window', { title: 'asdfsfadfad', height: 400, width: 500, 'close': function (pa, oe) { Ext.MessageBox.alert('asfsa', 'asdfds'); } }); mywin.show();

我是用上面的方法给window添加一个close事件，事件到是正确执行了，但问题是window关闭不了，发现是事件和方法里有一个close，好像我这样做是把close方法给覆盖了一样的，想问是如何正确添加事件啊

Extjs绑定事件不是像楼主那样写的，楼主可以去看下EXTJS的API，里面应该介绍的会比较详细，以下给楼主整了个比较简单的窗口绑定事件，希望对楼主有所帮助。

JScript code
<script type="text/javascript" > Ext.onReady(function(){ Ext.define('testWindow', { extend : 'Ext.Window', alias : 'widget.testWindow', width : 300, height : 200, title:'test', items:[ { xtype:'button', text:"确定", listeners : { scope : this, click : function(){ alert(11); } } },{ xtype:'button', text:"取消", listeners : { scope : this, click : onClick } } ] }); var win = Ext.create('testWindow'); win.show(); }) function onClick(){ alert(112); } </script>

C. Extjs怎么实现下拉框多选

1、扩展js类库，在项目中建立一个 js文件，命名为:xxx.js 其代码为

if('function'!==typeofRegExp.escape)
{
RegExp.escape=function(s)
{
if('string'!==typeofs)
{
returns;
}
returns.replace(/([.*+?^=!:${}()|[]/\])/g,'\$1');
};
}

Ext.ns('Ext.form');

Ext.form.MultiSelect=Ext.extend(Ext.form.ComboBox,
{
checkField:'checked',
multi:true,
separator:',',
initComponent:function()
{
if(!this.tpl)
{
this.tpl='<tplfor=".">'+'<divclass="x-combo-list-item">'
+'<imgsrc="'+Ext.BLANK_IMAGE_URL+'"'
+'class="ux-MultiSelect-iconux-MultiSelect-icon-'
+'{[values.'+this.checkField+'?"checked":"unchecked"'
+']}">'
+'{[values.'+this.displayField+']}'
+'</div>'
+'</tpl>';
}

Ext.form.MultiSelect.superclass.initComponent.apply(this,arguments);

this.on(
{
scope:this,
beforequery:this.onBeforeQuery,
blur:this.onRealBlur
});

this.onLoad=this.onLoad.createSequence(function()
{
if(this.el)
{
varv=this.el.dom.value;
this.el.dom.value='';
this.el.dom.value=v;
}
});
},
initEvents:function()
{
Ext.form.MultiSelect.superclass.initEvents.apply(this,arguments);
this.keyNav.tab=false;
},
beforeBlur:function()
{
},
postBlur:function()
{
},

clearValue:function()
{
this.value='';
this.setRawValue(this.value);
this.store.clearFilter();
this.store.each(function(r)
{
r.set(this.checkField,false);
},this);
if(this.hiddenField)
{
this.hiddenField.value='';
}
this.applyEmptyText();
},
getCheckedDisplay:function()
{
varre=newRegExp(this.separator,"g");
returnthis.getCheckedValue(this.displayField).replace(re,this.separator+'');
},
getCheckedValue:function(field)
{
field=field||this.valueField;
varc=[];
varsnapshot=this.store.snapshot||this.store.data;
snapshot.each(function(r)
{
if(r.get(this.checkField))
{
c.push(r.get(field));
}
},this);

returnc.join(this.separator);
},
onBeforeQuery:function(qe)
{
qe.query=qe.query.replace(newRegExp(RegExp.escape(this.getCheckedDisplay())+'['+this.separator+']*'),'');
},
onRealBlur:function()
{
this.list.hide();
varrv=this.getRawValue();
varrva=rv.split(newRegExp(RegExp.escape(this.separator)+'*'));
varva=[];
varsnapshot=this.store.snapshot||this.store.data;

Ext.each(rva,function(v)
{
snapshot.each(function(r)
{
if(v===r.get(this.displayField))
{
va.push(r.get(this.valueField));
}
},this);
},this);
this.setValue(va.join(this.separator));
this.store.clearFilter();
},
onSelect:function(record,index)
{
if(this.fireEvent('beforeselect',this,record,index)!==false)
{
record.set(this.checkField,!record.get(this.checkField));

if(this.store.isFiltered())
{
this.doQuery(this.allQuery);
}

if(this.multi)
{
if(record.get("key")=="---"&&record.get(this.checkField))
{
this.setValue("---");
}
else
{
this.setValue(this.getCheckedValue());
}
}
else
{
this.clearValue();
this.value=record.get(this.valueField);
this.setRawValue(record.get(this.displayField));
this.list.hide();
}

this.fireEvent('select',this,record,index);
}
},
setValue:function(v)
{
if(v)
{
v=''+v;
if(this.valueField)
{
this.store.clearFilter();
this.store.each(function(r)
{
varchecked=!(!v.match('(^|'+this.separator+')'
+RegExp.escape(r.get(this.valueField))
+'('+this.separator+'|$)'));
r.set(this.checkField,checked);
},this);
this.value=this.getCheckedValue();
this.setRawValue(this.getCheckedDisplay());
if(this.hiddenField)
{
this.hiddenField.value=this.value;
}
}
else
{
this.value=v;
this.setRawValue(v);
if(this.hiddenField)
{
this.hiddenField.value=v;
}
}
if(this.el)
{
this.el.removeClass(this.emptyClass);
}
}
else
{
this.clearValue();
}
},
selectAll:function()
{
this.store.each(function(record)
{
record.set(this.checkField,true);
},this);
this.doQuery(this.allQuery);
this.setValue(this.getCheckedValue());
},
deselectAll:function()
{
this.clearValue();
}
});
Ext.reg('multiSelect',Ext.form.MultiSelect);

2、在ext-all.css文件最后，加入css样式

.ux-MultiSelect-icon{width:16px;height:16px;float:left;background-position:-1px-1px!important;background-repeat:no-repeat!important;}
.ux-MultiSelect-icon-checked{background:transparenturl(../images/default/menu/checked.gif);}
.ux-MultiSelect-icon-unchecked{background:transparenturl(../images/default/menu/unchecked.gif);}

3、使用

varDepartUserStore=newExt.data.Store(
{
proxy:newExt.data.HttpProxy(
{
url:'/Web/Manage/DeskTop/JSON/ScheleManager/GetSimpleDepartUserInfo.aspx'
}),
//读取Json
reader:newExt.data.JsonReader(
{totalProperty:"totalCount",root:"root"},
[
{name:'UserId',type:'int'},
{name:'UserName',type:'string'}
])
});

varDepartUserCbox=newExt.form.MultiSelect(
{
fieldLabel:'姓名',
labelStyle:'width:80px',
width:150,
editable:false,
id:'DepartUserDS',
hiddenName:'DepartUserIdDS',
store:DepartUserStore,
emptyText:'--请选择--',
allowBlank:false,
blankText:'请选择',
mode:'remote',
displayField:'UserName',
valueField:'UserId',
triggerAction:'all',
selectOnFocus:true,
listWidth:200
});

DepartUserStore.on('load',function()
{
DepartUserCbox.selectAll();//全选
});

DepartUserStore.load();

D. Extjs 键盘监听事件问题

Ext.onReady(function() {
//注，该类只能监听导航键，即
Enter
Space
Left
Right
Up
Down
Tab
Escape
Page Up
Page Down
Delete
Backspace
Home
End

var nav = Ext.create('Ext.util.KeyNav', "area", {//这里的area是要监听的网页元素id
"up" : function(e){//向上键
alert('up');
},
"down" : function(e){//向下键
alert('down');
}
scope : this
});

//监听其他
var key = new Ext.KeyMap(document, {
key: "", // Enter
fn: function()
{
alert("键盘");
},
scope: this
});
});

E. Extjs 前台向后台传时间类型数据 数据格式发生变化怎么解决

假设你的处理是这样，使用store和model，用datetime控件
你需要在model里写，
name: fieldname, type: 'date', dateFormat: DefaultLongDateFormat,
这样才可以从后台接收正确的格式

在datetime中写
submitFormat ： DefaultLongDateFormat,//这个是提交的格式
format : DefaultShortDateFormat//这个是显示格式

var DefaultLongDateFormat = 'Y/n/j G:i:s';//长日期格式
var DefaultShortDateFormat = 'Y/n/j';//短日期格式

DefaultLongDateFormat你要根据你后台的情况修改

F. 我在使用extjs做登录时当我把数据填充过后js报错，说ext-all.js语法错误，我不知道咋个解决，extjs是2.3.0

你提交的时候没有method,URL,把这两个加上再试试了。
f.getForm().submit({
method:'POST',
url:''
scope:this,
success : function() {
Ext.Msg.alert("成功", "恭喜，表单提交成功");
},
failure : function() {
Ext.Msg.alert("失败", "对不起，表单提交失败");
}
});

G. extjs 怎么触发click事件

Ext.getCmp("remember").fireEvent('click');

H. extjs里如何自动选中第一行数据

oad( [options] )
Loads data into the Store via the configured proxy. This uses the Proxy to make an asynchronous call to whatever storage backend the Proxy uses, automatically adding the retrieved instances into the Store and calling an optional callback if required. Example usage:
store.load({
scope: this,
callback: function(records, operation, success) {
// the operation object
// contains all of the details of the load operation
console.log(records);
}});
有一个callback函数，可以该回调函数中执行Grid选取第一条记录的操作。
Store.load({
callback: function(rec, oper, success){
if(success){
Ext.getCmp('Gridid').getSelectionModel().select(0,true);
}
}
});

I. extjs scope:this 问题

Extjs的scope:this是将作用域改变为整个控件的作用域。

J. extjs框架下如何实现利用鼠标滚轮放大、缩小、拖动图片

以下内容需要一定的ExtJs以及Js知识基础

Ext.define('window.ViewPicWin',{//定义一个类继承window所有配置都在该类里包括图片地址等
extend:'Ext.window.Window',
title:'大图查看',
bodyStyle:{
background:'url(背景图片地址)repeat'//此处给窗口加个背景图
},
bodyPadding:'1111',
autoShow:true,
modal:true,
alwaysOnTop:true,
scrollable:true,
width:900,
height:500,
config:{
src:null,//需要展示的图片地址
clickX:null,//存放鼠标按下时指针X的位置
clickY:null,//存放鼠标按下时指针Y的位置
isMoving:false,//一个标识作为判断当前鼠标是否按下状态即图片拖拽中状态
offset:1.2//放大倍数默认1.2倍与原图放大缩小
},
initComponent:function(){
varme=this;
varminWidth=me.width-9;//用作图片在window里的最小宽
varminHeight=me.height-54;//用作图片在window里的最小高（window的head大概54px）
Ext.applyIf(me,{
items:[{
xtype:'image',
width:minWidth,
height:minHeight,
src:me.getSrc(),
listeners:{
afterrender:{
fn:me.onAfterRender,//监听图片渲染完成事件
scope:me
}
}
}]
})
me.callParent(arguments);
},

onAfterRender:function(img,eOpts){
varwin=img.up('window');
varminPicWidth=img.getWidth();
varminPicHeight=img.getHeight();
Ext.get(img.getId()).on({//获得Ext.dom.Element添加事件这个区别于原生的element元素这里是ExtJs自己包装的element元素
'mousewheel':{//监听鼠标滚轮事件(火狐浏览器叫DOMMouseScroll)，extjs增加监听事件前面没有on区别于普通js，他是on('事件名':{...})
fn:function(e){
e.preventDefault();
vartype=e.getWheelDelta();
win.zoom(Ext.get(img.getId()),win.getOffset(),type>0?true:false,minPicWidth,minPicHeight,win,e.getX(),e.getY())
}
},
'mousedown':{
fn:function(e){
document.getElementById(img.getId()).style.cursor="move";
e.stopEvent();
win.setClickX(e.getX());
win.setClickY(e.getY());
win.setIsMoving(true);
}
},
'mouseup':{
fn:function(e){
if(win.getIsMoving()){
win.setClickX(null);
win.setClickY(null);
win.setIsMoving(false);
}
}
},
'mousemove':{
fn:function(e){
if(win.getIsMoving()){
varleft=e.getX()-win.getClickX();//x偏移量
vartop=e.getY()-win.getClickY();//y偏移量

if(img.getX()>(win.getX()+50)
||img.getY()>(win.getY()+100)){
document.getElementById(img.getId()).style.cursor="not-allowed";
win.setIsMoving(false);
vartask=newExt.util.DelayedTask(function(){
win.setScrollX(0,false);
win.setScrollY(0,false);
img.setX(win.getX()-5);
img.setY(win.getY()+45);
document.getElementById(img.getId()).style.cursor="move";
});
task.delay(1000);
}elseif((img.getX()+img.getWidth())<(win.getX()+win.getWidth()-50)
||img.getY()+img.getHeight()<win.getY()+win.getHeight()-100){
document.getElementById(img.getId()).style.cursor="not-allowed";
win.setIsMoving(false);
vartask=newExt.util.DelayedTask(function(){
win.setScrollX(img.getWidth(),false);
win.setScrollY(img.getHeight(),false);
img.setX(win.getX()-(img.getWidth()-win.getWidth()));
img.setY(win.getY()-(img.getHeight()-win.getHeight()));
document.getElementById(img.getId()).style.cursor="move";
});
task.delay(1000);
}else{
img.setX(win.getLastMarginX()+left);
img.setY(win.getLastMarginY()+top);
}
}
}
}
});
},

/*
*图片放大缩小
*el:图片dom对象
*offset:放大缩小的倍数
*type:true/false放大缩小的标识
*mw:最小宽度
*mh:最小高度
*win:图片外面的window(标定scroll用)x:鼠标x坐标y:鼠标y坐标
*/
zoom:function(el,offset,type,mw,mh,win,x,y){
varwidth=el.getWidth();
varheight=el.getHeight();
varnwidth=type?(width*offset):(width/offset);
varnheight=type?(height*offset):(height/offset);
el.setWidth(nwidth<=mw?mw:nwidth);
el.setHeight(nheight<=mh?mh:nheight);
//修正参数
varelX=el.getX(),
elY=el.getY(),
elW=el.getWidth(),
elH=el.getHeight(),
winX=win.getX(),
winY=win.getY(),
winW=win.getWidth(),
winH=win.getHeight();

if(elX>=winX+50||elY>winY+100){//左上角距离偏大
el.setX(winX);
el.setY(winY+45);
}elseif(elX+elW<winX+winW-50||elY+elH<winY+winH-100){//右下角距离偏大
el.setX(winX-(elW-winW));
el.setY(winY-(elH-winH));
}else{//正常
varleft=(x-el.getX())*(offset-1);//当前鼠标位置x偏移量
vartop=(y-el.getY())*(offset-1);//当前鼠标位置y偏移量
if(type){
win.setScrollX(win.getScrollX()+left,false);
win.setScrollY(win.getScrollY()+top,false);
}else{
win.setScrollX(win.getScrollX()-left/offset<=0?0:win.getScrollX()-left/offset,false);
win.setScrollY(win.getScrollY()-top/offset<=0?0:win.getScrollY()-top/offset,false);
}
}
}
});