Hi everyone,

as you would note im very new on this, but i have a doubt and i dont know if im doing good or wrong, i hope you can help, now let me explain what i have:

i have my index.php and my index.js in this i have declared a tabPanel and is working

index.js
Code:
var tabPanel = new Ext.TabPanel({
        region:'center',
        id: 'center_panel',
        deferredRender:false,
        autoScroll: true,
        margins:'100 0 0 0',
        activeTab:0,
        items:[{
                id:'tab1',
                contentEl:'tabs',
        title: 'Main',
        closable:false,
        autoScroll:true
        }]
    });
viewport = new Ext.Viewport({
           layout:'border',
           items:[actionPanel,tabPanel]

  });
ok and a westt panel where i create tabs with this fuction:

index.js
Code:
function addTab(tabTitle){
        tabPanel.add({
            title: tabTitle,
            //url: 'asisweb/menu/menu_grid.php',
            iconCls: 'tabs',
            autoLoad: {
                url: 'asisweb/menu/menu_grid.php',
                scripts: true,
                text: 'Cargando...'
            },
            closable:true
        }).show();
        //tabPanel.setActiveTab(MenuListingEditorGrid);
    }
whit this i create a table and works but in my menu_grid.php i have grid but no have a clue in this case, what should i do for my grid appear in my tab. this is how i declare my menu_grid.php

HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="js/ext-3.0.3/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="js/ext-3.0.3/resources/css/xtheme-gray.css" />
<script type="text/javascript" src="js/ext-3.0.3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-3.0.3/ext-all-debug.js"></script>
<script type="text/javascript" src="asisweb/menu/menu_grid.js"> </script>

<title></title>

<script type="text/javascript">

    Ext.BLANK_IMAGE_URL = 'js/ext-3.0.3/resources/images/default/s.gif';
    Ext.onReady( function(){
        //alert('ext working');

        
    });

</script>

</head>
<body>
    <div id="menu_grid"></div>
</body>
</html>
and my menu_grid.js is this

HTML Code:
MenuListingEditorGrid =  new Ext.grid.EditorGridPanel({
    //  render: 'menu_grid',
      id: 'MenuListingEditorGrid',
      title: 'Categorias Menu',
      store: MenusDataStore,
      cm: MenusColumnModel,
      border: true,
      enableColLock:false,
      clicksToEdit:1,
      layout: 'fit',
      tbar: [{
            text: 'Agregar Menu',
            tooltip: 'Agregar Menu',
            iconCls:'add',    // this is defined in our styles.css
            handler: displayFormWindow
      }, '-', {
            text: 'Eliminar registro',
            handler: confirmDeleteMenu,   // Confirm before deleting
            iconCls:'remove'
      }],
      selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
    });

    //Ext.getCmp('center_panel').add(MenuListingEditorGrid);
    //Ext.getCmp('center_panel').doLayout();
with firebug I see that my datastore works and fill my grid and i dont get any error and my new tab still blank. this are my doubts:

1.- Should i add all the links to extjs in this new tab??? or could extend from the index page
2.- should i use render or the getCmp
4.- should i set my grid in the onready function?
3.- did you know any example with something that can help me i already check xaki examples and tutorials but still lose


sorry for my english i hope explain myself good

Thanks in advances!!!