When calling Ext.iterate with an object the parameters passed back to the iterated function are:

(String key, Object value)

However when calling Ext.iterate with an array the parameters are:

(Object item, Number index, Array allItems)

The gotcha here is that in the Ext 3.0 docs only the object call back is shown.  Because of this you might think that the array call returns the index then the actual item bu as you can see that is not the case.

There is a thread on the Ext forum here about maybe making this consistent in the next major release.

I am currently trying to learn ExtJS, a great javascript library I have seen ever. BUT,  it seems to very hard to me as a newbie.  A very simple tutorial written by Anis uddin Ahmad of right brain titled of Extjs quick start guide for jQuery Developers is very helpful. If anyone have more site like this for newbie, may share with me on this blog.

I started working on a project a few months ago that leveraged the Ext JavaScript  library for just a handful of features.  After some requests for some improvements in one section I decided to try to leverage a little more of the Ext library to improve it.  I decided to start just by redoing a form to use remoting.   Now I’ve done this kind of thing before  in all of the  the Adobe Action-script platforms ( Flex, Flash and Air)  so I am rather comfortable with the basic concepts.    I am also very comfortable with JavaScript having worked with it for over 10 years and using DHTML and other tricks (img src updates, etc.)  to do Ajax type magic before Ajax was even in the lexicon. I will say that some of the conventions used by JS developers drive me nuts… but that’s all formatting.   One really completely new area for me was JSON.  I’ve always wanted to try it so I figured this was the perfect opportunity.  So I started with a simple task on this one form.   Populate a single Combo Box remotely from a JSON datasource.  Now when I learn to program a new language (or library in this case) I need two things.   The docs and working examples.    On the documentation side of things Ext has a very good API documentation at http://www.extjs.com/deploy/dev/docs/ The one area I found lacking was in the way of simple examples.    One thing I always liked from Adobe documentation was the examples that were included the docs.   Always very simple and always just focused around the one object you were looking at.    Ext has provided some really nice sample applications at http://www.extjs.com/deploy/dev/examples/samples.html however it can be a bit hit and miss to locate the combination of examples that have the features you are looking for.   In particular I could not locate a single example that was just as simple as …. here is how you load JSON data into a combo-box.   I finally found a good one at  http://technopaper.blogspot.com/2009/11/dynamic-loading-of-combobox-using-extjs.html#comments I hope to leave some additional posts as I find bits and pieces here and there.

Спешу сообщить, что мой адрес поменялся.

Если Вы нашли какую то мою запись интересной, проверьте может к ней есть продолжение или исправления.

Живой блог лучше чем мертвый.

Новая rss волна – ignar’s log

Мой твиттер остался неизменным – ignart

Мои контакты

I’ll start by saying that I found this bug while working with ExtJS. It’s worth noting because it ws very frustrating to deal with, and also, I could not find an actual bug explanation.

The simplified test case code for this would be:

Ext.onReady(function() {
var win = new Ext.Window( {
width : 300,
height : 300,
layout : 'fit',
items : [ {
xtype : 'form',
layout : 'anchor',
items : [ {
xtype : 'tabpanel',
anchor : '100% 100%',
autoScroll : true,
items : [ {
title : 'Tab 1',
id : 'tab1',
html : 'Really complex content goes here'
} ],
activeTab : 0
} ]
} ]
});
win.show();
});

This shows a window, containinga tab panel, with only one tab and some text in it. In order to observe the strange behavior, after the page displays, try setting the height of the tab to 500px.

Ext.getCmp('tab1').setHeight(500);

If you run this from Firebug’s console, or from IE8’s developer tools script console, you will notice that scroll bars will appear in an instant. However, if you set IE8 to function on IE7 Browser Mode and IE7 Document Standards, and then run the same command, the overflow will appear not to function. In fact, it seems that IE7, instead of adding the scrollbars on the inside of the overflowed container (as it usually does), it adds them on the outside of the contained div. This is way they are not visible. However, even if they were visible, they wouldn’t work.

