ASP.NET MVC is the new cool kid on the block of Microsoft platforms. I have been using it for a little over half an year and I can say that I like it much more than ASP.NET. Why is that?

1. No more viewstate which adds an additional overhead on your page
2. Clean separation of concerns through the MVC pattern
3. Going back to the basics (standard HTML controls) – most of the ASP.NET server controls do not work with ASP.NET MVC because there is no viewstate and the notion of postbacks

This would be the first of a series of blog posts that I would write about ASP.NET MVC and some performance techniques that could get the most out of it. We will start by building a simple application that uses Ext JS Grid to display employees data that is fetched from the AdventureWorks database. Since jQuery is being shipped with Visual Studio for over a year now I will be using it as well – as an adapter to Ext JS (I am a big fan of jQuery).

I am going to create my app using Visual Stidio 2010 Beta 2 which ships with ASP.NET MVC 2 Beta. If you are using Visual Studio 2008 you have to download the Beta and install it on your machine. First we start by creating a new ASP.NET MVC Project.

New ASP.NET MVC Project

Next I am copying the necessary files that are needed for Ext JS – ext-all.debug.js and ext-jquery-adapter.js to an extjs folder I created under my Scripts folder which was created for me by the ASP.NET MVC project template. I will use the latest version of the library – Ext JS 3.0.3.

In the next step we need to include the css and js files – I will put them in the master page (located under Views/Shared folder):

<link href="../../Content/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../Scripts/extjs/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="../../Scripts/extjs/ext-all-debug.js"></script>

The order in which you include the JavaScript files is important.

Note: Please remember that it is essential to put all your css files in the head section of the page – this improves the loading of your page. All js files that are needed for the page rendering should also be put in the head, otherwise they should be put at the end of your page. I will talk more about this in a future blog post.

For the purpose of this sample application I will use the AdventureWorks database alongside with the Entity Framework for my data model. First we have to add the database into the App_Data folder and then create our data model in the Models folder. The Entity Framework will generate all the necessary entities and a context class and we are ready to write our data access code – I will write my LINQ queries against the database in the controller classes though you will not do this in a real world application. You would use for example the Repository pattern, put your data access logic in a separate assembly, maybe write your own services that will abstract away the business logic and inject them with some Dependency Injection framework, etc.

Entity Framework Data Model

Now that we have everything in place we can write an action method which would return a subset of employees:

[AcceptVerbs(HttpVerbs.Get)]
[ActionName("Employees")]
public JsonResult GetEmployees()
{
   int start = Convert.ToInt32(Request.QueryString["start"]);
   int limit = Convert.ToInt32(Request.QueryString["limit"]);

   using (AdventureWorksEntities dbContext = new AdventureWorksEntities())
   {
      var query = dbContext.Employees
                              .Include("Contact")
                              .OrderBy(emp => emp.EmployeeID);
      var result = (from emp in query
                                  .Skip(start).Take(limit).ToList()
                    select new
                    {
                       ID = emp.EmployeeID,
                       FirstName = emp.Contact.FirstName,
                       LastName = emp.Contact.LastName,
                       BirthDate = emp.BirthDate.ToShortDateString(),
                       HireDate = emp.HireDate.ToShortDateString(),
                       VacationHours = emp.VacationHours,
                       SickLeaveHours = emp.SickLeaveHours,
                       Email = emp.Contact.EmailAddress,
                       Phone = emp.Contact.Phone
                    }).ToList();

      return Json(new { data = result, totalCount = query.Count() }, JsonRequestBehavior.AllowGet);
   }
}

Notice the AcceptVerbs attribute that the method is decorated with – it tells the framework that only GET requests are allowed to call the method through the HttpVerbs enumeration. This was the way to constrain the requests so far but in the new version of ASP.NET MVC there are some new handy attributes that you could use as well – HttpGet, HttpPost, HttpPut and HttpDelete which do the same thing. I am using the ActionName attribute to explicitly add a name for my action method so that I could have a nice URL schema for my actions and use the same name for different CRUD operations (I just need to use different verb for the requests).

