Uma maneira simples de criar janelas com a lib extjs.

Includes cd css
ext/resources/css/ext-all.css
ext/resources/css/xtheme-default.css

A primeira linha corresponde ao css default da ext, a segunda faz referência ao theme, na versão 1.1 existem 3 opções além do default: areo,vista e gray.

Includes de javascript
ext/adapter/ext/ext-base.js
ext/ext-all.js

Você pode trabalhar com outros adaptadores: jQuery,Prototype e YUI. Já fiz alguns testes com o jQuery, funciona perfeitamente, mas neste post vamos usar o “Stand-Alone” ext-base.js.

Classe para manipulação da janela

var ExtJs = function() {
 var dialog = [];
 return {
  init: function() {
   Ext.select('button').on('click',function(){
    ExtJs.showDialog(this.getAttribute('dialogId'))
   });
  },
  showDialog : function(xid) {
   if (!dialog[xid]) {
    dialog[xid] = new Ext.BasicDialog('', {
     autoCreate: true,
     width:500,
     height:300,
     shadow:true,
     minWidth:300,
     minHeight:250,
     proxyDrag: true,
     title: 'Minha Janela número '+xid
    });
    dialog[xid].addKeyListener(27, dialog[xid].hide, dialog[xid]);
    dialog[xid].addKeyListener(13, dialog[xid].hide, dialog[xid]);
    dialog[xid].addButton('Close', dialog[xid].hide, dialog[xid]);
    dialog[xid].body.dom.innerHTML = Ext.get('content'+xid).dom.innerHTML;
    dialog[xid].on('hide',function(){
    dialog[xid].destroy(true);
    dialog[xid] = false;
   });
  }
  dialog[xid].show(Ext.get('trigger')).toFront();
 }
};
}();

Esta classe busca, através de um seletor (neste caso a tag button), e adiciona um evento onclick para criação da janela.

Iniciamos a extjs baseada na classe acima
Ext.onReady(ExtJs.init,ExtJs,true);

Pronto, tudo certo basta clicar nos botões.

O HTML
<div style="text-align:center">
<button class="dialog-box" dialogId="1">Dialog 1</button>
<button class="dialog-box" dialogId="2">Dialog 2</button>
<button class="dialog-box" dialogId="3">Dialog 3</button>
</div>
<div id="trigger" style="position:absolute;top:50%;left:50%;"></div>
<div id="content1" style="display:none">Conteúdo 1</div>
<div id="content2" style="display:none">Conteúdo 2</div>
<div id="content3" style="display:none">Conteúdo 3</div>

Referências:
extjs.com/learn
extjs.com.br
google.com

[s]

JunioR

Anúncios