PDA

View Full Version : How to load a simple html page in the layout sample?



Marci
21 Jun 2009, 7:04 PM
Hello there,
I'm totally new to ExtJS, but I really like the result :)
I know HTML, asp and asp.net(vb.net) well, and is able to write it..
Javascript etc do I mostly understand, but wouldn't be be able to make some for scratch (if you follow ;))

Anyway, in this sample: http://www.extjs.com/deploy/dev/examples/layout/complex.html
How do I then make a link that open and external document, like test.html, in the center-panel?

Like here, when you click a link, a nice ajax loading thing, and then it are showing the page in the right panel: http://extjs.com/deploy/ext-3.0-rc2/docs/

Hope someone can help me, was sitting up whole the night to try make it work ^^

Best Regards,
Jeppe R.

koko2589
21 Jun 2009, 10:58 PM
see here demo
http://demo.openphac.com/index2.php

here
http://demos.theactivegroup.com/demodesk.html?demo=mif&script=treenav


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- libreria ExtJS -->
<script type="text/javascript" src="componentes/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="componentes/ext-2.2/ext-all.js"></script>
<script type="text/javascript" src="componentes/ext-2.2/build/locale/ext-lang-es.js"></script>
<link rel="stylesheet" type="text/css" href="componentes/ext-2.2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="componentes/ext-2.2/resources/css/xtheme-gray.css" />
<script type="text/javascript">Ext.BLANK_IMAGE_URL = 'componentes/ext-2.2/resources/images/gray/s.gif';</script>
<!-- cookies -->
<script type="text/javascript" src="js/cookies.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OPENPHAC</title>
<link rel="stylesheet" type="text/css" href="css/general.css" />
<link rel="shortcut icon" href="favicon.ico" /></head>
<body>
<div id="divprincipal" align="center">
<div id="divcabecera" align="left">
<div id="divlogo">
<a href="http://openphac.com" title="Ir a OPENPHAC.COM"><img src="imagenes/openphac.png" alt="Ir a OPENPHAC.COM" /></a>
</div>
<div id="divauxiliar">

