component文章圖片
一、顏色選擇器 Ext.ColorPalette
1.屬性
可選浩姥，初始化時高亮的顏色（必須為不包含 # 符號的6位16進制顏色編碼）
2.方法
設置顏色
3.事件
被選取時觸發(fā)
4.使用
/*顏色選擇器*/
var colorPalette=new Ext.ColorPalette({
renderTo:"colorPalette",//渲染到 <div id="colorPalette"></div>節(jié)點散罕。component繼承屬性
style:"display:inline-block;margin-right:20px",//修改組件樣式分歇，這邊修改為了一行能容下兩個顏色選擇器
listeners:{
'select':function(self,color){
console.log(self);//===this
console.log(color);//選擇的顏色
}
}
})
//配置value的顏色選擇器
var colorPaletteValue=new Ext.ColorPalette({
renderTo:"colorPalette",//可以渲染同一元素上
style:"display:inline-block;margin-right:20px",//修改組件樣式
value:"0000FF",//初始化時高亮的顏色（必須為不包含 # 符號的6位16進制顏色編碼）
listeners:{}
})
//select（）方法使用
setTimeout(function(){
colorPalette.select("0000FF");
},1000)
<div id="colorPalette"></div>
5.圖示
color選擇器.jpg
二、日期選擇器
1.屬性
可選欧漱，默認的日期格式化字串
可選职抡，一個禁用的日期數(shù)組∥笊酰可以使用正則表達式
可選缚甩，當鼠標懸浮禁用日期時顯示的錯誤文本
可選，一個禁用星期數(shù)組
可選窑邦，當鼠標懸浮禁用星期時顯示的錯誤文本
2.方法
設置日期
獲取日期
3.事件
4.使用
/*日期選擇器*/
var DatePicker=new Ext.DatePicker({
renderTo:"datePicker",
style:"display:inline-block;margin-right:20px",//修改組件樣式
listeners:{
'select':function(self,date){
console.log(self);
console.log(date);
}
}
})
//日期選擇器-星期禁用
var DatePicker=new Ext.DatePicker({
renderTo:"datePicker",
style:"display:inline-block;margin-right:20px",//修改組件樣式
format:"y/m/d",
disabledDays:[1,3,4,5,0],//0-6表示日擅威，一，二冈钦，三郊丛，四，五，六
disabledDaysText:"這個是鼠標懸浮禁用星期時顯示的錯誤文本",
handler:function(self,date){console.log(date)}
})
<div id="datePicker"></div>
5.圖示
日期選擇器.jpg
