Ola pessoal eu sou novo neste forum e tb. no ext e javascript, mas estou gostando muito do visual e eu estou usando um exemplo do ext para fazer um sisteminha simples para estudo, gostaria muito da ajuda de vcs. para um problema no qual me deparei, é o seguinte, tenho um layout simples que tem uma dive com o menu accordion e outro painel principal onde quando um item é clicado ele abre um tab-panel até ai está perfeito só que eu gostaria de abrir tb. no tab ativo um formulário simples de cadastro, mas não estou sabendo fazer seria possível me ajudar, neste aspecto? diante mão obrigado, abaixo os códigos:
Pagina_cadastro.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ExtDesenv.blogspot.com - Abrindo páginas de menu no centro da aplicação</title>
<!--css-->
<link rel="stylesheet" type="text/css" href="lib/css/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="lib/shared/examples.css" />
<link rel="stylesheet" type="text/css" href="lib/shared/icons/silk.css" />
<style type="text/css">
.no-icon{ display:none; }
#content-portal{
padding:20px;
}
</style>
<!--js-->
<script type="text/javascript" src="lib/js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/js/ext-all.js"></script>
<script type="text/javascript" src="abrirPaginaCentro.js"></script>
</head>
<body>
<div id="content-portal">
<h1>SISALV - SISTEMA INTEGRADO DE ALVARÁS</h1>
<p>Administrador do Sistema - Marcos Duarte</p>
</div>
</body>
</html>
tabela_cad_bairros.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="lib/css/resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="lib/js/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="lib/js/ext-all.js"></script>
<script type="text/javascript" src="lib/js/states.js"></script>
<script type="text/javascript" src="lib/js/form_cad_tab_bairros.js"></script>
<link rel="stylesheet" type="text/css" href="forms.css"/>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="lib/shared/examples.css"/>
</head>
<body>
<script type="text/javascript" src="lib/shared/examples.js"></script>
<!-- EXAMPLES -->
<!--
<h1>Dynamic Forms built with JavaScript</h1>
<p>
These forms do not do anything and have very little validation. They solely demonstrate
how you can use Ext Forms to build and layout forms on the fly.
</p>
<p>The js is not minified so it is readable. See <a href="dynamic.js">dynamic.js</a>.</p>
-->
</body>
</html>
abrirPaginaCentro.js
// JavaScript Document
/**
* Tutorial ensinando como abrir páginas de um menu no centro da aplicação
* Desenvolvido por Bruno Tavares
* Publicado em http://www.extdesenv.blogspot.com
*/
var AbrirPaginaCentro = Ext.extend(Ext.util.Observable,{
constructor: function()
{
/*
* 1º Crio os componentes: o tabPanel, o viewport para conter os itens, e o menu lateral formado de
* um painel accordion com treePanels.
*/
//tabPanel
this.tabPanelCentral = new Ext.TabPanel({
region : 'center'
,activeTab : 0
,defaults : {closable: true}
,items : [{
title : 'Portal'
,contentEl : 'content-portal'
,closable : false
}]
});
//criar layout
new Ext.Viewport({
layout : 'border'
,items : [{
//menu lateral
region : 'west'
,layout : 'accordion'
,defaultType : 'treepanel'
,width : 300
,split : true
,layoutConfig : {fill: false, animate:true}
,defaults : {
border : false
,rootVisible: false
/*
* 2º Associo um evento click à cada treePanel.
*/
,listeners:{
scope: this
,click: this.onNodeClick
}
}
,items : [{
title : 'Tabelas'
,iconCls: 'silk-add'
,root : {
children: [
{text:'Tabelas1' , leaf:true, iconCls:'no-icon'}
,{text:'Tabelas2' , leaf:true, iconCls:'no-icon'}
,{text:'Tabelas3' , leaf:true, iconCls:'no-icon'}
,{text:'Tabelas4' , leaf:true, iconCls:'no-icon'}
,{text:'Tabelas5' , leaf:true, iconCls:'no-icon'}
,{text:'Tabelas6' , leaf:true, iconCls:'no-icon'}
,{text:'Tabelas7' , leaf:true, iconCls:'no-icon'}
]
}
},{
title : 'Cadastros'
,iconCls: 'silk-cog'
,root : {
children: [
{text:'Atendentes' , leaf:true, iconCls:'no-icon'}
,{text:'Solicitantes' , leaf:true, iconCls:'no-icon'}
,{text:'Clientes' , leaf:true, iconCls:'no-icon'}
,{text:'Representantes' , leaf:true, iconCls:'no-icon'}
,{text:'Compromissos' , leaf:true, iconCls:'no-icon'}
]
}
},{
},{
title : 'Configurações'
,iconCls: 'silk-cog'
,root : {
children: [
{text:'Feriados' , leaf:true, iconCls:'no-icon'}
,{text:'Permissões' , leaf:true, iconCls:'no-icon'}
,{text:'Horários' , leaf:true, iconCls:'no-icon'}
,{text:'Cargas' , leaf:true, iconCls:'no-icon'}
,{text:'Acesso ao sistema' , leaf:true, iconCls:'no-icon'}
]
}
},{
title : 'Relatórios'
,iconCls: 'silk-grid'
,root : {
children: [
{text:'Tempo Trabalhado por Atendente' , leaf:true, iconCls:'no-icon'}
,{text:'Vendas por Cliente' , leaf:true, iconCls:'no-icon'}
,{text:'Rotas de Distribuição' , leaf:true, iconCls:'no-icon'}
,{text:'Performance dos Representantes' , leaf:true, iconCls:'no-icon'}
]
}
}]
},
//tabpanel central
this.tabPanelCentral]
});
AbrirPaginaCentro.superclass.constructor.apply(this,arguments);
}
//Listeners {
/*
* 3º - Tento procurar uma aba com a descrição do item de menu (evita abas duplicadas, pode ser retirado)
* - Se não existir, eu crio
* - ativo a aba
*/
,onNodeClick: function( node )
{
var titulo = node.text;
var novaAba = this.tabPanelCentral.items.find(function( aba ){ return aba.title === titulo; });
if(!novaAba)
{
novaAba = this.tabPanelCentral.add({
title : titulo
,html : 'nova aba:' + titulo
});
}
this.tabPanelCentral.activate(novaAba);
/* 4º Esse passo seria carregar o conteúdo. Existem várias abordagens e eu não irei criar, somente comentar
O conteúdo da aba poderia ser carregado mediante um atributo URL no nó */
novaAba.load({
url : node.url
,scripts: true
});
novaAba.doLayout();
/* 4º Esse passo seria carregar o conteúdo. Existem várias abordagens e eu não irei criar, somente comentar
* O conteúdo da aba poderia ser carregado mediante um atributo URL no nó
*
* novaAba.load({
* url : node.url
* ,scripts: true
* });
*
* Ou então cada conteúdo seria uma extensão de um componente Ext e o nó guardaria o xtype desse componente.
*
* novaAba.add({
* xtype: node.childXtype
* });
*
* novaAba.doLayout();
*/
}
//}
});
Ext.onReady(function()
{
new AbrirPaginaCentro();
});