In the method itself I create an instance of the database context and based on the parameters received from the grid I do paging with the LINQ extension methods Skip and Take. The interesting part is when the data is returned as a JSON – in ASP.NET MVC 1 the JSON method required a single parameter while now you have to pass an additional parameter of type JsonRequestBehavior. It is introduced for security reasons and you as a developer should explicitly decide whether or not to support GET requests. The problem is that if you return a response in the form of a JSON Array for a GET request it could be easily compromised, so it is suggested to wrap it inside a JSON object or do POSTs instead of that. You could read more about this in Phil Haack’s post.

Next we need to write the JavaScript code that will instantiate our grid and fetch the data from the server:

<script type="text/javascript">
   $(document).ready(function () {
      var store = new Ext.data.Store({
         proxy: new Ext.data.HttpProxy({
            url: 'Home/Employees',
            dataType: 'json',
            method: 'GET'
         }),
         reader: new Ext.data.JsonReader({
            root: 'data',
            totalProperty: 'totalCount'
         }, Ext.data.Record.create([
            { name: 'ID', mapping: 'ID' },
            { name: 'FirstName', mapping: 'FirstName' },
            { name: 'LastName', mapping: 'LastName' },
            { name: 'BirthDate', mapping: 'BirthDate' },
            { name: 'HireDate', mapping: 'HireDate' },
            { name: 'VacationHours', mapping: 'VacationHours' },
            { name: 'SickLeaveHours', mapping: 'SickLeaveHours' },
            { name: 'Email', mapping: 'Email' },
            { name: 'Phone', mapping: 'Phone' }
         ]))
      });

      var grid = new Ext.grid.GridPanel({
         store: store,
         columns: [
            { header: 'ID', dataIndex: 'ID', hidden: true },
            { header: 'First Name', dataIndex: 'FirstName', width: 100 },
            { header: 'Last Name', dataIndex: 'LastName', width: 100 },
            { header: 'Birth Date', dataIndex: 'BirthDate', width: 100 },
            { header: 'Hire Date', dataIndex: 'HireDate', width: 100 },
            { header: 'Vacation Hours', dataIndex: 'VacationHours', width: 100 },
            { header: 'Sick Leave Hours', dataIndex: 'SickLeaveHours', width: 100 },
            { header: 'Email', dataIndex: 'Email', width: 200 },
            { header: 'Phone', dataIndex: 'Phone', width: 200 }
         ],
         renderTo: 'grid',
         width: 1000,
         autoHeight: true,
         bbar: new Ext.PagingToolbar({
            store: store,
            pageSize: 25,
            displayInfo: true,
            displayMsg: 'Displaying employees {0} - {1} of {2}',
            emptyMsg: "No employees to display"
         }),
         pageSize: 20,
         title: 'Employees'
      });

      grid.getStore().load({ params: {
         start: 0,
         limit: 25
      }
   });
});
</script>

When the DOM is ready to be manipulated I create a Store which will make the request to the server and use a JsonReader object which has all the necessary mappings in place to parse the data. Then an instance of the Grid is created with the store that was created in the previous step and columns which are mapped to the parsed JSON result object. That’s all you need to do – create these objects passing some configurations and you are ready to get your data. All the tricky parts of making an XmlHttpRequest, parsing the JSON, creating the HTML for the grid is done for you. Here is how the grid looks like when the application is run:

Ext Js Grid

This is a simple application in which I wanted to show you how to use Ext JS Grid to present data in a nice tabular fashion using ASP.NET MVC and Entity Framework. Here you could download the code for this app (I have not included the AdventureWorks database in order to keep the file size small, but you could download it from here).

In my next blog post I will show you how to write ASP.NET MVC HTML extension methods to include CSS and JavaScript files in your pages and how to instantiate some jQuery UI plugin widgets.

The fiber optics connections to Asia(Seacom and TEAMS) finally arrived in Kenya. Question is, what technologies are used by the websites that receive the highest hits? I decided to do some digging, and here is a quick snapshot of the results based on Alexa:

Clearly, PHP currently rules on the server side, possibly because of its cost implications and the availability of quality CMS with which it easily integrates. I expect to see more of ASP and Ruby based sites as the developer community grows.