</div>
</div>
<div id="divviewport">
?<!-- Viewport de la aplicación -->
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
new Ext.Viewport({
layout: 'border',
items: [
{
region: 'north',
contentEl: 'divcabecera',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
collapseMode: 'mini',
title: 'Men&uacute; Principal',
xtype: 'treepanel',
id: 'TreeMenu',
iconCls: 'iconoMenu',
width: 225,
autoScroll: true,
lines: false,
split: true,
useArrows: true,
rootVisible: false,
listeners: {
click: function(node,e){
if (node.leaf==true){
var T = Ext.getCmp('Tabs');
if (!T.findById(node.id)) {
T.add({
id: node.id,
title: node.text,
iconCls: node.attributes.iconCls+'Tab',
autoLoad: {url: 'includes/verTab.php',params: {TabId: node.id}, scripts: true},
closable: true
});
}
T.setActiveTab(node.id);
}
}
},
tbar: [{
tooltip: 'Expandir todos los nodos del men&uacute;',
iconCls: 'iconoExpandir',
listeners: {
click: function() {
var x = Ext.getCmp('TreeMenu');
x.expandAll();
}
}
},
{
tooltip: 'Contraer todos los nodos del men&uacute;',
iconCls: 'iconoContraer',
listeners: {
click: function() {
var x = Ext.getCmp('TreeMenu');
x.collapseAll();
}
}
},
{
tooltip: 'Informaci&oacute;n',
iconCls: 'iconoInfo'
},
{
tooltip: 'Ayuda',
iconCls: 'iconoAyuda'
}
],
loader: new Ext.tree.TreeLoader(),
<!-- Menú Principal de la aplicación -->
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Configuraci&oacute;n General',
iconCls: 'iconoConfiguracion',
children: [{
text: 'Empresa',
iconCls: 'iconoEmpresa',
children: [{
text: 'Empresa activa',
id: 'EmpresaActiva',
iconCls: 'iconoEmpresaActiva',
leaf: true
}, {
text: 'Crear empresa',
id: 'CrearEmpresa',
iconCls: 'iconoCrearEmpresa',
leaf: true
},{
text: 'Series',
id: 'Series',
iconCls: 'iconoSeries',
leaf: true
}]
}, {
text: 'Usuario',
iconCls: 'iconoUsuario',
children: [{
text: 'Usuario activo',
id: 'UsuarioActivo',
iconCls: 'iconoUsuarioActivo',
leaf: true
}, {
text: 'Crear usuario',
id: 'CrearUsuario',
iconCls: 'iconoCrearUsuario',
leaf: true
}]
}]
}, {
text: 'Datos Maestros',
iconCls: 'iconoMaestros',
children: [{
text: 'Productos',
id: 'Productos',
iconCls: 'iconoProductos',
leaf: true
},{
text: 'Auxiliares de Productos',
iconCls: 'iconoAuxiliares',
children: [{
text: 'Tarifas',
id: 'Tarifas',
iconCls: 'iconoTarifas',
leaf: true
},{
text: 'Familias',
id: 'Familias',
iconCls: 'iconoFamilias',
leaf: true
},{
text: 'Colores',
id: 'Colores',
iconCls: 'iconoColores',
leaf: true
},{
text: 'Unidades de medida',
id: 'UnidadMedida',
iconCls: 'iconoUnMedida',
leaf: true
},{
text: 'Fabricantes',
id: 'Fabricantes',
iconCls: 'iconoFabricantes',
leaf: true
}]
},{
text: 'Terceros',
iconCls: 'iconoTerceros',
children: [{
text: 'Clientes',
id: 'Clientes',
iconCls: 'iconoClientes',
leaf: true
}, {
text: 'Proveedores',
id: 'Proveedores',
iconCls: 'iconoProveedores',
leaf: true
}]
},{
text: 'Auxiliares de Terceros',
iconCls: 'iconoAuxiliares',
children: [{
text: 'Formas de Pago',
id: 'FormasPago',
iconCls: 'iconoFormasdePago',
leaf: true
},{
text: 'Bancos',
id: 'Bancos',
iconCls: 'iconoBancos',
leaf: true
},{
text: 'Direcciones de Env&iacute;o',
id: 'DireccionesEnvio',
iconCls: 'iconoDirecciones',
leaf: true
},{
text: 'Formas de Env&iacute;o',
id: 'FormasEnvio',
iconCls: 'iconoFormasEnvio',
leaf: true
},{
text: 'Agencias de Env&iacute;o',
id: 'AgenciasEnvio',
iconCls: 'iconoAgenciasEnvio',
leaf: true
},{
text: 'Zonas',
id: 'Zonas',
iconCls: 'iconoZonas',
leaf: true
},{
text: 'Agentes comerciales',
id: 'AgentesComerciales',
iconCls: 'iconoAgentes',
leaf: true
}]
}]
}, {
text: 'Gesti&oacute;n de Almac&eacute;n',
iconCls: 'iconoGestionAlmacen',
children: [{
text: 'Almac&eacute;n',
id: 'Almacen',
iconCls: 'iconoAlmacen',
leaf: true
},{
text: 'Inventario',
id: 'Inventario',
iconCls: 'iconoInventario',
leaf: true
},{
text: 'Regularizaci&oacute;n',
id: 'Regularizacion',
iconCls: 'iconoRegularizacion',
leaf: true
}]
}, {
text: 'Gesti&oacute;n de Ventas',
iconCls: 'iconoVentas',
children: [{
text: 'Operativa de Ventas',
id: 'OperativaVentas',
iconCls: 'iconoOperativa',
leaf: true
},{
text: 'Facturaci&oacute;n',
iconCls: 'iconoFacturacion',
children: [{
text: 'Generar factura',
id: 'GenerarFactura',
iconCls: 'iconoGenerarFactura',
leaf: true
},{
text: 'Repetir factura',
id: 'RepetirFactura',
iconCls: 'iconoRepetirFactura',
leaf: true
},{
text: 'Anular factura',
id: 'AnularFactura',
iconCls: 'iconoAnularFactura',
leaf: true
},{
text: 'Recibos de cobro',
id: 'RecibosCobro',
iconCls: 'iconoRecibosCobro',
leaf: true
}]
}]
}, {
text: 'Gesti&oacute;n de Compras',
iconCls: 'iconoCompras',
children: [{
text: 'Operativa de Compras',
id: 'OperativaCompras',
iconCls: 'iconoOperativa',
leaf: true
}]
}, {
text: 'Informes',
iconCls: 'iconoInformes',
leaf: true
}, {
text: 'Herramientas',
iconCls: 'iconoHerramientas',
children: [{
text: 'Copia de seguridad',
id: 'CopiaSeguridad',
iconCls: 'iconoCopiaSeguridad',
leaf: true
}]
}]
}) }, {
region: 'center',
xtype: 'tabpanel',
id: 'Tabs',
enableTabScroll: true
,
activeTab: 0,
items: {
title: 'OPENPHAC',
closable: true,
iconCls: 'iconoOPENPHAC',
html: '<iframe style="height: 100%; width: 100%; border: 0" frameborder="0" src="http://openphac.com"></iframe>' (http://openphac.com&quot;></iframe>')
}
},{
region: 'south',
xtype: 'statusbar',
defaultText: 'Listo',
<!-- Barra de Estado de la aplicación -->
items: [{
xtype: 'label',
html: '<b>Empresa activa:</b>&nbsp;'
},{
text: 'EMPRESA DE PRUEBAS, S.L.',
handler: function () {
var T = Ext.getCmp('Tabs');
if (!T.findById('EmpresaActiva')) {
T.add({
id: 'EmpresaActiva',
title: 'Empresa activa',
iconCls: 'iconoEmpresaActivaTab',
autoLoad: {url: 'includes/verTab.php',params: {TabId: 'EmpresaActiva'}, scripts: true},
closable: true
});
}
T.setActiveTab('EmpresaActiva');
}
},'-',' ',' ',{
xtype: 'label',
html: '<b>Usuario activo:</b>&nbsp;'
},{
text: 'demo',
handler: function () {
var T = Ext.getCmp('Tabs');
if (!T.findById('UsuarioActivo')) {
T.add({
id: 'UsuarioActivo',
title: 'Usuario activo',
iconCls: 'iconoUsuarioActivoTab',
autoLoad: {url: 'includes/verTab.php',params: {TabId: 'UsuarioActivo'}, scripts: true},
closable: true
});
}
T.setActiveTab('UsuarioActivo');
}
},'-',' ',' ',{
xtype: 'label',
html: '<b>Fecha de trabajo:</b>&nbsp;'
},{
xtype: 'datefield',
format: 'd/m/Y',
value: '22/06/2009',
emptyText: '22/06/2009',
minValue: '01/01/2009',
maxValue: '31/12/2009',
name: 'FechaTrabajo',
id: 'FechaTrabajo'
}] }]
});
});
</script> </div>
</div></body>
</html>

