Вынести часть приложения в компонент

[lighto]

Вот код файла

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="100%" height="100%"
viewSourceURL="srcview/index.html"
backgroundColor="#FFFFFF"
xmlns:myComp="myComponents.*"

>
<mx:Canvas id="w1"
width="100%" height="100%"
borderStyle="solid"
backgroundColor="#DDDDDD"
dragEnter="doDragEnter(event);"
dragDrop="doDragDrop(event);">


<myComp:RubberBandComp id="rbComp" x="0" y="0" height="0" width="0" visible="false"/>

<mx:Panel id="v1"
title="Карта"
top="10" bottom="0" left="10" width="100%">

<mx:UIComponent id="mapContainer"
initialize="onContinerInitialize(event);"
resize="onContainerResize(event)"
width="100%" height="100%"/>


<mx:ControlBar>

<mx:Label text="Тип карты" />
<mx:ComboBox id="mapType"
labelField="label"
change="onChangeMapType()"
labelFunction="labelFunction" />
<mx:Button label="Измерить" id="but" click=" edit.selected=true; pane.visible=true; but.visible=false; but1.visible=true;"/>

</mx:ControlBar>

</mx:Panel>



<myComp:DragPanel title="Измерение" id="pane" x="935" y="10" width="25%"
creationComplete="myPanelCCHandler(event);" visible="false"
>
<mx:Label id="labelgrid" text="123"/>
<mx:RadioButtonGroup id="rbg"/>
<mx:RadioButtonGroup id="radiogroup1"/>
<mx:VBox>
<mx:RadioButton id="edit" label="Добавление маркеров" group="{rbg}"/>
<mx:RadioButton visible="false" id="view" selected="true" label="Просмотр" group="{rbg}"/>
</mx:VBox>
<mx:HBox>
<mx:Button label="Приблизить" click="zoomInEvent(event)" />
<mx:Button label="Отдалить" click="zoomOutEvent(event)" />
</mx:HBox>
<mx:HBox>
<mx:Button label="Очистить" click="clear(event)" />
<mx:Button label="Отменить" click="undo(event)" />
</mx:HBox>
<mx:DataGrid id="grid1" dataProvider="{dataProvider1}" itemClick="showPolyLine(event);" width="307" height="374">
<mx:columns>

<mx:DataGridColumn dataField="2точки" width="50">
<mx:itemRenderer>
<mx:Component>
<mx:Label text="{data.name+1}-{data.name+2}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn id="s" dataField="Начало">
<mx:itemRenderer>
<mx:Component>
<mx:Label text='{data.start}'/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn id="e" dataField="Конец">
<mx:itemRenderer>
<mx:Component>
<mx:Label text='{data.end}'/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

<mx:DataGridColumn dataField="М">
<mx:itemRenderer>
<mx:Component>
<mx:Label text='{data.distance*1000}'/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

<mx:DataGridColumn id="ne" dataField="КМ">
<mx:itemRenderer>
<mx:Component>
<mx:Label text='{data.distance}'/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:Label id="total"/>
<mx:Label id="total1"/>
<mx:Button label="Закрыть" id="but1" click=" clear(event); cleramap(); view.selected=true; pane.visible=false; but1.visible=false; but.visible=true;"/>
<mx:RadioButton visible="false" selected="true" id="mr" x="29" y="327" label="Маркеры" groupName="radiogroup1"/>
<mx:RadioButton visible="false" id="rs" x="29" y="353" label="Растояние" groupName="radiogroup1"/>

<mx:RadioButtonGroup change="setUnits(event)" id="unit"/>

</myComp:DragPanel>

</mx:Canvas>
</mx:Application>


Как мне вынести вот эту часть в отдельный файлик и подцеплять в нужном месте?

<myComp:DragPanel title="Измерение" id="pane" x="935" y="10" width="25%"
creationComplete="myPanelCCHandler(event);" visible="false"
>
<mx:Label id="labelgrid" text="123"/>
<mx:RadioButtonGroup id="rbg"/>
<mx:RadioButtonGroup id="radiogroup1"/>
<mx:VBox>
<mx:RadioButton id="edit" label="Добавление маркеров" group="{rbg}"/>
<mx:RadioButton visible="false" id="view" selected="true" label="Просмотр" group="{rbg}"/>
</mx:VBox>
<mx:HBox>
<mx:Button label="Приблизить" click="zoomInEvent(event)" />
<mx:Button label="Отдалить" click="zoomOutEvent(event)" />
</mx:HBox>
<mx:HBox>
<mx:Button label="Очистить" click="clear(event)" />
<mx:Button label="Отменить" click="undo(event)" />
</mx:HBox>
<mx:DataGrid id="grid1" dataProvider="{dataProvider1}" itemClick="showPolyLine(event);" width="307" height="374">
<mx:columns>

<mx:DataGridColumn dataField="2точки" width="50">
<mx:itemRenderer>
<mx:Component>
<mx:Label text="{data.name+1}-{data.name+2}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn id="s" dataField="Начало">
<mx:itemRenderer>
<mx:Component>
<mx:Label text='{data.start}'/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn id="e" dataField="Конец">
<mx:itemRenderer>
<mx:Component>
<mx:Label text='{data.end}'/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

<mx:DataGridColumn dataField="М">
<mx:itemRenderer>
<mx:Component>
<mx:Label text='{data.distance*1000}'/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

<mx:DataGridColumn id="ne" dataField="КМ">
<mx:itemRenderer>
<mx:Component>
<mx:Label text='{data.distance}'/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:Label id="total"/>
<mx:Label id="total1"/>
<mx:Button label="Закрыть" id="but1" click=" clear(event); cleramap(); view.selected=true; pane.visible=false; but1.visible=false; but.visible=true;"/>
<mx:RadioButton visible="false" selected="true" id="mr" x="29" y="327" label="Маркеры" groupName="radiogroup1"/>
<mx:RadioButton visible="false" id="rs" x="29" y="353" label="Растояние" groupName="radiogroup1"/>

<mx:RadioButtonGroup change="setUnits(event)" id="unit"/>

</myComp:DragPanel>


Добавлено через 17 часов 54 минуты
Пожалуйста-пожалуйста помогите

Добавлено через 18 часов 22 минуты
Ну подскажите:o