Exploitation of available Javascript utilities is limited, with jQuery and Mootools being used to add a few effects for the menus. I would expect more sites to have AJAX to enrich the user experience using such libraries as Ext Js or even Prototype.js.

As far as the duel between Adobe Flex and Microsoft Silverlight is concerned, no front runners have emerged so far.

http://www.extjs.com/forum/showthread.php?t=79132

I’ve recently finished up a series of internal presentations focusing on learning GWT.  We have selected GWT for our UI toolkit and are building our own framework on top of it, using as many mature third party libraries as we can.  We have also already deployed products which use the Google Web Toolkit.

During the presentations one of the most common questions — if not THE most common question — was “Why GWT?”.  I will assume for the moment that it wasn’t just our JavaScript gurus asking the question, although there was a fair amount of that as well.

The Google Web Toolkit provides a wealth of tools and support that will allow us to maintain our user interface code long into the future.  Being able to code our UI in Java — our primary development language — means that our developers don’t need to shift gears to understand complex (or even simple) JavaScript when working on the interface.

Complex user interactions are worth additional scrutiny here: we currently use Ext JS for some of our Ajax-enabled products.  When using Ext JS — and I’d argue this is true of any JS library — it takes some mental effort to shift from server-side Java controllers and models to their JavaScript representations.  While there are tools to aid this, there’s no substitute for sticking with Java code across all application layers, which GWT allows.

Moreover, non-standard javascript will be a non-issue, and we can use existing tools like FindBugs and PMD to check for issues in the GWT code.  Our IDEs have very mature Java support as well.

Years down the road, a new generation of developers here at GT Nexus should be able to pick up the GWT code and use whatever new tools are available to learn our UI code and patterns and make whatever changes need to be made.  It would take more effort and time to decipher and maintain JavaScript code which performs the same function.

There are other reasons to use GWT:  the optimizing compiler, for instance, or even having the weight of Google behind the toolkit.  For me the key to using GWT was the time savings we’ll get by staying with Java from our data access layer through to the user interface.

The RC2 of Ext JS 3.0, unveiled last June, 3 (that was just one day after the 0.7 version of CP2JavaWS, that brought management for automatic asynchronous and buffered remote access for TableView) provides a CRUD mode that is close to CP2JavaWS’s Direct2CP one (presented last July, 14, and completed August, 2 – I wasn’t aware of Ext JS new features at that time).

Using Ext JS we create a Reader object (manages deserializing/JSON to fields mapping), Writer (for serializing/fields to JSON mapping) and Store object (url of remote programs that manage read, create, update and delete). We can see examples here and there (RESTFull store), and simpler examples wihout server backend (Dynamic Form and binding from a local xml file). On the Proxy object we can also specify an index range (autoLoad), that allows buffered access (Buffer Grid).

The Ext JS architecture ensures a good separation and provides advanced customization of rendering and behaviours for master and detail views. However CP2JavaWS provides these specific features :

• only one line of code needed to create a fully working CRUD master/detail view (see here the required code when using Ext JS), automatic asynchronous and buffered access, sorting, form (detail view) controls that depends from their property type (as with Ext JS’s Dynamic Form). We just have to specify the CP business class name. All of the Ext Js features are accessible from a unique component, that allows same level of customization : columns displayed in the table view, custom detail view if needed, custom remote service if needed (instead of the provided generic DAO service).

• provides a generic DAO service that doesn’t require any coding or setting on the server side, works on the object level and manages full database access cycle (through Hibernate) – Ext JS’s RESTful Store demo just simulates a database using session. Then CP2JavaWS’s Direct2CP is probably the most suited for a Java backend (instant work without any coding nor config).

• allows to call directly an existing Java application/business services layer (based on Spring or another container) as it works at object level, and without additional configuration.

• manages complex objects (objects graphs with nested, heterogeneous collections and references) both on client and server side : it then allows to display/edit any nested property, using paths, and the generic detail view creates an editing field for all of these nested objects attributes. Next version of CP2JavaWS will allow to specify (restrict) the editables properties in detail view (as we still can for the table view) – for now we can either edit all the object’s graph properties, or pass a custom detail view (has then to manage controls creation).

