I've been wrestling around with this same problem for a couple of days and I have finally managed to bend this part of the Edit Widget to my will. It's done through the use of custom skin components. It gets round the problem of creating renderers for the FieldInspectors and loading them with the domain values at runtime. The actual problem ended up being that the component used for the domain dropdown lists is not the DropDownListField as you would expect, but is actually the undocumented CodedValueDomainField (I only found this out because I was stepping though the debug). You can create a skin class for this component (even though it doesn't appear in the api documentation or in the IntelliSense), then modify it to alter the width of the dropdown. I've attached the code for the dropdown that I created below. It formats the button to the width i wanted (in this case 250). It also sets the dropdown to 300 (wider than the button) to make sure all the text is displayed (you do this by changing the popUpWidthMatchesAnchorWidth tag in the popUpAnchor to "false"). <?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5">
<fx:Metadata>[HostComponent("com.esri.ags.components.supportClasses.CodedValueDomainField")]</fx:Metadata>
<!-- host component -->
<fx:Script fb:purpose="styling">
<![CDATA[
/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
static private const contentFill:Array = ["bgFill"];
/**
* @private
*/
override public function get contentItems():Array {return contentFill};
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
if (getStyle("borderVisible") == false)
{
if (border)
border.visible = false;
if (background)
{
background.left = background.top = background.right = background.bottom = 0;
}
if (scroller)
scroller.minViewportInset = 0;
}
else
{
if (border)
border.visible = true;
if (background)
{
background.left = background.top = background.right = background.bottom = 1;
}
if (scroller)
scroller.minViewportInset = 1;
}
if (dropShadow)
dropShadow.visible = getStyle("dropShadowVisible");
openButton.setStyle("cornerRadius", getStyle("cornerRadius"));
if (borderStroke)
{
borderStroke.color = getStyle("borderColor");
borderStroke.alpha = getStyle("borderAlpha");
}
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="open" />
<s:State name="disabled" />
</s:states>
<s:PopUpAnchor id="popUp" displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
popUpPosition="below" popUpWidthMatchesAnchorWidth="false">
<s:Group id="dropDown" maxHeight="134" minHeight="22" >
<!--- @private -->
<s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7"
angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
<!--- @private -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0">
<s:stroke>
<!--- border stroke @private -->
<s:SolidColorStroke id="borderStroke" weight="1"/>
</s:stroke>
</s:Rect>
<!-- fill -->
<!--- Defines the appearance of drop-down list's background fill. -->
<s:Rect id="background" left="1" right="1" top="1" bottom="1" >
<s:fill>
<s:SolidColor id="bgFill" color="0xFFFFFF" />
</s:fill>
</s:Rect>
<!--- @private -->
<s:Scroller id="scroller" left="0" top="0" width="300" bottom="0" hasFocusableChildren="false" minViewportInset="1">
<!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
<s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
</s:layout>
</s:DataGroup>
</s:Scroller>
</s:Group>
</s:PopUpAnchor>
<s:Button id="openButton" left="0" width="250" top="0" bottom="0" focusEnabled="false"
skinClass="spark.skins.spark.DropDownListButtonSkin" />
<s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1"
mouseEnabled="false" mouseChildren="false"
left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" />
</s:SparkSkin>
To apply it to the attribute inspector, there are a couple of techniques I tried that worked. The first one was to add a style reference to the global CSS file that use this skin class for all TextFields.What i ended up doing was create a function that I attached to the Show_feature event of the Attribute Inspector in the editor component of the widget. The key was to look at the form rather than the field inspectors. The function loops through each of the FormItems, checks the kind of edit component being used to edit it, and applies a skin appropriate to that field editor component. This is the code I'm using to apply skins that I have created to each of the common editors.
// This adds the event listener to update the editor skins on the form. I've added it to the WidgetConfigLoaded function
// Add a listener to update the styles on the edit boxes when the records are shown.
editor.attributeInspector.addEventListener(AttributeInspectorEvent.SHOW_FEATURE, setFieldInspectorSkins);
// Applies the Field Editor skins to the edit objects. Looks directly at the form in the attribute inspector
// then looks at each for the formitems and check the component type e.g. TextField, StringField, CodedValueDomainField.
// Finally applies a custom skin to each component based on the type.
private function setFieldInspectorSkins(event:AttributeInspectorEvent):void
{
// Get the number of formitems in the form
var numRecs:int = editor.attributeInspector.form.numChildren;
var disp:DisplayObject;
var chld:DisplayObject;
for (var i:int = 0; i < numRecs; i++)
{
disp = editor.attributeInspector.form.getChildAt(i);
if (disp is FormItem)
{
var itm:FormItem = disp as FormItem;
for (var j:int = 0; j < itm.numChildren; j++)
{
chld = itm.getChildAt(j);
if (chld is StringField)
{
var sFld:StringField = chld as StringField;
sFld.setStyle("skinClass",widgets.EditEnhanced.EditWidgetStringFieldSkin);
break;
}
if (chld is com.esri.ags.components.supportClasses.TextField)
{
var tFld:com.esri.ags.components.supportClasses.TextField = chld as com.esri.ags.components.supportClasses.TextField;
tFld.setStyle("skinClass",widgets.EditEnhanced.EditWidgetTextFieldSkin);
break;
}
if (chld is com.esri.ags.components.supportClasses.CodedValueDomainField)
{
var cFld:CodedValueDomainField = chld as CodedValueDomainField;
cFld.setStyle("skinClass",widgets.EditEnhanced.EditWidgetCodedValueDomainFieldSkin);
break;
}
if (chld is com.esri.ags.components.supportClasses.RangeDomainField)
{
var rFld:RangeDomainField = chld as RangeDomainField;
rFld.setStyle("skinClass",widgets.EditEnhanced.EditWidgetRangeDomainFieldSkin);
break;
}
}
}
}
}
