Question

I had to reformat my question because I realized I was using incorrect flex method. But still a similar issue occurs:

        private function passForm():void {


            PopUpManager.addPopUp(passTitleWindow, this, true);
            PopUpManager.centerPopUp(passTitleWindow);


        } 

                            <s:Button includeIn="Detail" x="10" y="329" 
                                  id= "btn1"
                                  label="Pass"
                                  click="passForm()" 
                                  visible="{hasScreen}" />

I click and popup does not display.

Answer 1

You can’t instantiate an item based on it’s id. Make your TitleWindow into another class and instantiate that.

PassTitleWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx: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"
    title="Pass"
    layout="vertical"
    width="480"
    height="240"
    titleStyleName="titleText"
    backgroundColor="white"
    backgroundAlpha="1.0"
    borderColor="white"
    borderAlpha="1.0"
    cornerRadius="0"
    showCloseButton="true"
    implements="mx.core.IDataRenderer">

    <fx:Script>
        <![CDATA[

            private var _data:Object;
            [Bindable(event="dataChange")]
            /**
             *  implementing mx.core.IDataRenderer.
             *  Set this value from outside
             */
            public function get data():Object
            {
                return _data;
            }

            /**
             *  @private
             */
            public function set data(value:Object):void
            {
                if (_data == value) 
                    return;
                _data = value;
                dispatchEvent(new Event("dataChange"));
            }
        ]]>
    </fx:Script>

    <mx:Text text="Please fill out the following criteria and then click continue."
        width="100%"
        styleName="headingText"/>

    <mx:Form x="-12" y="150" id="passView">

        <mx:FormItem label="Age" >
            <s:TextInput id="ageTextInput" "@{data.age}"/>
        </mx:FormItem>
        <mx:FormItem label="Grade" >
            <s:TextInput id="gradeTextInput"/>
        </mx:FormItem>

    </mx:Form>

</mx:TitleWindow>

SampleApp.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"
    creationComplete="creationCompleteHandler()">

    <fx:Script>
        <![CDATA[

            import mx.managers.PopUpManager;

            protected var passWindow:PassTitleWindow = new PassTitleWindow;

            protected function creationCompleteHandler():void
            {
                createForm();
            }

            protected function createForm():void
            {
                passWindow = PopUpManager.createPopUp(this, PassTitleWindow, true) as PassTitleWindow;
                passWindow.data = studentGrid.selectedItem;
                PopUpManager.centerPopUp(passWindow);
            }
        ]]>
    </fx:Script>

</s:Application>

Hope that helps,
Lance