• provides management for technical or business (and multiple) key(s), without additional configuration. Hidding of id field(s) depending on the mode and editing step is automatic, as new id affectation.

• manages retreiving of value/label pairs for combo lists and radio buttons groups (through a remote service or local data).

• choose automatically proper control from combo lists and radio buttons.

• completely free (a 329$ license per developper is required for Ext JS).

Moreover CP2JavaWS provides full Digest authentication (Basic only with Ext JS), automatic switch to JSONP if required, and full jsession id tracking per endpoint.

Note : support for in-table editing (instead of using a detail view), still available in Ext JS, will be added soon into Cappuccino’s CPTableView. In fact it is an historical feature of Next/Cocoa’s NSTableView (the proper delegate method is still listed – commented – in CPTableView). In the same way columns reordering is planned.

Ext GWT 2.0 (available since July, 9, and priced the same as Ext JS 3.0) includes the new buffered Grid View, Row Editor, and still allowed (thanks to its generation step) to easily add Java CRUD management on the server side. However we still have to write a lot of code (see the source code of GXT Grid Store Data Binding example – also not faster to load than a CP application) and we are then stick with GWT limitations compared with Cappuccino :

• requires a generations step (not elegant and less smooth development cycle), whose generator isn’t open source,
• generated javascript very hard to deep debug,
• based on the old Swing components model (very limited compared with Cocoa concepts),
• does not allow integrating with Cappuccino (we then lack high level features like evolved graphics engine, undo/redo, drag&drop, advanced and automatic layout management, delegation chain and powerful runtime, etc.).

By using Ext JS 3.0 (pure javascript), integration with Cappuccino is more likely, however it is of very limited interest from the previous statements (and CP2JavaWS’s Direct2CP mode still is built on top of standard/expected Cocoa delegate methods).

EXT Js.

About the people who run the scene behind EXT Js:

Meet the Ext Management Team
Abraham Elias
President and CEO

Abraham Elias is responsible for overseeing Ext’s strategic direction and enabling its rapid growth as a global provider of enterprise-class software and services. Abraham most recently served as Chief Operating Officer at BH Capital Partners. Abraham’s results driven management and introduction of commercial open source solutions enabled BH Capital to become one of the fastest growing privately held companies in Florida. Abraham brings an entrepreneurial spirit and a proven track record of achieving revenue goals and profit growth to our young and rapidly growing company.

Jack Slocum
Chief Software Architect and Founder

Jack Slocum began development on Ext JS in 2006 to provide feature rich open source extensions to a popular JavaScript library. With a strong foundation in software architecture, design patterns and development experience, Jack has guided the development of Ext JS to where it is today – an innovative, low-cost, high performance solution for client-side development.

Aaron Conran
Senior Software Architect and Ext Services Team Leader

Aaron Conran has been involved with Ext JS since the beginning and has an in-depth understanding of Ext JS internals and architecture. He has demonstrated a mastery of the Ext JS library and client-side development practices. He currently leads the client development services team and provides on-site training for enterprise customers.

Tommy Maintz
Senior Software Architect

Tommy Maintz leads the development of Ext Core – a base library for website development. With extensive knowledge of Ext, Tommy pushes the boundaries of what is possible within the web browser. Tommy brings a unique view point and an ambitious philosophy to creating engaging user interfaces. Tommy’s attention to detail drives his desire to make the perfect framework for developers to enjoy.

Darrell Meyer
Senior Software Architect and Ext GWT Co-Founder

Before joining Ext, Darrell Meyer was the creator of the popular open source MyGWT Widget Library for Google Web Toolkit (GWT). Darrell brings his expert Java and GWT knowledge to Ext, where he leads the Ext GWT product team. With 10+ year’s experience building enterprise web applications, Darrell is equally well versed as both a software architect and user interface expert.

For the last couple days I ran into JavaScript errors with toolbars for Ext JS. One of the issues is clearly documented here. I just added hideMode:'offsets' to the toolbar definition and the error went away. The other one, I had to add enableOverflow: false option to the toolbar to avoid hitting Object required error in IE.

