O problema da Ext é que enquanto se ganha em funcionalidade perde-se muito no quesito leveza. Um sistema todo baseado na ext só deve rodar bem num pc com 1 ghz de ram.
4
2.5k
3 meses depois...
30 de agosto de 2007 às 01:13
11 meses depois...
info
Grupo: Visconde
Registrado: 29/06/08
Posts: 354
Reputação: +10
Char no Tibia: Sir Aluxes
10 de julho de 2008 às 13:02
Vou Bixar Pra Ver.
1 ano depois...
info
Grupo: Campones
Registrado: 18/08/09
Posts: 2
Reputação: 0
18 de agosto de 2009 às 15:25
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();
});
/*
Depois de responder alguns posts no fórum brasileiro sobre como abrir itens de um menu em um tabPanel central estou escrevendo sobre o assunto aqui no
blog, através de tutorial. Muitas aplicações se baseiam nesse layout: links na esquerda com tabPanel ao centro. Vamos criar uma subpasta
abrirPaginaCentro dentro da pasta examples do Ext. Depois disso criar um arquivo index.html com o código abaixo e um arquivo abrirPaginaCentro.js
Sua configuração deve estar assim:
Então agora no arquivo JS vou criar uma nova classe AbrirPaginaCentro e nela vou desenvolver os seguintes passos:
1º Crio os componentes: o tabPanel, o viewport para conter os itens, e o menu lateral formado de um painel accordion com treePanels. O seu menu
lateral pode ser o que quiser, treePanels, labels, buttons...Não importa o componente, o que importa é que quando clicado dispare um evento.
2º Associo um evento click à cada treePanel. Como disse, o menu pode ser constitúido de vários componentes, procure na documentação como associar
evento click à ele e quais eventos são passados.
3º - Na função que associei vou implementar a seguinte regra de negócio:
Tento procurar uma aba com a descrição do item de menu. Isso evita abas duplicadas.
Se não existir, eu crio com o método add.
A aba foi criada e só resta ativá-la
Pronto! Temos aí links em um menu lateral abrindo novas abas no tabPanel central. Não irei abordar como carregar conteúdo nas abas, mas no código
fonte fiz algumas observações que podem guiá-lo nessa tarefa.
Link para exemplo com código fonte aberto aqui.
*/
info
Grupo: Visconde
Registrado: 10/06/06
Posts: 338
Reputação: +6
Char no Tibia: Setyte Berseker
A biblioteca EXT visa simular uma interface gráfica (GUI) amigável com um design bom e o uso de AJAX. É muito fácil de ser usada e a documentação está totalmente clara para o aprendizado. Muitos sites Web 2.0 já a utilizam e possuem grande destaque.
Irei dar um exemplo da comunidade brasileira do EXT JS, lembrando que você terá que baixar a biblioteca.
Veja o funcionamento aqui
Links