EXT Dicas e Truques III

16 08 2008

Saudações

Bom neste post vou falar um pouco sobre:

  • Adicionar eventos em objetos do EXT
  • Manipular elementos HTML via Ext
  • Manipular elementos do Ext através do seu html id

Bom vamos lá então

Eventos

Um evento é um acontecimento, ou seja podemos definir que no momento que algo aconteça alguma outra coisa também aconteça :). Cada objeto Ext possui seus próprios eventos, para conhecer os eventos de um objeto, por exemplo do Ext.tree.Panel olhe na documentação na última sessão, podemos ver ali uma séria de eventos, cada objeto possui seu próprio conjunto de eventos, para adicionar uma funcionalidade ao evento durante a criação de um objeto utilize o atributo listeners, exemplo:

var tree = '';
Ext.onReady(function(){
   tree = new Ext.tree.TreePanel({
      el:'elemento_de_exibicao',
      useArrows:true,
      autoScroll:true,
      animate:true,
      enableDD:true,
      containerScroll: true,
      dataUrl: 'url.php',
      root: {
         nodeType: 'async',
	 text: 'root',
         draggable:false,
	id:'source'
      },
      listeners: {
         // quando clicar em algum elemento da tree executa
         click: function(node){
            alert(node.getPath());
         }
      }
   });
   // render the tree
   tree.render();
   tree.getRootNode().expand();
});

Com isso temos uma tree que ao ser clicada vai dar um alerta do path do nodo selecionado.

Quando for adicionar um evento observe sempre os parâmetors que aquele evento passa para a sua função, assim você pode ter dados valiosos.

Manipular Elemento

Para realizar a manipulação de elementos através de seu id HTML o ext disponibiliza 3 funçõa:

  1. Ext.get : retorna um elemento do tipo Ext.Element;
  2. Ext.getCmp: retorna o elemento Ext associado ao id passado;
  3. Ext.getDom: retorna o Dom node do id passado, em outros frameworks como prototype e o ext esta função seria um equivalente ao $.

Suponha que você possua uma toolbar parecida com esta:

tbar:[
{text:'Editar',handler:function(){alert(10)},  id:'btn_0',iconCls:'edita',tooltip:'Editar Pasta'},
{text:'Deletar',handler:function(){alert(11)}, id:'btn_1',iconCls:'apaga',tooltip:'Remover Pasta'}
]

Como fazer para desabilitar o botão de editar?

Ext.getCmp('btn_0').disabled();

Para atualizar a propriedade value de um input de um formulário via Ext faça:

Ext.getDim('id_campo').value = '10';

Bom por hoje é isso ai, até a próxima e boa noite a todos!


Ações

Information

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: