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);
}
}
}
});