PDA

View Full Version : add grid in tabPanel



ren_diesel
24 Nov 2009, 12:08 PM
Hi guys,

I think is going to sound like this is not new, I'm just starting with this and i follow all the exmples that are in tutorial joined and doing what i need to do, now my biggest problem is that im trying to generate dynamical tab's and this tabs have some grid and forms but i can get that this show in the tab i show you my code

index.html


<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/jquery.js"></script>
<script type="text/javascript" src="js/js_index.js"></script>

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

// Path to the blank image must point to a valid location on your server
Ext.BLANK_IMAGE_URL = 'js/ext-3.0.3/resources/images/default/s.gif';

// Main application entry point
</script>

<script language="javascript" src="asisweb/main/main.js"></script>

</head>

<div id="west"></div>

<ul id="actions" class="x-hidden">
<li>
<a id="create" href="#">1ST OPTION</a>
</li>
</ul>

<div id="tabs"></div>

<div id="center1"></div>
<div id="center2"></div>

</body>
</html>
asisweb/main/main.js



Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var tabActions = new Ext.Panel({
frame:true,
title: 'Opciones de Menu',
collapsible:true,
contentEl:'actions',
titleCollapse: true
});

var actionPanel = new Ext.Panel({
id:'menupanel',
region:'west',
title: 'Menu',
split:true,
collapsible: true,
collapseMode: 'mini',
width: 200,
minSize: 75,
maxSize: 300,
margins: '100 0 0 0',
border: true,
//baseCls:'x-plain',
items: [tabActions]
});

// Main (Tabbed) Panel
var tabPanel = new Ext.TabPanel({
region:'center',
deferredRender:false,
autoScroll: true,
margins: '100 0 0 0',
activeTab:0,
items: [ MenuListingEditorGrid ]
/*items:[{
id:'tab1',
contentEl:'tabs',
title: 'Main',
closable:false,
autoScroll:true
}]*/
});

viewport = new Ext.Viewport({
layout:'border',
items:[actionPanel,tabPanel,]}
);

//////////////////////////////////////////

function addTab(tabTitle, targetUrl){
tabPanel.add({
title: tabTitle,
iconCls: 'tabs',
autoLoad: {url: targetUrl, callback: this.initSearch, scope: this},
closable:true
}).show();
}

// Update the contents of a tab if it exists, otherwise create a new one
function updateTab(tabId,title, url) {
var tab = tabPanel.getItem(tabId);
if(tab){
tab.getUpdater().update(url);
tab.setTitle(title);
}else{
tab = addTab(title,url);
}
tabPanel.setActiveTab(tab);
}

// Map link ids to functions
var count = 0;
var actions = {
'create' : function(){
addTab("Adm. Menu",'asisweb/menu/grid.html');
}
};

function doAction(e, t){
e.stopEvent();
actions[t.id]();
}

// This must come after the viewport setup, so the body has been initialized
actionPanel.body.on('mousedown', doAction, null, {delegate:'a'});


});
the file that i want to show in the tab is this and is like this root

asisweb/menu/grid/html



<div id="menuGrid" style="height:500"></div>
<script type="text/javascript">



Ext.onReady( function(){

Ext.QuickTips.init();

MenusDataStore = new Ext.data.Store({
id: 'MenusDataStore',
proxy: new Ext.data.HttpProxy({
url: 'menu_search.php',
method: 'POST'
}),
baseParams:{task: "LISTING"}, // this parameter is passed for any HTTP request
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'IdMenu', type: 'int', mapping: 'idmenu'},
{name: 'Name', type: 'string', mapping: 'name'},
{name: 'Team', type: 'string', mapping: 'team'},
{name: 'Description', type: 'string', mapping: 'description'},
{name: 'Created', type: 'date', mapping: 'created'},
{name: 'Updated', type: 'date', mapping: 'updated'}
]),
sortInfo:{field: 'IdMenu', direction: "ASC"}
});

MenusDataStore.load();

MenusColumnModel = new Ext.grid.ColumnModel(
[{
header: '#',
readOnly: true,
dataIndex: 'IdMenu',
width: 50,
hidden: false
},{
header: 'Nombre',
dataIndex: 'Name',
width: 60,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'Grupo',
dataIndex: 'Team',
width: 50,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'Descripcion',
dataIndex: 'Description',
width: 90,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'Creado',
dataIndex: 'Created',
width: 80,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
editor: new Ext.form.DateField({
format: 'm/d/Y'
}),
hidden: false
},{
header: 'Actualizado',
dataIndex: 'Updated',
width: 80,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
editor: new Ext.form.DateField({
format: 'm/d/Y'
}),
hidden: false
}]
);
MenusColumnModel.defaultSortable= true;

MenuListingEditorGrid = new Ext.grid.EditorGridPanel({
id: 'MenuListingEditorGrid',
title: 'Categorias Menu',
store: MenusDataStore,
cm: MenusColumnModel,
renderTo: 'menuGrid',
enableColLock:false,
clicksToEdit:1,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true})
});


});
</script>

I use all this ways to do it in forum but im so lost

//MenuListingEditorGrid.render();
//tabPanel.add(MenuListingEditorGrid).show();
//Ext.getCmp('center').doLayout();
//Ext.getCmp('tabPanel').add(MenuListingEditorGrid);
//Ext.getCmp('tabPanel').doLayout();
//MenuListingWindow.show();


sorry i didn't took the comments of examples, also my grid is working if i join all the code and is a defined tab.

also if anybody knows more tutorials and exmaples i'll be grateful


thanks in advance

CrazyEnigma
24 Nov 2009, 12:21 PM
Did you hit F12 to see if you can find the problem that way? FF Firebug, give you errors. IE too. So what error did you encounter? This is probably the first step.

In your ViewPort, you have an extra comma. Not that it should be a problem, but some browsers don't like that, while other ignore it.

ren_diesel
24 Nov 2009, 12:42 PM
Hi thanks for your help,

I'm testing on firefox and firebug but now show any error i actually set an alert to is the script are working and nothing, just one think to this new tab i should add the links of script page in this case grid.html???

Thanks in advance