Pra galera um Tri State em javascript

Front-end
#1

Olá pessoal!
Quem está trabalhando com ExtJS?

Estou pensando em escrever os fontes em javascript e css a mão para os 3 principais navegadores:
firefox, IE e Safari pois estes 3 representam 95% dos navegadores utilizados.

Como conheço rasoavelmente o javascript e css gostaria de saber a opinião dos que conhecem ExtJs.

É mais rápido construir meus proprios componentes (dentro de minhas necessidades) ou aprender o ExtJs?
Onde encontro um passo a passo sobre ExtJs?

Como o prometido:

/* ponham as 3 fotos que acharem melhor para Pcheckbox1.png, Pcheckbox2.png e Pcheckbox3.png */
<html>
<head>
<script type="text/javascript">


function tristate(texto)
{
	this.table = document.createElement("table");
	this.tablebody = document.createElement("TBODY");
 	this.table.cellpadding=0;
 	this.table.cellspacing=0;
 	this.table.style.border=0;

	this.hidden = document.createElement("input");
	this.hidden.setAttribute("type","hidden");

	this.tr = document.createElement("TR");
	this.td1 = document.createElement("TD");
	this.td2 = document.createElement("TD");

	this.div = document.createElement("div");
	this.div.style.width="16px";
	this.div.style.height="16px";
	this.div.style.backgroundImage =  "url('Pcheckbox1.png')";

	this.div.createState = function()
	{
		this.estado=0;
	}
	this.div.createState();

	this.div.changeState = function()
	{
		if(this.estado==0)
		{
			this.estado=1;
			this.style.backgroundImage =  "url('Pcheckbox2.png')";
		}
		else if(this.estado==1)
		{
			this.estado=2;
			this.style.backgroundImage =  "url('Pcheckbox3.png')";
		}
		else 
		{	this.estado=0;
			this.style.backgroundImage =  "url('Pcheckbox1.png')";
		}
	}


	this.div.onclick = function()
	{
		this.changeState();
	}

	this.getState = function ()
	{
		return this.div.estado;
	}

	this.setState = function (entre1e3)
	{
		this.div.estado = entre1e3;
		this.div.changeState ();
	}



	this.getElement = function ()
	{
		return this.table;
	}

	this.div.appendChild(this.hidden);
	this.td1.appendChild(this.div);
	this.td2.appendChild(document.createTextNode(texto));
	this.tr.appendChild(this.td1);
	this.tr.appendChild(this.td2);
	this.tablebody.appendChild(this.tr);
	this.table.appendChild(this.tablebody);
}

var estado1=new tristate( "tristate 1" );
var estado2=new tristate( "tristate 2" );
estado2.setState(1);

function getEstado()
{
	alert(estado1.getState()+"");
}

function load()
{	

	document.getElementById("aqui").appendChild( this.estado1.getElement() );
	document.getElementById("aqui").appendChild( this.estado2.getElement() );
	document.getElementById("aqui").appendChild( new tristate( "tristate 3" ).getElement());
	document.getElementById("aqui").appendChild( new tristate( "tristate 4" ).getElement());
	document.getElementById("aqui").appendChild( new tristate( "tristate 5" ).getElement());
}

</script>
</head>
<body id="aqui" onload="load();">

<input type="button" onclick="getEstado();" value="pega estado do primeiro checkbox"/>

</body>
</html>
#2

Da uma olhada no Dojo http://www.dojotoolkit.org/

Eu nunca trabalhei com o ExtJS, mas provavelmente eu mais facil usar as coisas que tem prontas, ou entao customiza-las. Construir algo to inicio, so quando nao tem jeito mesmo.

Estou fazendo muita coisa com o Dojo e estou bem satisfeito. Super facil de aprender, se vc tem nocao de JS e Jquery

//Daniel

#3

Olá,

Eu gosto bastante do ExtJS, tanto pela arquitetura, quando pela quantidade de componentes. Não é difícil de aprender, mas vc precisa ter uma boa noção de JS e JSON.
O livro ExtJS InAction é ótimo. Com ele vc aprende o básico, depois usando a documentação você consegue se virar muito bem.

Em relação ao dojo que o Daniel mencionou, eu na verdade nunca usei, mas acredito que seja bem legal pelo pouco que vi do site.

[]´s

#4

Aqui tem umas demos de dojo, a maioria de UI
http://demos.dojotoolkit.org/demos/

Aqui tem exemplos de alguns componentes dojo.
http://download.dojotoolkit.org/release-1.5.0/dojo-release-1.5.0/dijit/themes/themeTester.html

Dojo tb tem toda a parte de data store, portlets e etc.

Vale a pena dar uma estudada. =)

//Daniel

#5