Marci
22 Jun 2009, 6:02 AM
Hello again,
And thank you for reply..

I like the way you are able to load an external page in the second demo:
http://demos.theactivegroup.com/demo...script=treenav (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=treenav)

But I must honestly say, that I don't know what to do with the "Demo Source" ^^
I hope it's not too much to ask for, but would it be possible to do the exact same, if my code is the exact same as from the sample "Border Layout": http://www.extjs.com/deploy/dev/examples/layout/complex.html

I think I understand the code in that sample, so I would like if, you know, I'm standing there, I have made my layout, out of the sample, the next step is to make some kind of menu that can open remote sites in the center-panel, just like in the second demo you showed.

What would I have to do? :/

Hope still you're willing to help, and thank you so far.

koko2589
22 Jun 2009, 6:10 AM
donload this from here
http://extjs.net/forum/showthread.php?t=71961

Marci
22 Jun 2009, 7:04 AM
Hmm..
I downloaded those 6 files, but where is the "Getting started" guide? ^^

How do I integrate it? ^^

Marci
22 Jun 2009, 10:31 AM
I know it probably is a lot to ask for, but all I need is to get some kind of example, probably for totally newbies, but which js files I need to include, and then how I make a simple link, not necessary a "fancy" menu or anything special, just a link which can open a page in the iFrame, which should be in the center-panel, somehow.

I would be really grateful if someone could help me.
- Or is it at least possible to download the exact demo, with html page etc.?
(http://demos.theactivegroup.com/demodesk.html?demo=mif&script=treenav)

Thanks..