The generated HTML structure which causes this problem can be simplified like this:

<div style="overflow: auto; width: 282px; height: 238px;">
<div style="width: 282px; height: 500px; overflow:hidden; position:relative;">
Really complex content goes here
</div>
</div>

So, even if you will notice the scrollbars are visible, they will not function in IE7. After trying to remove different stuff to see what’s broken, I noticed it’s got something to do with the position:relative attribute. Even if this seems like a sufficiently easy fix, it didn’t work on my complex layout.

So, without finding an actual solution, I settled for this workaround:

Ext.onReady(function() {
var win = new Ext.Window( {
width : 300,
height : 300,
layout : 'fit',
items : [ {
xtype : 'form',
layout : 'anchor',
items : [ {
xtype : 'tabpanel',
anchor : '100% 100%',
items : [ {
title : 'Tab 1',
autoScroll : true,
items : [{
xtype : 'panel',
html : 'Really complex content goes here',
height : 500
}]
} ],
activeTab : 0
} ]
} ]
});
win.show();
});

So instead of trying to make the tab panel scroll its body, I added an intermediary object which does only that: overflow : auto; Its content is correctly scrolled in Firefox, IE8 and IE7.

So far, this is the best I could come up with, and I’m happy that at least it works.

Later edit:
Seems like the solution was simpler than that: all I had to do was to specify position:relative for the element with overflow:auto. A very good explanation can be found here

Top 3 Terms people used to find this blog:

1. Pentaho – extjs

2. PRD – BI Server publish password

3. Pentaho cdf

]]> http://mankzblog.wordpress.com/2009/11/02/new-book-ext-js-3-0-cookbook-announced-by-packt-publishing/ Mon, 02 Nov 2009 19:39:18 +0000 Mats Bryntse http://mankzblog.wordpress.com/2009/11/02/new-book-ext-js-3-0-cookbook-announced-by-packt-publishing/

Packt publishing recently announced the new Ext JS 3.0 Cookbook. They provided me with a copy and asked me to do a review which I happily agreed to. Check back in a week or two to read my full review. Here’s some of the good stuff covered in the book:

• Master the Ext JS widgets and learn to create custom components to suit your needs
• Build striking native and custom layouts, forms, grids, listviews, treeviews, charts, tab panels, menus, toolbars and much more for your real-world user interfaces
• Packed with easy-to-follow examples to exercise all of the features of the Ext JS library
• Part of Packt’s Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible

So far there has only been a few books released about ExtJS so this book is definitely good news! It looks like a very interesting read judging from the TOC, click the image to learn more!

The conference in Raleigh was really excellent with attendance of around 250.

Sessions that I got the most out included two on ORM by Bob Silverberg that got down to code samples of what is great about the ORM approach to database access and management. TIP – no need for cfQueryParam with ORM any more – woot! See Bob’s basepersistentobject.riaforge.com for something to get started, and read the Adobe help on this first as it is very good.

Building RIAs using Ext JS 3.0 and ColdFusion was very informative as Paul Cormier has been using the ExtJS and CF together for a while.

Sean Corfield also delivered an impassioned overview of the ColdFusion open source landscape and threw down the gauntlet to CF developers to give back. I will see what I can do!

Oh, also liked Andy Matthews session on CF and AIR with jQuery. AIR apps rock. Check out the AIR Introspector – like firebug for AIR apps – air.introspector.console.log to invoke it.

Did two sessions on the CFBuilder IDE including Charlie Arehart’s Hidden Gems in CFBuilder and Simon Free’s CFBuilder Basics. I will definitely be using CFB for the productivity enhancements and tight integration with CF.

Finally, Excel and Coldfusion delivered by Jim Wright compared advanced Excel file creation and manipulation pre CF9 and compared it to what is new with CF9 new features. See http://www.bennadel.com/projects/poi-utility.htm for information on the POIUtility.cfc by Ben Nadel for more information. POI not good only at a luau!

 I just have read the post
