1. 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
2. ExtJs slider中dragstart和dragend事件同時使用,不觸發
在每個事件響應函數里都加上console.log看看,很有可能這兩個事件觸發間隔較短、後一個覆蓋了前一個窗口實例,通過日誌就能識別是否都被調用到了。
3. Extjs時間控制項
代碼如下:
Extjs 時間選擇控制項
這是實現時間控制項選擇的方法
<script type="text/javascript">
Ext.onReady(function () {
var times = new Ext.form.TimeField({
increment: 10, //時間間隔
minValue: '08:00 AM', //最小顯示的時間
renderTo: Ext.get('times'), //
autoShow: true,
format: 'H:i', //顯示格式,H代表小時;i代表分鍾;m代表秒
width: 60
}
});
});
</script>
下面是html的控制項
<div id="times" style="margin-left:40px;"></div>
完整的頁面如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="http://blog.163.com/sam_0815/blog/Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="http://blog.163.com/sam_0815/blog/Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="http://blog.163.com/sam_0815/blog/Ext/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
var times = new Ext.form.TimeField({
increment: 10,
minValue: '08:00 AM',
renderTo: Ext.get('times'),
autoShow: true,
format: 'H:i',
width: 60
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="times" style="margin-left:40px;"></div>
</div>
</form>
</body>
</html>
運行結果:
4. extjs button如何防止快速雙擊,只支持單擊事件
不是阻止雙擊事件來實現的。
一般是disable這個button,等成功後enable;
還有一個類似的方法是mask屏幕。
這兩個方式都是不讓連續提交。
因為一般點擊按鈕都是發送ajax,然後等待,所以用delay來做是起不了作用的。
5. extjs5.1 toolBar items之間間隔太大
'->',不要用這個,可以考慮tbar的xtype用hbox,然後用flex去控制寬度。需要加間隔用{xtype:'spacer', width:xx}去添加空格。 ->的作用不是簡單的加距離。
6. 求教一個問題Extjs在延時處理和間隔處理有兩個函數方法:但是我應該如何實現這樣的設計
你的版本跟我的不同,我的Ext.Function里沒有interval函數,不過我用另一種方式解決了
var runner = new Ext.util.TaskRunner();
var task;
var updateClock = function () {
this.num = this.num ||版 0;
alert();
/*暫停權條件,在這里判斷後台返回是否需要繼續等待*/
if (this.num == 2) {
alert("沒有查詢到數據");
task.stop();
}
this.num++;
}
task = runner.newTask({
run : updateClock,
interval : 1000,
repeat : 5
});
task.start();
//任意地方再次啟動
Ext.defer(function () {
task.num = 0;
task.restart();
}, 10000);