ExtJs4.0色彩控件

ExtJs4.0颜色控件

ExtJs4.0色彩控件

  1. /**  
  2.  * @class Ext.app.ColorPicker  
  3.  * @extends Ext.container.Container  
  4.  * 定义颜色选取类  
  5.  */  
  6.    
  7. Ext.define ('Ext.app.ColorPicker',  
  8. {  
  9.     extend: 'Ext.container.Container',  
  10.     alias: 'widget.smmcolorpicker',  
  11.     layout: 'hbox',  
  12.     initComponent:function()   
  13.     {  
  14.         var mefieldLabel = this.fieldLabel;  
  15.         var mename = this.name;  
  16.         var meheight = this.height;  
  17.         var meid = this.id;  
  18.         this.items =   
  19.         [  
  20.             {  
  21.                 xtype: 'textfield',  
  22.                 height: meheight,  
  23.                 id:meid+'x',  
  24.                 fieldLabel:mefieldLabel,  
  25.                 name: mename,  
  26.                 flex: 1,  
  27.                 listeners:  
  28.                 {  
  29.                     change:function(me, newValue, oldValue)  
  30.                     {  
  31.                         me.bodyEl.down('input').setStyle('background-image''none');  
  32.                         me.bodyEl.down('input').setStyle('background-color', newValue);  
  33.                     }  
  34.                 }  
  35.             },  
  36.             {  
  37.                 xtype:'button',  
  38.                 width:18,  
  39.                 height: meheight,  
  40.                 menu:  
  41.                 {  
  42.                     xtype:'colormenu',  
  43.                     listeners:   
  44.                     {  
  45.                         select: function(picker, color)       
  46.                         {  
  47.                             var amclr = Ext.getCmp(meid+'x');  
  48.                             amclr.setValue('#'+color);  
  49.                         }  
  50.                     }  
  51.                 }  
  52.             }  
  53.         ];  
  54.           
  55.         Ext.app.ColorPicker.superclass.initComponent.call(this);  
  56.     }  
  57. });  

  ExtJs4.0色彩控件