http://www.extjs.com/forum/showthread.php?t=70327

When I am using an ExtJS ViewPort, when I resize my window manually by dragging the window handles everything goes out of size so I needed a way to detect the window resize then refreshed the window.

First we need to create a function to refresh the window. That can be done using window.location.reload function. In ExtJS you can look at the Ext.EventManager.onWindowResize to add a listener to the onWindowResize event. Code is below.

function resize(){
window.location.reload
}

Ext.EventManager.onWindowResize(resize);

This might be useful trick to upload and display an image.

Após um longo tempo sem escrever até que enfim saiu um novo
post, embora bem curto mas que pode lhe poupar um bom
tempo de trabalho desnecessário.

Nesta semana quando eu o Mineiro Jakui (risos), estavamos
construindo uma nova tela para uma funcionalidade que envolvia
um Wizard louco com o CardLayout nos deparamos com um erro
que nem tinhamos noção que poderia ocorrer.

Na funcionalidade que estavamos construindo definimos um id com
com o nome de ‘card’ que por coincidencia, e a forma como o componente
CardLayout pode ser chamado pela configuração layout: ‘card’.

Quando definimos o id com este nome, não conseguiamos acessar
o nosso componente através do comando Ext.getCmp(‘id’).

Este comando possibilita recuperar um determinando componente
da tela através do seu id.

Como estavamos colocando o nome resumido de um determinado
componente, ele simplesmente nos retornava ‘undefined’, que a grosso
modo significa que ainda não foi definido o determinado atributo.

Abaixo segue a lista de algumas palavras reservadas:

xtype            Class
————-    ——————
box              Ext.BoxComponent
button           Ext.Button
colorpalette     Ext.ColorPalette
component        Ext.Component
container        Ext.Container
cycle            Ext.CycleButton
dataview         Ext.DataView
datepicker       Ext.DatePicker
editor           Ext.Editor
editorgrid       Ext.grid.EditorGridPanel
grid             Ext.grid.GridPanel
paging           Ext.PagingToolbar
panel            Ext.Panel
progress         Ext.ProgressBar
propertygrid     Ext.grid.PropertyGrid
slider           Ext.Slider
splitbutton      Ext.SplitButton
statusbar        Ext.StatusBar
tabpanel         Ext.TabPanel
treepanel        Ext.tree.TreePanel
viewport         Ext.Viewport
window           Ext.Window

Toolbar components
—————————————
toolbar          Ext.Toolbar
tbbutton         Ext.Toolbar.Button
tbfill           Ext.Toolbar.Fill
tbitem           Ext.Toolbar.Item
tbseparator      Ext.Toolbar.Separator
tbspacer         Ext.Toolbar.Spacer
tbsplit          Ext.Toolbar.SplitButton
tbtext           Ext.Toolbar.TextItem

Form components
—————————————
form             Ext.FormPanel
checkbox         Ext.form.Checkbox
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
label            Ext.form.Label
numberfield      Ext.form.NumberField
radio            Ext.form.Radio
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField
trigger          Ext.form.TriggerField

Essas palavras foram encontradas na documentação extJS.

Abraços e até a próxima

mmusson’s code post in this thread works well for me.

If you want to use  GeoExt widgets BaseLayerContainer and OverlayLayerContainer in the same tree, like this:

GeoExt BaseLayerContainer and OverlayLayerContainer

var layerRoot = new Ext.tree.TreeNode({
text: "All Layers",
expanded: true
});
layerRoot.appendChild(new GeoExt.tree.BaseLayerContainer({
text: "Base Layers",
map: map,
expanded: true
}));
layerRoot.appendChild(new GeoExt.tree.OverlayLayerContainer({
text: "Overlays",
map: map,
expanded: true
}));
var layerTree = new Ext.tree.TreePanel({
title: "Map Layers",
root: layerRoot,
enableDD: true,
collapsible: true,
height: 200,
expanded: true
});

GeoExt is now at 0.5RC1 and it is rather good!

