Flex - Unable to show datagrid inside a TitleWindow

I'm trying to add a DataGrid inside a spark TitleWindow and for some reason its not showing up correctly.

When I put the same code in the main mxml, it comes up correctly. The exact same code shows up weird in the TitleWindow.

<mx:DataGrid x="10" y="51" width="535" height="215" id="musicianGrid">
    <mx:columns>
        <mx:DataGridColumn headerText="First Name" dataField="firstName" width="90"/>
        <mx:DataGridColumn headerText="Last Name" dataField="lastName" width="90"/>
        <mx:DataGridColumn headerText="Band/Group" dataField="bandName" />
        <mx:DataGridColumn headerText="Record Label" dataField="recordLabel" width="135"/>
    </mx:columns>
</mx:DataGrid> 

Within the titlewindow it looks like this -

In the main mxml it looks like this -

There 开发者_如何学Cis no change in the code...

Can you please tell me whats happening?

---

My guess is that you have some sort of styles set for your title window that are getting inherited by your DataGrid. Hope that helps.

---

Also there seems to be a bug in Flex when you open this up using FlexGlobals.topLevelApplication:

var dialog:MyDialog = PopUpManager.createPopUp(FlexGlobals.topLevelApplication as DisplayObject, MyDialog, true) as MyDialog;

This happened to my DateField control, so I changed it using a call to "this" with the caveat that it is centered within my module and not the application

---

Here is an example with your DataGrid

MainApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            
            protected function button1_clickHandler(event:MouseEvent):void
            {
                var pop:MyTitle = PopUpManager.createPopUp(this, MyTitle, true) as MyTitle;
                PopUpManager.centerPopUp(pop);     
            }

        ]]>
    </fx:Script>
    <s:Button label="Open" click="button1_clickHandler(event)"/>
</s:Application>

MyTitle.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <mx:DataGrid width="535" height="215" id="musicianGrid">
        <mx:columns>
            <mx:DataGridColumn headerText="First Name" dataField="firstName" width="90"/>
            <mx:DataGridColumn headerText="Last Name" dataField="lastName" width="90"/>
            <mx:DataGridColumn headerText="Band/Group" dataField="bandName" />
            <mx:DataGridColumn headerText="Record Label" dataField="recordLabel" width="135"/>
        </mx:columns>
    </mx:DataGrid> 
</s:TitleWindow>

And the result is:

So re-check how you call/show your TitleWindow...