Ir para conteúdo


Foto

Javascript OO com ExtJs


  • Por favor, faça o login para responder
5 respostas neste tópico

#1 EthraZa

EthraZa

    Member Avançado

  • Expert User
  • 542 posts
  • LocationSão Paulo

Postado 16 December 2008 - 22:43

Pra quem ainda tem dúvida de como criar uma classe no ExtJs, que herda as propriedades de outra, criar um evento e usa-lo em seus métodos, aqui vai um pequeno exemplo:

O que temos aqui nada mais é que uma aplicação (Tst) com uma classe (X), que herda todas as propriedades de Ext.util.Observable e tem um método próprio (alertX).
/*
 * Cria o espaco (classe) da nossa aplicacao 
 */
Ext.namespace('Tst.X');

/*
 * Uma funcao basica que inicia a classe do nossa aplicacao
 */
Tst.X = function(config){
	var config = config || {};
	Ext.apply(this, config);
		
	this.addEvents({
        alerted : true
    });
    
    Tst.X.superclass.constructor.call(this);
}

/*
 *  Extendemos nossa classe com a Observable, herdando todos seus metodos
 */
Ext.extend(Tst.X, Ext.util.Observable, {
	alertX: function(t,m){
		Ext.Msg.alert(t,m);
		this.fireEvent('alerted', t, m);
	}
});

/*
 *  Esperamos a pagina estar carregada (onReady)
 *  Criamos uma nova instancia da nossa aplicacao (new)
 *  Anexamos um listener a um evento do nossa aplicacao (listeners/on/addListeners)
 *  Executamos um metodo da nossa aplicacao (alert)
 */
Ext.onReady(function(){
	x = new Tst.X({
		listeners: {
			alerted: {
				fn: function(){
					console.info(arguments); // Mostra no firebug o array recebido do evento com t e m (fireEvent)
				}
			}
		}
	});
	
	x.alertX('Um titulo', 'Uma mensagem!');
});
Nós criamos a classe, estendemos ela com o Observable do ExtJs, instanciamos ela adicionando uma escuta em um evento da nossa classe e executamos um método dela que vai executar uma função e disparar o evento.
Para entender o que nossa classe está herdando, olhe no manual do ExtJs e veja todas as propriedades do Ext.util.Observables, por exemplo, ele tem um método addEvents, que nós usamos acima para criar nosso evento chamado "alerted".

Pode parecer complicado a primeira vista, mas esse é o métodos mais indicado para se trabalhar com ExtJs.
Agora, da próxima vez que vc for simplesmente usar um, digamos, Ext.grid.GridPanel, pense que vc pode criar uma classe sua e estender ela com o GridPanel para deixa-la ja, pré-configurada com as suas preferencias na aplicação que está desenvolvendo, ao invés de passar aquele monte de opções de configuração toda vez que quizer criar uma Grid. ;)
Mandriva Linux in LAMPE (Linux/Apache/MySql/Php/Ext)

#2 Rodrigo, Kptão Nascimento

Rodrigo, Kptão Nascimento

    Member Avançado

  • Expert User
  • 2472 posts
  • LocationTres Coroas, RS

Postado 17 December 2008 - 06:51

Espetacular....  ;D
quebro um galho enorme....
acho q da pra encher isso aqui de tutoriais hehe

abraços
Sempre que um tópico for resolvido clique no botão MARCAR COMO RESOLVIDO localizado ao lado do botão RESPONDER.

http://blog.rkn.com.br
http://twitter.com/blogrkn

Atualize seu navegador
http://imasters.uol....br/crossbrowser

#3 Perfect Lion

Perfect Lion

    Member Avançado

  • Administrators
  • 492 posts
  • LocationBrasil/SBC

Postado 17 December 2008 - 07:07

E tbm pode ser criado da seguinte maneira:

Ext.ns('Tst.X');
Tst.X = Ext.extend(Ext.util.Observable,{
	constructor: function(config){
		var config = config || {};
		Ext.apply(this, config);
		this.addEvents({
			alerted: true
		})
		Tst.X.superclass.constructor.call(this);
	}
	, alertX: function(t,m){
		Ext.Msg.alert(t,m);
		this.fireEvent('alerted', t, m);
	}
})
Ext.onReady(function(){
	var x = new Tst.X({
		listeners: {
			alerted: {
				fn: function(){
					console.info(arguments); // Mostra no firebug o array recebido do evento com t e m (fireEvent)
				}
			}
		}
	});
	x.alertX('Um titulo', 'Uma mensagem!')
})

eu aqui tbm ;)
Ajude a manter o fórum organizado.
Sempre que um tópico for resolvido clique no botão MARCAR COMO RESOLVIDO localizado ao lado do botão RESPONDER.

Fazer um CMS num é mole não.. ainda mais sozinho XD Ajude-me :P


#4 yes2

yes2

    Member Avançado

  • Membros
  • PipPipPip
  • 88 posts

Postado 17 December 2008 - 08:40

http://extjs.com/lea...lication_in_Ext

#5 rnightmare4

rnightmare4

    Member Avançado

  • Membros
  • PipPipPip
  • 39 posts

Postado 24 January 2009 - 13:47

kra valew mesmo já denho uma ideia de como fazer agora o problema ta sendo como crir minha aplicaçao com os namespaces, fiz a algum tempo atrás mas nao me lembro como era, e fazer assim é usual?

se puder kra me add no msn ai pra gente trocar uma ideia, ou melhor vc me ensinar
[email protected]

#6 EthraZa

EthraZa

    Member Avançado

  • Expert User
  • 542 posts
  • LocationSão Paulo

Postado 17 March 2009 - 17:56

Mais um exemplo! Dessa vez, apenas duplicando um componente ja existente e customizando ele com opcoes e ate listeners de eventos. No caso vamos criar um combo customizado.

Ext.ns('Tst');

Tst.MeuCombo = Ext.extend(Ext.form.ComboBox, {
	store: meuStore,
	tpl: meuTpl,
	displayField: 'text',
	valueField: 'id',
	allowBlank: false,
	typeAhead: true,
	mode: 'remote',
	triggerAction: 'all',
	emptyText: 'Selecione um',
	forceSelection:true,
	selectOnFocus: true,
	width: 170,
	itemSelector: 'div.search-item',
	
	initComponent: function(config) {
		Ext.apply(this, config);
		this.addListener({
			render: function(){
				if (this.store.data.getCount() == 1) {
					var i = this.store.data.first().get('id');
				} else {
					var i = get_cookie('comboVal');
				}
		    	if (i) this.setValue(i);
			},
			select: function(o,r){
				set_cookie('comboVal', r.get('id'), '', '/', '', '' )
			}
		});
 
		Tst.MeuCombo.superclass.initComponent.apply(this, arguments);
	}
});
Ext.reg('meucombo', Tst.MeuCombo);


Uso:
...
items: {
	xtype: 'meucombo',
	emptyText: 'Selecione um qualquer',	// As opcoes aqui sobrepoe as da classe
	listeners: {	// Os listeners aqui nao sobrepoem os da classe, sao adicionados a ela.
		select: carregaDados
	}
}

Esse post esta virando um repositorio de exemplos!  ;)
Mandriva Linux in LAMPE (Linux/Apache/MySql/Php/Ext)




0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos