读书人

Ext 色彩选择器使用

发布时间: 2012-09-15 19:09:28 作者: rapoo

Ext 颜色选择器使用
直接上代码:

Ext.onReady( function() {var colorShowId = '';var colorWin = new Ext.Window( {border :0,frame:false,closeAction :'hide',closable :false,resizable :false,width :100,height :80,items : [           {          xtype:'colorpicker',          listeners: {                select: function(picker, selColor) {          var color = '#' + selColor;  // alert(colorShowId+','+color);  Ext.getDom(colorShowId).style.background = color;  colorWin.hide();                 }            }          } ]}) ;function showColor(id) {colorShowId = id;var colorText = Ext.getCmp(id);colorWin.x = colorText.getPosition()[0] + colorText.getWidth();colorWin.y = colorText.getPosition()[1];colorWin.show();} var form = Ext.create('Ext.form.Panel',{ width:200,buttons: [{        text: '',        id:'bb',        style:'background:red',        handler: function(btn) {showColor('bb');        }    } ],renderTo:Ext.getBody()});  })

一:定义form,form里面有个button,button的click方法显示颜色选择器
二:颜色选择器放在window里
三:选择颜色后改变button的背景色

读书人网 >Web前端

热点推荐