rpm2cpio arquivo.rpm | cpio -idmv

Link sobre cpio

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.

Recentemente, em um cliente, tive que utilizar o framework javascript Extjs pra constuir uma interface no famoso estilo web 2.0 , com vários efeitos de navegação(Drag 'n Drop, Fade, Slides) e como não a conhecia tive que entrar em debugLearning mode on.

Extjs já está na sua versão 2.2 e não me aprofundei nos conhecimentos das versões anteriores e nesse post quero ser mais objetivo e pouco introdutório nos seus conceitos e ir por as mãos na massa.

Você pode começar baixando o código fonte com exemplos e documentação que estão em http://www.extjs.com/download e aconselho também a baixar a documentação que esta em arquivo de AdobeAir.

Pra prática logo né ?!

Você já deve conhecer o getElementById, o getElementsByTagName e um monte de outras propriedades em javascript.

Segue alguns Exemplos de como funciona no ExtJs:

- document.getElementsById("id") = ExtJs fica Ext.get("id")
- document.getElementsByTagName("tag") =  Ext.select("tag")
- Recuperar todos os elementos com a classe "red-link" = Ext.select(".red-link")
- Todos os DIVs com a classe "box" =  Ext.select("div .box")
- Centralizar um objeto no centro da tela = Ext.get("obj").center()
- E NÃO É SÓ ISSO! [Polishop Rules]

Pra quem conhece frameworks javascript já nota a semelhança com Jquery, Prototype e outras similares.

Mas o ponto forte do ExtJs são os seus widgets pra montar Panels, Grids, MsgBoxes, Drag'n Drop e muitos outros objetos e efeitos de navegação que tanto enchem os olhos do usuário final.

A seguir estarei publicando mais textos sobre as funcionalidades, dicas e algumas outras coisas que acredito serem interessantes sobre esse framework.

That's not all folks.

See you in a while!

Uma boa utilidade para ser aplicada é quando precisamos customizar apenas um elemento dentro de tantos que já tem uma formatação pré-definida por outra Classe mas não queremos incluir mais um seletor no CSS para fazer algo relativamente simples.

Exemplo prático

CSS

li.item_style{
color:#333;
border-bottom:1px solid #ccc;
background:#ccc;
}

li.bigger_font{
font-size:16px;
}


HTML

No Código acima temos um estilo sendo aplicado a uma lista não ordenada e queremos que apenas um elemento desta lista(no exemplo o último elemento da lista) tenha um tamanho de fonte maior do que os outros. Fazendo assim aplicamos duas classes nessa mesma tag a diferenciado das outras e não precisando sujar a formatação inicial e aumentar desnecessáriamente seu código CSS.

Esse é somente um exemplo com fontes mas pode ser atribuido a qualquer propriedade de um CSS dando dinamismo à página enriquecendo o código e não se utilizando gambiarras e sujeiras dentro de seu código.

<script language="JavaScript">
<!-- Begin
function getCSS()
{
 datetoday = new Date();
 timenow=datetoday.getTime();
 datetoday.setTime(timenow);
 thehour = datetoday.getHours();

 if (thehour > 20)
  display = "tree_twilight.css";
   else if (thehour > 17)
  display = "tree_sunset.css";
 else if (thehour > 14)
  display = "tree_afternoon.css";
 else if (thehour > 11)
  display = "tree_noon.css";
 else if (thehour > 7)
  display = "tree_morning.css";
 else if (thehour > 4)
  display = "tree_sunrise.css";
 else if (thehour > 1)
  display = "tree_twilight.css";
 else
  display = "tree_sunset.css";

 var css = '< '; css+='link rel="stylesheet" href=' + display +
 ' /';  css+='>';

 document.write(css);
// End -->

}
</script>
<script language="javascript">getCSS();</script>

Onde:

* Das 5 ás 8 da manhã: Ela utiliza o tema sunrise.
* Das 8 da manhã até o Meio-dia: Ela utiliza o tema morning.
* Do Meio dia ás 3 da tarde: Ela utiliza o tema noon.
* Das 3 ás 6 da tarde: Ela utiliza o tema afternoon.
* Das 6 da tarde ás 9 da noite: Ela utiliza o tema sunset.
* E das 9 da noite ás 5 da manhã: Ela utiliza o tema twilight.

Caso o usuário navegue com o JavaScript desabilitado, ela utiliza o tema sunset:

<noscript>
<link rel="stylesheet" href="tree_sunset.css" type="text/css">
</noscript>

Enjoy it