本文目錄一覽：
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 控制項事件大全
Ext.form.TimeField:
配置項：
maxValue：列表中允許的最大時間
maxText：當時間大於最大值時的錯誤提示信息
minValue：列表中允許的最小時間
minText：當時間小於最小值時的錯誤提示信息
increment：兩個相鄰選項間的時間間隔，默認為15分鐘
format：顯示格式，默認為「g:i A」。一般使用「H:i:s」
H：帶前綴0的24小時
i：帶前綴0的分鐘
s：帶前綴0的秒
invalidText：當時間值非法時顯示的提示信息
altFormats：多個時間輸入格式組成的字元串，不同的格式之間使用「|」進行分割
Ext.form.FieldSet
animCollapse：動畫摺疊，默認為false
checkboxToggle：設置是否顯示欄位集的checkbox選擇框，默認為false
checkboxName：指定欄位集中用於展開或隱藏欄位集面板的checkbox的名字，該屬性只有在checkboxToggle為true時生效
labelWidth：欄位標籤的寬度，可以級聯到子容器
layout：布局，默認為form
Ext.form.DateFied
maxValue：允許選擇的最大日期
maxText：當日期大於最大值時的錯誤提示信息
minValue：允許選擇的最小時間
minText：當日期小於最小值時的錯誤提示信息
format：日期顯示格式，默認為「m/d/y」，一般使用「Y-m-d」
Y：四位年份
m：帶前綴0的月份
d：帶前綴0的日期
y：兩位年份
n：不帶前綴0的月份
j：不帶前綴0的日期
w：星期的數字，0表示星期日，1代表星期一
showToday：是否顯示今天按鈕，默認為true
altFormats：多個日期輸入格式組成的字元串，不同的格式之間使用「|」進行分割，默認值為’m/d/Y|n/j/Y|n/j/y|m/j /y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d’
disabledDates：禁止選擇的日期組成的數組
disabledDatesText：選擇禁選日期時顯示的提示信息
disabledDays：禁止選擇的星期組成的數組，0代表星期日，1代表星期一
disabledDaysText：選擇禁選星期時顯示的提示信息
invalidText：當日期值非法時顯示的提示信息
方法：
getValue()：取得日期值
Ext.form.ComboBox
displayField：被顯示在下拉框中的欄位名
editable：是否可編輯，默認為true
forceSelection：輸入值是否嚴格為待選列表中存在的值。如果輸入不存在的值，會自動選擇第一個最接近的值。
hiddenName：隱藏欄位的名字，如果提供該參數則一個隱藏欄位將被創建，用來存儲所選值，當表單提交時在伺服器端可以通過該名字取得列表中的所選值
listWidth：下拉列表的寬度
minListWidth：下拉列表的最小寬度，默認為70像素
loadingText：當下拉框載入數據時顯示的提示信息，只有當mode=’remote’時才會生效
maxHeight：下拉列表框的最大高度，默認為300像素
minChars：下拉列表框自動選擇前用戶需要輸入的最小字元數量。mode=’remote’默認為4，mode=’local’默認為0
mode：下拉列表框的數據讀取模式。remote讀取遠程數據，local讀取本地數據
pageSize：下拉列表框的分頁大小。該項設置只在mode=’remote’時生效
queryParam：查詢的名字，默認為’query’，將被傳遞到查詢字元串中
allQuery：一個發往伺服器用來查詢全部信息的查詢字元串，默認為空字元串”
selectOnFocus：當獲得焦點時立刻選擇一個已存在的列表項。默認為false，此項只有在editable=true時才會生效
store：列表框綁定的數據源
transform：將頁面中已存在的元素轉換為組合框
lazyInit：延時初始化下拉列表，默認為true
lazyRender：延時渲染，默認為false
triggerAction：設置單擊觸發按鈕時執行的默認操作，有效值包括all和query，默認為query，如果設置為all則會執行allQuery中設置的查詢
typeAhead：設置在輸入過程中是否自動選擇匹配的剩餘部分文本（選擇第一個滿足條件的），默認為false
value：初始化組合框中的值
valueField：組合框的值欄位
valueNotFoundText：值不存在時的提示信息
tpl：Ext模板字元串或模板對象，可以通過該配置項自定義下拉列表的顯示方式
方法：
clearValue()：清空欄位當前值
doQuery( String query, Boolean forceAll )：
getValue()：
getStore()：
setValue( String value )：
Ext.from.RadioGroup
allowBlank：
blankText：
Ext.form.Radio;
getGroupValue()：
setValue( value {String/Boolean} )：
Ext.form.CheckboxGroup
allowBlank：是否允許不選擇，默認為true
blankText：
columns：顯示的列數，可選值包括：固定值auto、數值、數組（整數、小數）
items：對象數組
vertical：是否垂直方向顯示對象，默認為false
Ext.form.Checkbox
boxLabel：複選框的文字描述
checked：複選框是否被選擇，默認為false
handler：當checked值改變時觸發的函數，函數包含兩個參數：checkbox、checked
inputValue：
方法：
getValue()：返回複選框的checked狀態
setValue( Boolean/String checked )：
Ext.form.NumberField
allowDecimals：是否允許輸入小數，默認為true
allowNegative：是否允許輸入負數，默認為true
baseChars：輸入的有效數字集合，默認為’0123456789′
decimalPrecision：數字的精度，默認保留小數點後2位
decimalSeparator：十進位分隔符，默認為’.’
maxValue：允許輸入的最大數值
maxText：超過最大值之後的提示信息
minValue：允許輸入的最小數值
minText：超過最小值之後的提示信息
nanText：輸入非有效數值之後的提示信息
Ext.form.TextArea
preventScrollbars：是否禁止出現滾動條，默認為false
Extjs 4如何自定義Panel
要達到你的效果，可以用2種方法
1是每次使用都new一個panel組件，使用相同配置
2是只創建一個panel組件，每次使用時更新它的內容
這裡你自己取捨吧
方法1
function createNP(target){
var config = {
width: 200,
height: 200,
bodyStyle: {
background: ‘#F00’
},
renderTo: target
};
return Ext.create(‘Ext.panel.Panel’, config);
}
方法2
var p = Ext.create(‘Ext.panel.Panel’, {
width: 200,
height: 200,
bodyStyle: {
background: ‘#F00’
},
renderTo: Ext.getBody()
});
p.update(‘字元串或html’);
p.removeAll();
p.add({
//新組件
})
Extjs 如何自定義控制項
一般可以在extjs的組件基礎上擴展新的組件 ~比如Component~繼承它並在裡邊動態生成Html就可以當組件用了。方法可以直接寫在類里。~話說文檔上的擴展組件沒怎麼看懂。。。尤其是綁事件。。。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/247581.html
微信掃一掃 
支付寶掃一掃 