Countdown to ExtJS 4

On the 16th Feb 2010 Sencha announced the availability of the first Ext JS 4 Developer Preview. Definitely an exciting news for the Ext JS developers, I can see from the comments in Sencha Blog that people cannot wait for the release. This is the biggest overhaul to the framework. For those who worry about migration, the team has taken that into consideration.

Ext JS 4 is completely sandboxed; there is no more native object augmentation or reliance on global variables. This means you can run Ext JS 4 alongside Ext JS 3 on the same page. To demonstrate this we’ve taken the best of both versions and combined them in a single page. We’ve used the Desktop example from Ext JS 3 and loaded Ext JS 4’s brand new charts alongside as if they were part of Desktop itself – check it out for yourself.

The second step is to provide as strong a legacy layer as possible to help you upgrade your Ext JS 3.x applications. We’re starting that today with the release of a detailed overview guide to the differences between the versions, and will update this as we continue our rollout. In addition to the guide we will be providing a legacy file that can be dropped in to an Ext JS 3.x application to help you upgrade your app. We’ll be expanding on both of these in another post very soon. – Sencha Blog

The following articles highlights the key features in Ext JS 4;

Ed Spencer from Sencha presented the introduction to Ext JS 4 and its architecture. You can see the slides below;

Last but not least, the examples and download is available;

Happy hacking!!

Advertisements

7 thoughts on “Countdown to ExtJS 4”

  1. Hi,
    I need a help:( I want to access json data with ExtJs 4 but I can not do this.I can access json with Extjs 3 use Ext.data.JsonStore and I look the document of Ext 4 and I see there is not Ext.data.JsonStore ….HOW I ACCESS JSON DATA WITH EXTJS 4(?)

    Please HELP….
    Thanks…..

  2. Hi,
    Firstly, Thank you so much..I examine your examples but I can not do it on my project..They are not the same thing I want to do.I can access Jsonwebservice with ExtJs 4 and I want to access json on my local.I want to attach ExtJs4 and .Net Web service.Web service send json data and I access json data with ExtJs4 at local.there is a project in this link : http://www.codeproject.com/KB/webservices/ExtJS__WebServices.aspx
    there are the project access json data with ExtJs 3 on the local but I cannot convert it ExtJs4 …Can you help me to write like that project??
    Thanks a lot..
    Thanks again and again,,,,

  3. at the below ,the code of the accessing json with ExtJs 3 ,,, I can not convert it ExtJs 4.This project you can download the link that I give the previous link…This code Ext.data.JsonStore is used but There is not Ext.data.JsonStore in the ExtJs 4 ..How I write this code with ExtJS 4????

    ExtJS in-domain AJAX call to ASP.NET WebService

    // Show path for ExtJS resources
    Ext.BLANK_IMAGE_URL = “js/ext/resources/images/default/s.gif”;
    // Attach to onDOMReady event
    Ext.onReady(onReady);

    function onReady() {

    // Create store
    var store = new Ext.data.JsonStore({
    autoLoad: true,
    proxy: new Ext.data.HttpProxy({
    url: ‘Service.asmx/GetPeople’, // ASP.NET WebService call in GET format
    headers: {
    ‘Content-type’: ‘application/json’ // IMPORTANT! Without this FireFox will not understand WebService response
    }
    }),
    root: ‘d’, // Root Json element, always ‘d’
    id: ‘Id’, // Identifier column, ExtJS needs it to recognize rows
    fields: [‘Id’, ‘FirstName’, ‘LastName’] // Simple definition of columns
    });

    // Create grid to display data from store
    var grid = new Ext.grid.GridPanel({
    store: store, // Our store
    columns: [ // Grid columns
    { dataIndex: ‘Id’, header: ‘Id’},
    { dataIndex: ‘FirstName’, header: ‘First Name’ },
    { dataIndex: ‘LastName’, header: ‘Last Name’ }
    ],
    renderTo: ‘panel’, // Render to HTML element with id==’panel’
    width: 300,
    height: 300
    });
    }

    Could You see grid?

    1. hi, i converted the sample. work on my local, please try.
      use “ext-all-debug.js” instead of “ext-debug.js” as it contains the full classes. ext-debug.js contains minimal set of core classes and if u use that u must load the classes manually.

      <script type=”text/javascript” src=”js/ext-4.0.2/ext-all-debug.js”></script>
      <link rel=”stylesheet” href=”js/ext-4.0.2/resources/css/ext-all.css”/>

      Ext.onReady(function () {
      Ext.define('People', {
      extend: 'Ext.data.Model',
      fields: ['Id', 'FirstName', 'LastName', 'BirthDate']
      });

      // Create store
      var store = Ext.create('Ext.data.Store', {
      id: 'store',
      model: 'People',
      proxy: {
      type: 'ajax',
      url: 'Service.asmx/GetPeople',
      headers: {
      'Content-type': 'application/json' // IMPORTANT! Without this FireFox will not understand WebService response
      },
      reader: { root: 'd', type: 'json' }
      },
      autoLoad: true
      });
      // Create grid to display data from store
      var grid = Ext.create('Ext.grid.Panel', {
      store: store, // Our store
      columns: [ // Grid columns
      {dataIndex: 'Id', header: 'Id' },
      { dataIndex: 'FirstName', header: 'First Name' },
      { dataIndex: 'LastName', header: 'Last Name' },
      { dataIndex: 'BirthDate', header: 'Birth Date' }
      ],
      renderTo: 'panel', // Render to HTML element with id=='panel'
      width: 422,
      height: 300
      });
      });

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s