Code Structure / Component Question

Question

I'm new to Flex and trying to learn as much as I can on my own without help, but I've run into a question that I'm not finding an answer for.
I've read about creating MXML components and understand that, as well as creating AS classes, that that makes sense too.
I have code in the default package which displays the Datagrid component (MXML) but also has ActionScript code in the same source file to load the datagrid via PHP (HTTPService) as well as define what happens when cells are updated (sending data back to update the DB via PHP).
This is all pretty much a self-contained "component" for manipulating data from a particular MySLQ table from this single datagrid.  I have the grid displayed on one tab of the tab navigator.
My problem is that I'd like to create a similar datagrid on a separate tab which does the same thing for a different table.   I know this code needs to be separated and not in one MXML file, but I'm not finding how to either structure my project to do this, or else make each datagrid (along with the associated AS code) into a separate component.
Would appreciate any help or examples you may have.
Thanks,
Gary

Answer 1

Thanks for pointing me in this direction -- I had started that way, but got confused.  Here are the first few lines of my current code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                                        width="998" height="656" creationComplete="init()" layout="absolute">
          <mx:Script>
                    <![CDATA[
                              import mx.controls.Alert;
                              import mx.events.PropertyChangeEvent;
                              import mx.events.CollectionEventKind;
                              import mx.events.CollectionEvent;
                              import mx.events.DataGridEvent;
                              import mx.controls.TextInput;
                              import mx.rpc.events.ResultEvent;
                              import mx.collections.ArrayCollection;
                              import com.adobe.serialization.json.JSON;
                              import com.adobe.viewsource.ViewSource;
                              [Bindable]
                              private var callbackUrl:String;
Naturally, my datagrid tag is dozens of lines below this:
<mx:TabNavigator x="23" y="10" width="831" height="506">
<mx:Canvas width="100%" height="100%" label="Learners">
<mx:DataGrid id="dgData"
x="27"
y="19"
width="778"
Can you show me a quick example of how I'd put this together with the top tag as you described?
Thanks again,
Gary