component文章图片
一、颜色选择器 Ext.ColorPalette
1.属性
可选，初始化时高亮的颜色（必须为不包含 # 符号的6位16进制颜色编码）
2.方法
设置颜色
3.事件
被选取时触发
4.使用
/*颜色选择器*/
var colorPalette=new Ext.ColorPalette({
renderTo:"colorPalette",//渲染到 <div id="colorPalette"></div>节点。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.属性
可选，默认的日期格式化字串
可选，一个禁用的日期数组。可以使用正则表达式
可选，当鼠标悬浮禁用日期时显示的错误文本
可选，一个禁用星期数组
可选，当鼠标悬浮禁用星期时显示的错误文本
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