createDelegate is an interesting way to pass a function object with a scope object. This is very useful for using callback functions. For more information, see this screencast.

Pada artikel sebelumnya saya telah membahas hal-hal dasar tentang ExtJs. Untuk artikel kali ini saya akan mencoba membahas tentang pengetahuan dasar Form, pembuatan form dan validasi form.

pada aplikasi web umumnya, Form digunakan untuk input data yang di dalamnya bisa berupa label, textbox, textarea, option button, radio, checkbox, tombol submit dan reset. Dalam extJs komponen-komponen tersebut juga telah disediakan hanya saja dengan nama yang sedikit berbeda dan tentunya tampilan yang lebih aduhai. Disamping itu juga ada komponen tambahan seperti komponen tanggalan misalnya. untuk lebih jelasnya silahkan download di sini >> download pdf

http://extjs.com/learn/Ext_FAQ_Grid

Ext JS Siapa lagi tuh? Keren gak seh? Kalo penasaran ma dia. Coba simak, baca dan praktekan apa yang ada dalam artikel ini. Here We Go..
Ext JS adalah sebuah pustaka atau bisa dikatakan Framework JavaScript lintas browser untuk membangun aplikasi Web berbasis RIA(Rich Internet Aplication), yaitu aplikasi web berbasis GUI atau apliaksi Web layaknya aplikasi Desktop. Ext JS ini mempunyai beberapa fitur seperti:

• Mempunyai performa tinggi dan widget UI yang bisa dapat diatur
• Mempunyai desain menarik, terdokumentasi
• Tersedia versi komersial maupun yang open sourc

Ext JS mendukung web browser berikut:

• Internet Exploler 6+
• Firefox 1.5+(PC, Mac)
• Safari 3+
• Opera 9(PC, Mac)

Memulai Ext JS

Sebelum memulai membuat aplikasi dengan Ext JS ini, ada beberapa hal yang perlu dilakukan.

1. download ext Js di situs resminya www.extjs.com/download. Pada artikel ini penulis menggunakan extJs 2.2.0. anda bisa memilih paket yang dibutuhkan termasuk source code berisi contoh-contoh aplikasi jadi
2. ekstrak file ext Js yang sudah Anda download di sembarang komputer, misalkan di d:\belajar_extjs

Beberapa file yang dibutuhkan

Jika kita ingin membuat aplikasi web menggunakan Ext JS, mau tidak mau kita harus memasukan 3 file berikut pada aplikasi kita:

1. ext-all.css(extjs/resources/css/ext-all.css) adala file stylesheet/css yang mengontrol look and feel dari widget Ext. file ini harus diinkludkan tanpa ada sedikitpun perubahan.
2. ext-base.js(extjs/adapter/ext/ext-base.js) adalah file yang menyediakan core function dari ext js. Dia diibaratkan sebagai mesin dari sebuah mobil. File ini juda dapat kita gunakan jika kita ingin memakai library lain, sperti jQuery atau library lainnya
3. ext-all-debug.js atau ext-all.js(extjs/ext-all-debug.js atau extjs/ext-all.js). semua widget berada dalam file ini

Apliksi pertamaku

Setelah Anda mengetahui beberapa hal dasar, sekarang saatnya Anda mencoba mempraktekan atau tepatnya membuat suatu aplikasi sederhana. Dalam aplikasi pertama ini akan kita coba menampilkan pesan pada saat halaman web diload. Buat file dengan nama index.html. Saya asumsikan library ext js diekstrak di folder extjs

Pada file index.html setelah kita tambahkan tiga file penting, kita juga menambahkan satu file message.js. File inilah yang nanti akan menampilkan pesan.

Message.js

Ext.onReady(function(){
Ext.Msg.alert('Aplikasi Pertama', 'Belajar Ext JS, asyik boo...');
});

Buka browser anda lalu buka file index.html. Hasilnya seperti gambar berikut ini:

Selamat Anda berhasil.
download pdf
Tutorial berikutnya >> Ext Js: Pengenalan Form

Resolvi escrever está dica de como inserir um Checkbox em um Grid,
após passar algumas horas apanhando.