Olá windsofhell!

Olhei o Dojo e também achei ele bem legal, mas acho que vou ficar mesmo com ExtJs.
Meu amigo aqui do trabalho já tem um pouco de experiência com ele e penso em seguir os passos dele.

davidbuzatto, hoje dediquei um bom tempo ao Ext e realmente não tem como fazer nada semelhante ao Ext sozinho e em pouco tempo.
Gotei muit do layout e da facilidade de controlar os componentes. Hoje estou apanhando com o JSON.
o firegub está dando esta mensagem:
invalid label: {‘Categories’: [{‘id’:‘1’, ‘Name’:‘teste 1’}]}


Ext.onReady(function(){
var categoriesStore = new Ext.data.JsonStore({
    url: 'teste.txt',
    root: 'categories',
    fields: ['id', 'name']
});



var combo = new Ext.form.ComboBox({
    store: categoriesStore,
    displayField: 'name',
    valueField:'id',
    typeAhead: true,
    mode: 'remote',
    forceSelection: true,
    triggerAction: 'all',
    emptyText: 'Select a category...',
    selectOnFocus: true,
    applyTo: 'categories-combo'
});
}

o ‘categories-combo’ é o id da minha div e no arquivo teste.txt eu tenho apenas isso:

{'Categories': [ { 'id':'1', 'Name':'teste 1' } ] }

não era para estar funcionando?
Coloquei a biblioteca e aparentemente não é configuração porque o combo aparece, mas vazio.
Estou errando o codigo e não sei porque.
pode me ajudar?

#6

Será que eu encontro o livro ExtJS InAction em PDF?

#7

Consegui!
o texte.txt não pode ser lido na maquina local por medidas de segurança. Eu não sabia disso.
exemplo de como ficou:

<html>
<head>
<title>Hello World Window</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
</head>
<script type="text/javascript">

Ext.onReady(function()
{
        Ext.QuickTips.init();

        var cidades = { success:true, dados:[
                 {"stateId":"1","name":"Acrelândia","id":"1"},
                 {"stateId":"2","name":"Assis Brasil","id":"2"},
                 {"stateId":"3","name":"Brasiléia","id":"3"},
                 {"stateId":"4","name":"Bujari","id":"4"},
                 {"stateId":"5","name":"Capixaba","id":"5"},
                 {"stateId":"6","name":"Cruzeiro do Sul","id":"6"},
                 {"stateId":"7","name":"Epitaciolândia","id":"7"},
                 {"stateId":"8","name":"Feijó","id":"8"},
                 {"stateId":"9","name":"Jordão","id":"9"},
                 {"stateId":"10","name":"Mâncio Lima","id":"10"},
                 {"stateId":"11","name":"Acrelândia","id":"1"},
                 {"stateId":"12","name":"Assis Brasil","id":"2"},
                 {"stateId":"13","name":"Brasiléia","id":"3"},
                 {"stateId":"14","name":"Bujari","id":"4"},
                 {"stateId":"15","name":"Capixaba","id":"5"},
                 {"stateId":"16","name":"Cruzeiro do Sul","id":"6"},
                 {"stateId":"17","name":"Epitaciolândia","id":"7"},
                 {"stateId":"18","name":"Feijó","id":"8"},
                 {"stateId":"19","name":"Jordão","id":"9"},
                 {"stateId":"20","name":"Mâncio Lima","id":"10"}
        ]};


        var store = new Ext.data.Store({
	        // url: 'cidades.json', // se url no lugar de data
                  data: cidades,
                  reader: new Ext.data.JsonReader({
                    root:'dados',
                     id:'stateId'
                  }, [
                     'stateId',
                     'name',
                     'id'
                  ])
                });

       // store.load(); // se url

    var grid = new Ext.grid.GridPanel({
	renderTo: document.body,
        width:"100%",
        height:300,
        title:'ExtJS.com - Browse Forums',
        store: store,
        trackMouseOver:true,
        disableSelection:false,
        loadMask: true,
        // grid columns
        columns:[ { header: "stateId", dataIndex: 'stateId' },
		  { header: "name",    dataIndex: 'name' },
		  { header: "id",      dataIndex: 'id'}]
    });
});
</script>
<body>
</body>
</html>
#8

Ops. Falei besteira.

Não é o ExtJS in Action (este ainda não foi lançado) que eu lí, mas sim o “Learning Ext JS”. Achei bem legal. Esse mês vai saiu uma nova edição. Procure na Amazon.

Se o ExtJS in Action seguir a tradição dos livros da série In Action, acredito que velha a pena esperar um pouquinho p/ comprar. É claro, se você puder esperar até o final de novembro, que é a data informada na Amazon.

[]´s

#9