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