O caminho para obter o resultado esperado foi pesquisar, risos e
bastante. Brincadeira crie os métodos abaixo

function formatImagem(value, cell, rec, rowIndex, colIndex, ds) {
   return ['<img ', 'class="checkbox" ', 'src="./images/',
               value? 'checked.gif' : 'unchecked.gif', '"/>'].join("");
};

function formatBoolean(value, cell, rec, rowIndex, colIndex, ds) {
	  if(value == true)
		  return '<input type="checkbox" name="' + 1 + '" checked disabled/>';
	  else
		  return '<input type="checkbox" name="' + 1 + '" disabled/>';

};

Para a criação de uma Grid utilizei a classe Ext.grid.ColumnModel
do Ext JS, você pode encontrar mais detalhes sobre o assunto aqui.

var cm = new Ext.grid.ColumnModel([
   { header : 'Nome' , dataIndex : 'Nome', sortable : true} ,
   { header : 'Cargo' , dataIndex : 'Cargo', sortable : true } ,
   { header : 'Status' , dataIndex : 'Status 1' , renderer: formatBoolean } ,
   { header : 'Status' , dataIndex : 'Status 2' , renderer: formatImagem }
]);

O que faz a mágica e o atributo chamado renderer que renderiza
um HTML dentro do Grid com isto é possível inserir uma imagem
ou o tão esperado Checkbox.

Mas para futuras pesquisas pretendo descobrir como utilizar o
atributo editor que insere o Checkbox dentro do Grid como um
componente onde poderia facilitar bastante o seu uso.

Visualize o resultado deste tutorial:

Tela utilizando Grid com Checkbox

Mas este será um próximo estudo que terei que fazer, por hora
ficaremos por aqui.

Espero que essa dica possa ser útil, pra alguém e se alguém quiser
completar, seria bem legal.

This thread helped me to use Ext JS XTemplate with optional fields. The only thing I had to figure out was defining my own check exists function, this.exists().

NOTE: This is of “historical” importance because it was the cause of the “early death” of Gwt-Ext. It’s no doubt for the best, because SmartGwt has supplanted it.

So, there is no longer a call to use a thinly-wrapped Javascript library – both SmartGwt and Ext-Gwt (a.k.a. Gxt)  are written in Java and will take full advantage of improvements to the GWT compiler.

In addition, it makes it easier for libraries like SmartGwt and Gxt to track future widget developments and changes such as the new event handling in Gwt 1.6

Sanjiv Jivan’s Blog.

In light of ExtJS going GPL, I’d like to provide an update to GWT-Ext users on the future direction of the project. While many users would like to see GWT-Ext continue to provide an LGPL stack with Ext 2.0.2, a few others felt that GWT-Ext should just go ahead and support the GPL versions of ExtJS.

One of the early adopters of GWT-Ext sent me an email yesterday voicing his concerns saying that since GWT-Ext fully depends on ExtJS, moving to support Ext GPL would be the right thing to do. He goes on to say that “..licensing is a big deal, but to most people who are using the ext product, GPL is not a bad change. The biggest hits will be the big companies that are using it, not the little people. GPL for these bigger companies is perfectly fine.”

I value his opinion and I’m sure some others feel the same way, but I have a different view on this matter. There are two aspects to ExtJS going GPL :

The first is the ethical aspect of a company choosing to change licenses on a dime and the questionable way they got to the point they have. There are several other excellent Javascript libraries like SmartClient that haven’t gained the recognition they deserve and community support only because they were honest and consistent in their licensing model. While its no big deal to many to buy a (currently) reasonably priced commercial Ext license, supporting such a move from LGPL to GPL is an extremely bad precedent to set in the OSS community that has flourished on the basis of trust.

Quick Guide to gplv3 compatibility

Ext homepage shows an example of a grid with expandable rows. However, the data in the expanded rows is loaded together with all the data in the grid. I needed to change this behaviour so the data would be loaded with an AJAX request, only after the row is expanded. So here is what I did:

First, download the RowExpander plugin, which is used in the example. Next, replace the getBodyContent method with:

