- type : 'text',\r
- id : 'borderColor',\r
- label : langCell.borderColor,\r
- labelLayout : 'horizontal',\r
- widths : [ '50%', '50%' ],\r
- 'default' : '',\r
- setup : function( selectedCell )\r
- {\r
- this.setValue( selectedCell.getAttribute( 'borderColor' ) || '' );\r
- },\r
- commit : function( selectedCell )\r
- {\r
- if ( this.getValue() )\r
- selectedCell.setAttribute( 'borderColor', this.getValue() );\r
- else\r
- selectedCell.removeAttribute( 'borderColor' );\r
- }\r
+ type : 'hbox',\r
+ padding : 0,\r
+ widths : [ '80%', '20%' ],\r
+ children :\r
+ [\r
+ {\r
+ type : 'text',\r
+ id : 'borderColor',\r
+ label : langCell.borderColor,\r
+ labelLayout : 'horizontal',\r
+ widths : [ '70%', '30%' ],\r
+ 'default' : '',\r
+ setup : function( element )\r
+ {\r
+ var borderColorAttr = element.getAttribute( 'borderColor' ),\r
+ borderColorStyle = element.getStyle( 'border-color' );\r
+\r
+ this.setValue( borderColorStyle || borderColorAttr );\r
+ },\r
+ commit : function( selectedCell )\r
+ {\r
+ var value = this.getValue();\r
+ if ( value )\r
+ selectedCell.setStyle( 'border-color', this.getValue() );\r
+ else\r
+ selectedCell.removeStyle( 'border-color' );\r
+\r
+ selectedCell.removeAttribute( 'borderColor');\r
+ }\r
+ },\r
+ {\r
+ type : 'button',\r
+ id : 'borderColorChoose',\r
+ label : langCell.chooseColor,\r
+ style : 'margin-left: 10px',\r
+ onClick : function()\r
+ {\r
+ var self = this;\r
+ getDialogValue( 'colordialog', function( colorDialog )\r
+ {\r
+ self.getDialog().getContentElement( 'info', 'borderColor' ).setValue(\r
+ colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue()\r
+ );\r
+ } );\r
+ }\r
+ }\r
+ ]\r