Stiod Blog

Segue a segunda parte do tutorial de introdução ao framework do ExJs.

Vamos falar dos Widgets, que são aplicativos feitos com o Extjs para facilitar o desenvolvimento das aplicações web.

E pra começar crie um arquivo HTML [não esqueça de baixar os fontes do ExtJs] e :
No HEAD do arquivo HTML referencie os arquivos script e de formatação de estilo.

 
<!-- CSS pegue o arquivo na pasta ext-2.2\resources\ -->
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
 
<!-- Ext-base.js pegue o arquivo na pasta ext-2.2\adapter\ext\ -->
<script type="text/javascript" src="js/ext-base.js" ></script>
<!-- Ext-all.js pegue o arquivo na pasta raiz ext-2.2\ -->
<script type="text/javascript" src="js/ext-all.js"></script>
 

E insira no corpo do documento esses elementos:

 
<div id="quadro-id"></div>
<div id="quadro-conteudo"><span>Conte&uacute;do</span></div>
 

Coloquei essa formatação em um STYLE pra deixar os textos mais harmônicos e definir um tamanho para o quadro que irá gerar o Ext Panel

 
body{
  font:normal normal 12px/1.8em arial, 'trebuchet ms', verdana;
}
#quadro-id{
  width:500px;
}
 

Agora indo para a parte mais importante os Scripts:

 
//Verificando se o ExtJs foi carregado
Ext.onReady(function(){
  //Instanciando um novo objeto do Extjs
  var quadro = new Ext.Panel({
    title:'meu quadro',
    //referenciando um objeto no corpo do HTML
    renderTo:'quadro-id',
    //tem a opção de ser expansível
    collapsible:true,
    //Opção de ser arrastado, mas volta ao ponto original
    //Necessita incluir as propriedades de Drag n' Drop
    draggable:true,
    //icone de fechar,  precisa de programação pra interatividade
    closable:true,
    //Inserção e programação dos botões do cabeçalho do PANEL
    tools:[{
      id:'help',
      handler:function(){
          Ext.Msg.show({
          width:350,
          title:'titulo do texto de ajuda',
          msg:'corpo do  quadro de ajuda'
        })
      }
    },{
    id:'close',
    handler:function(){
      Ext.destroy(quadro);
    }
    }],
    // conteúdo a ser renderizado dentro do PANEL
    contentEl:'quadro-conteudo'
  })
  //Centralizando quadro no centro da tela
  Ext.get("quadro-id").center();
});
 

O Widget PANEL e seus elementos visuais podem ser customizados, os arquivos de imagens e css desse objeto estão separados na pasta RESOURCES com seu respectivo nome.

Bom.. é só isso .

Coloquei esse exemplo no nosso servidor pra quem quiser acessar e ver funcionando.

Abraços a todos e em seguinda colocarei mais funcionalidades do ExtJs.