getBodyContent : function(record, index, body){
  if(!this.enableCaching){
    return this.tpl.apply(record.data);
  }

  var content = this.bodyContent[record.id];
  if(!content){
    var th = this;
    Ext.Ajax.request({
      url: this.url,
      method: "GET",
      params: { id: record.id },
      success: function(res) {
        var result = eval("("+res.responseText+")");
        var content = th.tpl.apply(result);
        th.bodyContent[record.id] = content;
        body.innerHTML = content;
      },
      failure: function(res) {
        content = "Error loading data";
        body.innerHTML = content;
      }
    });
    content = "Loading...";
    this.bodyContent[record.id] = content;
  }
return content;
}

As you can see, the method signature has been changed, so you have to add body to the method invocation in beforeExpand method. Also, the url to the AJAX service has to be smuggled somehow – I just passed it in the RowExpander initialization parameters.

This probably is not the most elegant solution to this issue – but it has one great advantage: it works .

Neste post iremos demonstrar como solucionar um problema que passei quando estava utilizando o componente do Ext JS.

Segue a baixo o código que cria um TabPanel:

var form = new Ext.form.FormPanel( {
	applyTo :Ext.getBody(),
	title :'TabPanel Simples',
	width :500,
	height :300,
	region :'center',

	items : [ {
		id :'tp',
		xtype :'tabpanel',
		activeTab :0,
		width :450,
		height :250,
		bufferResize :500,
		bodyBorder :false,
		items : [ {
			title :'Aba 1',
			// layout :'form',
			items : [ new Ext.form.TextField( {
				id :'tf1',
				name :'uname',
				inputType :'text',
				fieldLabel :'Name',
				width :150
			}) ]
		}, {
			title :'Aba 2',
			// layout :'form',
			items : [ new Ext.form.TextField( {
				id :'tf2',
				name :'uname',
				inputType :'text',
				fieldLabel :'Name',
				width :150
			}) ]
		} ]
	// Inserir Listener aqui
	} ]

});

Este trecho de código produz, uma tela parecida com está:

TabPanel com o conteúdo incorreto

Após descomentar o seguinte trecho de código tudo volta ao normal:

layout:'form',

A resposta para este problema, e que aparentemente o componente
se perde e não consegue adicionar os outros componentes no local
correto.

Após ter descomentado o código, a tela ficará da seguinte maneira:

Outra maneira de resolver este mesmo problema é implementando
um listener, que atualiza o layout em tempo de execução.

, listeners: {
   tabchange: function(tabp,tab){
      tab.doLayout();
   }
}

Espero que está dica sirva pra você caso esteja passando pela
mesma coisa.

Até a próxima.

Berikut ini kita akan belajar membuat Form Sederhana menggunakan Ext JS. Sebelumnya kita harus menyiapkan Framework yang akan digunakan, Ext JS bisa di download di www.extjs.com.

Jika sudah kita akan memulainya.

1. buat file .html untuk tampilannya, dibawah ini saya menggunakan nama formdasar.html. Berikut contoh scriptnya.

Keterangan:

1. Baris ke 5-7 adalah library yang harus disertakan untuk membuat aplikasi menggunakan Ext JS.
2. Baris 9 adalah script dari Ext Js itu sendiri sebagai script pembentuk Form.
3. Baris 14 adalah frame id dimana Form akan ditampilkan

2.  Buat file .js, dimana file ini adalah file pembentuk Form, dibawah ini saya menggunakan file bernama formdasar1.js dan diletakan pada folder yang sama dengan file formdasar.html

Keterangan:

1. Ext.form.Formpanel adalah class yang digunakan untuk membetuk form dengan bentuk panel. Pada bahasan lain kita akan membahas form dengan bentuk fly window
2. Baris 32 ‘tesrender’ adalah id body untuk tempat menampilkan form di browser, dalam hal ini di file formdasar.html baris 14
3. Baris 9 adalah default komponen yang akan dibuat sebagai item, jika kita tidak menuliskan properti “xtype:….”, maka akan secara default membuat textfield/textbox

Hasil akhir jika kita menjalankan file formdasar.html maka akan muncul tampilan seperti berikut.

Selamat mencoba.