本文目錄一覽：
extjs怎麼自定義函數
extjs的自定義事件主要分三步
1.在類中定義事件名稱：
Person = function(config) {
Person.superclass.constructor.call(this, config);
this.name = config.name || ”;
this.sex = config.sex || ”;
this.addEvents({
“nameChange”: true,
“sexChange”: true
});
};
2.實例化對象，並在該對象中定義事件的監聽函數
var person = new Person({
name: ‘binoruv’,
sex: ‘man’
});
person.on(“nameChange”, function() { alert(“Name has been changed to ” + this.name); });
person.on(“sexChange”, function() { alert(“Sex has been changed to ” + this.sex); });
3.觸發事件
Ext.extend(Person, Ext.util.Observable, {
//extend函數中可以自定義新的方法，也可以重寫原類的方法
setName: function(_name) {
if (this.name != _name) {
this.name = _name;
this.fireEvent(“nameChange”, this);
}
},
setSex: function(_sex) {
if (this.sex != _sex) {
this.sex = _sex;
this.fireEvent(“sexChange”, this);
}
}
});
person.setName(“binoruv”);
person.setSex(“woman”);
整個代碼如下：
script type=”text/javascript”
Person = function(config) {
/*
此處addEvents是調用Person父類Ext.util.Observable的方法
api中對Observable的描述：一個抽象基類（Abstract base class），為事件
機制的管理提供一個公共介面。子類應有一個”events”屬性來
定義所有的事件。
*/
Person.superclass.constructor.call(this, config);
this.name = config.name || ”;
this.sex = config.sex || ”;
this.addEvents({
“nameChange”: true,
“sexChange”: true
});
};
Ext.extend(Person, Ext.util.Observable, {
setName : function(_name) {
if (this.name != _name) {
this.name = _name;
this.fireEvent(“nameChange”, this);
}
},
setSex : function(_sex) {
if (this.sex != _sex) {
this.sex = _sex;
this.fireEvent(“sexChange”, this);
}
}
});
Ext.onReady(function() {
var person = new Person({
name: ‘binoruv’,
sex: ‘Man’
});
person.on(“nameChange”, function() { /*debugger;*/Ext.Msg.alert(“Message”,”Name has been changed to ” + this.name); });
person.on(“sexChange”, function() { /*debugger;*/Ext.Msg.alert(“Message”, “Sex has been changed to ” + this.sex); });
person.setName(“binoruv”);
person.setSex(“Woman”);
});
/script
ExtJs中怎麼上傳文件
下面為大家介紹在ExtJs中上傳文件的幾種方法
第一種方法：傳統的上傳方式
在formpanal中增加一個fileUpload的屬性
例子代碼：
JScript 代碼 複製
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
renderTo:’file’,
labelAlign: ‘right’,
title: ‘文件上傳’,
labelWidth: 60,
frame:true,
url: 伺服器處理上傳功能的url地址,//fileUploadServlet
width: 300,
height:200,
fileUpload: true,
items: [{
xtype: ‘textfield’,
fieldLabel: ‘文件名’,
name: ‘file’,
inputType: ‘file’//文件類型
}],
buttons: [{
text: ‘上傳’,
handler: function() {
form.getForm().submit({
success: function(form, response){
Ext.Msg.alert(‘信息’, response.result.msg);
},
failure: function(){
Ext.Msg.alert(‘錯誤’, ‘文件上傳失敗’);
}
});
}
}]
});
});
第二種方法：藉助Ext.ux.UploadDialog.Dialog的組件，在編碼時需要導入兩個文件
需要引入 Ext.ux.UploadDialog 樣式文件 和 Ext.ux.UploadDialog.packed腳本文件。
例子代碼
//在使用此方法進行文件上傳時，其後台往頁面的返回值類型是這樣的：
//{‘success’:true,’message’:’上傳成功’}
//如果沒有success:true，無論上傳成功與否，顯示的都是上傳失敗，其實這個和form.submit()的提交方式是一個道理。
var dialog = new Ext.ux.UploadDialog.Dialog({
autoCreate: true,
closable: true,
collapsible: false,
draggable: true,
minWidth: 400,
minHeight: 200,
width: 400,
height: 350,
permitted_extensions:[‘JPG’,’jpg’,’jpeg’,’JPEG’,’GIF’,’gif’,’xls’,’XLS’],
proxyDrag: true,
resizable: true,
constraintoviewport: true,
title: ‘文件上傳’,
url:用於處理上傳文件功能的Url,
reset_on_hide: false,
allow_close_on_upload: true ,
upload_autostart: false
});
//定義上傳文件的按鈕
var btnShow = new Ext.Button({
text:’上傳文件’,
listeners:{
click:function(btnThis,eventobj){
dialog.show();
}
}
});
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
原創文章，作者：TMFC，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/133496.html
微信掃一掃 
支付寶掃一掃 