http://www.extjs.com/forum/showthread.php?t=26728.

 I disagree the concept of “Preconfigured class” considered as suggestion. Probably, in some cases it is OK but they are few of them. When I first time faced the “Preconfigured class” in extjs, I recall the ASP.NET ecosystem controls immediately. Because both “Preconfigured class” and ASP.NET control class use inheritance to customize, there are some pitfalls that are intrinsic to them:

public partial class MyControl : System.Web.UI.UserControl
{
        private void CreateUrlResolver(){
        ...

        private Renderer GetRenderer(){
        ...

        protected void Button1_Click(object sender, EventArgs e)
        {
                //some logic
        }
...

1. The class is not testable as it is part of UI framework so you cannot unit tests it. You need to employ other techniques as is extra effort.
2. The class is usually littered with a lot of code. There are  event handling, creation methods, and view methods that are related to rendering. These all violate SRP and it is nightmare to maintain such classes in system.

 The javascript environment is much more flexible but people still use inheritance. I have seen a lot of samples where people extend the Ext.Component in order to add one event handler only, thereby making constrains for them to unit test and utilize it again. For instance, there is a panel with button that is charged with task of saving current state. In case of “Preconfigured class” I would have something like this.

var StatePanel = Ext.extend(Ext.Panel,  {
        frame:true,
        renderTo:'panel',
        constructor:function(config) {
           config.items = config.items || [];
           var button = new Ext.Button({text:"Ok", width:50});
           config.items.push(button);
           StatePanel.superclass.constructor.call(config, this);
           button.on("click", this.onClick, this);
        },

        onClick:function() {
                 // save the current state
         }
});

 Let’s assess the implementation above:

1. Complexity. It invokes extending mechanism to emulate inheritance – that means extra manipulation with JavaScript’s prototypes. It is complex and emits the extra objects and closures that support inheritance.
2. Reusability. What is really annoying is that the code that is charged with saving state is sealed. It cannot be used anywhere else. Sure, you can derive the base panel class and inject it there, thereby making messy at the abstract level. I mean that you shouldn’t share functionality with the base class. If you would use it as store of common methods it just loses its cohesion. You cannot maintain the class that is littered with a lot of aspects of system in future.
3. Testability. This class is part of UI framework so the unit testing is an issue. You need some scaffolding to run it.

 If you dare to test it, you need html holder (it is div element with id) for your panel and then you have to init it in “set up”.

function set_up(){
     _testPanel =   new StatePanel({renderId:”testId”});
}
function testMethod(){
     .....
}

 You always need to keep in mind both ExtJs and UnitTestRunner lifecycles. But the most routine would be clean up code after the test as each test is interlaced with html.

 Let’s assess the same “StatePanel” but all handling is moved to “StateHandler” class that acts as controller:

function StateHandler(button) {
            this.init = function(component) {
            this._component = component;
            button.on("click", this.onClick, this);
           }

           this.onClick = function() {
                  // save the current state
            }
}

var button = new Ext.Button({text:"Ok", width:50});
var stateHandler = new StateHandler(button);
new Ext.Panel({frame:true, renderTo:'panel',items:[button],plugins:[stateHandler]});

What we have gained here:

1. Complexity. I have plain object with single responsibility and it’s cool.
2. Reusability. I can plug it to any component.
3. I can simply test it without any scaffolding as I have plain object not connected to UI framework.

 This implementation recalls the MVC pattern, especially PassiveView. The idea is to make the view a dumb slave to move all code to the controller. It doesn’t mean that view is untouchable, it rather means that view should encompass methods that are familial to view. It could be methods that deal with the rendering which probably requires the intimate overrides. The new API of view could be subject to extend it.

 In sample above I used the plugins property to inject controller.

    
         var button = new Ext.Button({text:"Ok", width:50});
         var stateHandler = new StateHandler(button);
         new Ext.Panel({frame:true, renderTo:'panel',items:[button],plugins:[stateHandler]});
    
  

 You can use any kind of injection. The “plugins” property as pattern is not requirement. Use any creational patterns not to duplicate the creation of panel as well as gain flexibility in re-using the code and applying conditional algorithms there.

MyApplication.windows.FormBuilder.CreateMySuperPanel = function(){
           //some conditional logic related to creation
           //
           var panel = new Ext.Panel({frame:true, renderTo:'panel',items:[button]);
           var button = new Ext.Button({text:"Ok", width:50});
           var stateHandler = new StateHandler(button);
           stateHandler.init(panel); 

}

 You can approach it in many ways, the main is to keep in mind separation of concerns. The initial concern is to wire all dependencies. I bet it’s much better to have class named “builder” that creates the panel at your will rather than to extend that panel for injection of only creation routine.

  
  var StatePanel = Ext.extend(Ext.Panel,  {
    myConfigConstant:'someConstant',
    frame:true,
    ...
    constructor:function(config) {
           config.items = config.items || [];
           var button = new Ext.Button({text:"Ok", width:50});
           config.items.push(button);
           StatePanel.superclass.constructor.call(config, this);
           button.on("click", this.onClick, this);
        },
   

 The next concerns are view and controller where the controller is the “StateHandler” and view is “Ext.Panel”. This approach will evolve your architecture in future. Though it cannot be considered as remedy. You cannot apply it to everywhere, for instance, a gender control. I wouldn’t implement controller and builder for it I would rather implement “Preconfigured class”.

  
 Ext.extend( Ext.form.ComboBox, {
      typeAhead: true,
      triggerAction: 'all',
      lazyRender:true,
      mode: 'local',

   constructor :function(){
       var male = "male";
       var female = "female";
   }

});


 

 I call such component the “primitive component”. It’s not worth to apply builder and controller as separate classes. It is pretty enough to pre-configure. I don’t believe that the gender component will ever grow. In other words if it’s simple per se, don’t add extra complexity. It is not worth to segregate extra classes to highlight their relationships.

Here’s another short webcast showing how you can turn the scheduler into a simple Gantt chart easily.

Enjoy!

In the application development, there are instances when we have to indicate a mandatory form field by showing a red asterisk next to the field label.

Mandatory field with red asterisk

The code here overrides the private function of the Ext.form.FormLayout and works with a custom property required. I chose the form layout as the rendering of the labels is taken care by this layout. Other option was to use the allowBlank property but just to keep things simple I have used the custom config required.

For ExtJS version 2.2.x


Ext.override(Ext.layout.FormLayout, {
renderItem : function(c, position, target){
if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){
var labelSep = typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator;
if (c.required) labelSep += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';

var args = [
c.id, c.fieldLabel,
this.getLabelStyle(c.labelStyle),
this.elementStyle||'',
labelSep,
(c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),
c.clearCls || 'x-form-clear-left'
];
if(typeof position == 'number'){
position = target.dom.childNodes[position] || null;
}
if(position){
this.fieldTpl.insertBefore(position, args);
}else{
this.fieldTpl.append(target, args);
}
c.render('x-form-el-'+c.id);
}else {
Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
}
}
});


For ExtJs version 3.0.x

Ext.override(Ext.layout.FormLayout, {
getTemplateArgs: function(field) {
var noLabelSep = !field.fieldLabel || field.hideLabel;
var labelSep = (typeof field.labelSeparator == 'undefined' ? this.labelSeparator : field.labelSeparator);
if (field.required) labelSep += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
return {
id: field.id,
label: field.fieldLabel,
labelStyle: field.labelStyle||this.labelStyle||'',
elementStyle: this.elementStyle||'',
labelSeparator: noLabelSep ? '' : labelSep,
itemCls: (field.itemCls||this.container.itemCls||'') + (field.hideLabel ? ' x-hide-label' : ''),
clearCls: field.clearCls || 'x-form-clear-left'
};
}
});


Following is a typical usage:
{
fieldLabel: ‘Patient Id’,
xtype: ‘textfield’,
name:’patientId’,
required: true
}

Apa itu Ext JS ?

Ext JS merupakan salah satu Framework yang digunakan untuk membuat website. Framework yang dikembangkan oleh Jack Slocum mulai tahun 2006 ini terdiri dari library-library Javascript dan merupakan salah satu dari banyak tools yang digunakan untuk pengembangan software berbasis RIA (Rich Internet Application).

Dibawah ini adalah contoh pengembangan website dengan menggunakan Ext JS.

Artikel berikutnya kita akan membahas dan belajar bersama, bagaimana menggunakan Framework Ext JS.

I was wondering how i could make EditorGridPanel readonly at runtime. Finally I managed to find out a way to do this. What you have to do is register an handler for grid’s beforeedit event which will return false !!!

say, you need a function which will do this:

//handler function for ‘beforeedit’ event
function handler_to_makeReadOnly(){return false;}
//function to make EditorGridPanel read only
function MakeEditorGridPanelReadOnly(editorGridPanel)
{
	editorGridPanel.on(‘beforeedit’
  ,handler_to_makeReadOnly,this);
}
//function to make EditorGridPanel normal(editable)
function MakeEditorGridPanelUnReadOnly(editorGridPanel)
{
	editorGridPanel.un(‘beforeedit’
  ,handler_to_makeReadOnly,this);
}

Note: MakeEditorGridPanelUnReadOnly will just remove the effect of MakeEditorGridPanelReadOnly function by unregistering the handler handler_to_makeReadOnly. If grid column models are read only it wont change them, means those columns will still be read only.

If you find any problem just write a comment to reach me.

Modification History:

1. 05 Nov 2009: Made the code block proper.

Need more AIR, ORM, and ExtJS with CF!

Just want to write down the result of another spike regarding session expiration. I’d be glad to know from skilled guys out there what are the best practices to solve this problem. Anyway, you can return from the session filter a JSON (or XML or anything else supported) result using the usual sendRedirect method of HttpServletResponse interface. The result can contain a code indicating the type of error occurred:

{ success: false, code: 1, results: [] }

All you have to do is setup a base standard Store, adding a listener to the exception event:

MyStore = Ext.extend(Ext.data.Store,
{
    reader = new Ext.data.JsonReader(
    {
        root : "results",
        successProperty : "success", // default
        fields : [ "field1", "field2", ... ]
    },
    listeners : {
        "exception" : {
            fn : function(proxy, type, action, options, response, arg)
            {
                // just a spike, needs a structured design for all cases...
                if (type == "remote" && response.code == 1)
                {
                    window.location = "sessionExpiredResource";
                }
            }
        }
    }
});

The listener is called if an error occurred during a remote request, being a low level server error (the type parameter is set to response) or an application error (successProperty === false and type parameter set to remote). In this latter case the response parameter contains the decoded response object sent from the server, so you can access and test the code flag indicating the type of application error occurred. The same must be done for all forms in the application, maybe customizing the options object passed to the forms’ submit method or extending the base FormPanel component.

Mais um exemplo usando ExtJS 3.0, agora mesclado com Javascript “normal”.
A função recebe um id de elemento (panel, form, grid, etc) criado com extjs e posiciona ele no meio da tela.

Pode ser adaptada facilmente para receber o próprio objeto em vez da id.

//Função que centraliza na tela um Panel, Form, Grid, etc contruído com ExtJS independente do tamanho do objeto e da resolução da tela. O parâmetro id recebe o id do elemento.
function centerOnScreen(id){
var elx = Ext.get(id);//pega o elemento ext
var fw = elx.getWidth();//pega a largura do elemento
var fh = elx.getHeight();//pega a altura do elemento
var sw = screen.width;//pega a largura da tela
var sh = screen.height;//pega a altura da tela
var pt = (sh-fh)/4;//calcula distância do topo
var pl = (sw-fw)/2;//calcula distância do lado esquerdo
var el = document.getElementById(id);//pega o elemento DOM
el.style.position = 'absolute';//define como posição absoluta
el.style.top = pt + 'px';//define distãncia do topo
el.style.left = pl + 'px';//define distância da margem esquerda
}


The issue here is to redirect the user to a custom page when the session is expired, using the ExtJs Ajax framework. I’m generally used to redirect to a static html page (through the sendRedirect method of HttpServletResponse interface), but within an ExtJs environment this doesn’t work:

• the component calls a server-side object to obtain or to push some data
• the filter recognizes that session is expired and it sends a 302 status code to the browser
• the browser sends a GET request to the resource obtained through the Location header of the previous response
• the component tries to parse the data received, and it fails since it is not correctly formatted

A quick&dirty solution is to return a different http code using the sendError method instead (I used 400 in my spike, but it’s terrible):

...
if (sessionExpired())
{
    response.sendError(HttpServletResponse.SC_BAD_REQUEST);
}
...

And then intercept the failure through a listener added to the Ext.Ajax singleton (being a singleton used by all remote connections, you can define the listener only once during the application startup):

Ext.Ajax.on("requestexception", function(connection, response, options)
{
    if (sessionExpiredCode == response.status)
    {
        window.location = "sessionExpiredResource";
    }
    else
    {
        // do something, like showing an error box for other cases...
    }
});

It works, but it’s quite ugly, because an application error is handled through low level http codes. I don’t have time to try it, but probably returning a specific JSON result from the session filter would be a better idea.

I’ve been working on a project for a while and now I feel it’s stable enough to go public with it. It’s a javascript based scheduler built upon the lovely ExtJS framework. I’ll be posting updates and implementation details in upcoming posts.

Check out the forum thread or go directly to the webcast.

Project homepage

Feedback or ideas welcome!

Ext est une bibliothèque  Javascript permettant de construire des applications web interactives. C’était au départ une extension à la bibliothèque Javascript YUI de Yahoo , Ext peut maintenant être utilisée avec les bibliothèques Prototype, JQuery ou encore toute seule. Ext apporte un certain nombre de composants visuels d’une grande qualité comme des champs de formulaires avancés, des arbres, des tableaux, menu et barre d’outils, onglets, boites de dialogue.

De grands noms l’utilisent déjà comme Adobe, IBM, Siemens, Sony Online Entertainment, etc…

Même si le développement de RIA par Activ Browser est réalisé également avec d’autres frameworks, le framework ExtJS se montre particulièrement puissant.

logo ExtJS

Sources: http://www.javascriptfr.com/tutoriaux/EXTJS-MINI-TUTO-INTERRACTION-AVEC-BASE-DONNEES_853.aspx
http://blog.jflad.com/post/Presentation-Ext-JS-Encore-un-framework-Javascript

While grid allows us to make one or more columns sortable (through the sortable configuration of Ext.grid.ColumnModel class). However, it just performs client side sorting in ascending or descending order. It does not perform sorting with respect to values in some other column. For example if I want to sort on prices of the articles in the same brand then simple grid sorting does not allow you to achieve that grouping. This is where ExtJS provides you GroupingStore, which enables you to view related items together and view them shorted as well!

The Class Ext.data.GroupingStore is similar to normal store, except that it provides few additional configurations:
groupField — The field name by which to sort the store’s data
groupOnSort — True to sort the data on the grouping field when a grouping operation occurs, false to sort based on the existing sort info

The GroupingStore is often used in conjunction with an Ext.grid.GroupingView to provide the data model for a grouped GridPanel. All you need to do is to define following configuration in GridPanel:
view: new Ext.grid.GroupingView()

Ext.grid.GroupingView is extended from Ext.grid.GridView and it allows you to minimize maximize all the items in a group within the grid panel. On top of this, if you add the usual components like tool bar (with your buttons of choices) and paging bar and check boxes and you have such a rich interface. ExtJS you beauty!

Este artigo tem a intenção de mostrar um formulário feito com ExtJS com as seguintes características:

• Possui um ComboBox que busca seus valores em uma página PHP e possui autocomplete dos valores possíveis.
• Envia os dados por AJAX.
• Apresenta para cada campo, mensagens sobre a validação server-side dos dados enviados.

A motivação em escrever este pequeno artigo está no fato de que eu “penei” para conseguir compor um formulário com essas características, embora seja algo simples.

Por isso, quero compartilhar esse conhecimento adquirido com muitas horas de estudo e pesquisa, para que outros programadores não sofram tanto quanto eu.

A didática deste artigo será a seguinte:

Vou apresentar o código de cada arquivo com comentários sobre cada parte relevante.

Quero também ressaltar que os arquivos PHP contém código apenas para fornecer os dados necessários para este artigo, portanto, tem validade didática também.

O primeiro arquivo é dados_login.php, que nada mais faz do que fornecer uma saída JSON com os valores que irão aparecer no ComboBox.

<?php

$json = ‘{//Este é um array que contém uma string JSON com os valores dos campos id e sistema. No caso são 3 valores.

rows: [

{id: "1", sistema: "Contabilidade"}

,{id: "2", sistema: "Tesouraria"}

,{id: "3", sistema: "Compras"}

]

}’;

echo $json; //Aqui imprimimos a string JSON para o retorno ao Ext.

?>

Em seguida, temos o arquivo do formulário propriamente dito: login.php. Este arquivo contém as inclusões das bibliotecas e CSS do Ext, bem como o código do formulário (preferi colocá-lo dentro do arquivo principal, ao invés de fazer um arquivo separado).

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<title>Formulário de login</title>

<link rel=”stylesheet” href=”ext-3.0.0/resources/css/ext-all.css”/>

<!– GC –>

<!– LIBS –>

<script type=”text/javascript” src=”ext-3.0.0/adapter/ext/ext-base.js”></script>

<!– ENDLIBS –>

<script type=”text/javascript” src=”ext-3.0.0/ext-all.js”></script>

<script type=”text/javascript” src=”crb-config.js”></script>

//Início do nosso script

<script type=”text/javascript”>

Ext.onReady(function(){//Inicia o script assim que todo o documento estiver carregado

//Inicia a exibição de mensagens

Ext.QuickTips.init();

//Configura o local onde as mesnagens serão exibidas

Ext.form.Field.prototype.msgTarget = “under”;

//Inicia a recuperação dos dados sobre os sistemas

var store = new Ext.data.JsonStore({

url: ‘dados_login.php’,//caminho da página que fornecerá os dados para o ComboBox

root: ‘rows’,//Indica qual a “raiz” que contém os dados

fields: ['id', 'sistema'] //Indica os campos dos dados

});

store.load();//Carrega os dados

//Formulário de login

var formLogin = new Ext.FormPanel({

renderTo: ‘container1′//Indica onde o formulário será renderizado

,frame: true//Bordas arredondadas

,title: ‘Entrar no sistema’

,bodyStyle: ‘padding: 20px 20px 20px 20px’

,buttonAlign: ‘right’

,width: 400

,height: 250

,waitMsgTarget: true//Exibe mensagem ao submeter o formulário

,buttons: [//Configuração dos botões do formulário

new Ext.Button({//Botão de limpar o formulário

icon: 'ext-3.0.0/resources/images/default/menu/unchecked.gif'

,iconAlign: 'left'

,text: 'Limpar'

,tooltip: 'Limpar dados digitados'

,type: 'reset'

,handler: function(){

formLogin.getForm().reset();

}

})

,new Ext.Button({//Botão de enviar o formulário

icon: 'ext-3.0.0/resources/images/default/menu/checked.gif'

,iconAlign: 'left'

,text: 'Entrar'

,tooltip: 'Entrar no sistema selecionado'

,type: 'submit'

//Função para envio dos dados

,handler: function(){

formLogin.getForm().submit({

url:'logar.php'//Endereço do arquivo que receberá os dados

,method: 'POST'

,waitMsg:'Por favor, aguarde...'

,success: function(){

Ext.Msg.alert('Status','Login com sucesso');

}

});

}

})

]

,items: [

new Ext.form.ComboBox({//Nosso ComboBox

name: 'sistema'//Nome do campo

,fieldLabel: 'Sistemas'

,mode: 'local'//Indica que o campo será preenchido com os dados ao carregar o formulário.

,displayField: 'sistema'//Indica qual campo será mostrado no ComboBox

,valueField: 'id' //especifica qual o campo que terá seu valor submetido

,hiddenName: 'id' //especifica um nome de campo que será enviado com o valor em valueField

,store: store//Os dados para preencher o ComboBox

,labelSeparator: ':'

,width: 200

,emptyText: 'Selecione ou digite o sistema'

,forceSelection: true //Permite que somente os dados existentes no campo seja utilizados

,typeAhead: true//Preenche o campo com sugestões ao digitar

})

,new Ext.form.TextField({//Campo de texto para usuário

name: 'usuario'

,fieldLabel: 'Usuário'

,width: 200

,emptyText: 'Informe seu nome de usuário'

})

,new Ext.form.TextField({//Campo de texto para senha

name: 'senha'

,fieldLabel: 'Senha'

,width: 200

,inputType: 'password'

})

]

});

//Posiciona o formulário no centro da tela

var container1  = document.getElementById(‘container1′);

container1.style.height = formLogin.height + ‘px’;

container1.style.width = formLogin.width + ‘px’;

var spaceup = (screen.height – container1.style.height.replace(‘px’,”))/4;

var spaceleft = (screen.width – container1.style.width.replace(‘px’,”))/2;

container1.style.marginTop = spaceup + ‘px’;

container1.style.marginLeft = spaceleft + ‘px’;

});

</script>

</head>

<body>

<div></div>

</body>

</html>

Por fim, o arquivo logar.php é que faz a validação dos dados e informa se houve sucesso ou falha, neste caso informando os campos e os erros.

<?php

//Uma pequena configuração dos dados válidos

$u = ‘root’;

$s = ‘123′;

$sis = ‘1′;

$sistema = $_POST['id'];

$usuario = $_POST['usuario'];

$senha = $_POST['senha'];

Verifica se os dados enviados correspondem aos dados válidos, senão, indica o erro

if($usuario != $u){

$errors['usuario'] = ‘usuário não confere’;

$result = false;

}

if($senha != $s){

$errors['senha'] = ’senha não confere’;

$result = false;

}

//Observe que na validação a seguir, o erro deve ser informado com o campo id, o mesmo informado no valor hiddenName, senão, nãos era exibida a mensagem de erro para o ComboBox

if($sistema != $sis){

$errors['id'] = ’sistema não confere’;

$result = false;

}else{

$result = true;

}

if($result){

$o = array(“success”=>true);

}else{

$o = array(’success’=>false,’errors’=>$errors);

}

//Retorno dos dados à página principal

header(“Content-Type: application/json”);

echo json_encode($o);

?>

O funcionamento deste código é o seguinte:

O usuário pode digitar o nome do sistema desejado (verifique o autocomplete do ComboBox) ou selecioná-lo na lista apresentada, informar um nome de usuário e uma senha. Se os dados conferem com os dados válidos, é exibida uma mensagem de sucesso, senão, são exibidas mensagens de erro abaixo dos campos com problemas.

Espero que este pequeno artigo ajude àqueles que desejam trabalhar com ExtJS.

Um especial agradecimento à comunidade brasileira dos utilizadores do ExtJS e ao site Saki’s Ext Examples.