PDA

View Full Version : Help with my tabPanel



ren_diesel
2 Dec 2009, 12:32 PM
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


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


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 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



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 :s


sorry for my english i hope explain myself good

Thanks in advances!!!