Ext.define versus Ext.create

Ext.define is used to define (or, specify) a class. You may use Ext.define to define a root class or a derived class. When you are defining a derived class, it is possible to override parent class's instance method as well as static method! (see http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Class-cfg-override)

Ext.create is used to instantiate a class.

Ext.create takes the name of the class you've Ext.defined elsewhere, or an anonymous class.

Examples:

1. Ext.create taking an anonymous class as argument:


Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    width: 200,
    html: '<p>World!</p>',
    renderTo: Ext.getBody()
});

2. Ext.create taking the name of a class that has been Ext.defined separately.

Ext.define('My.panel.Panel', {

    title: 'Hello',

    width: 200,

    html: '<p>World!</p>'

});

Ext.create('My.panel.Panel', {

    renderTo: Ext.getBody()

});

Object # Object has no method 'read'

Object #<Object> has no method 'read'


This error occurs usually when ExtJS cannot find a Model class that you are trying to use in a different Model or in a store.

To avoid this error, make sure:
(a) you use fully-qualified Model names wherever you refer to them. E.g., "contacts.model.AddressModel" instead of just "AddressModel".
(b) you have placed the file having the code for the Model class in the app\model folder
(c) you have a "requires" config set up on the respective Model or store object.

Here's an example: ContactModel references AddressModel


 Ext.define(
'contacts.model.ContactModel', {
extend: 'Ext.data.Model',
requires : [
'contacts.model.AddressModel'
],
fields: [
{ name: 'id', type: 'integer' },
{ name: 'name', type: 'string' },
{ name: 'company', type: 'string' },
{ name: 'age', type: 'integer' },
{ name: 'addresses', type: 'array' },
],
hasMany: {model: 'contacts.model.AddressModel', 
                                               name: 'addresses', associationKey:'addresses'}
});

Here's another example: ContactStore uses ContactModel


Ext.define('contacts.store.ContactStore', {
    extend: 'Ext.data.Store',

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            storeId: 'ContactStore',
requires: ['contacts.model.ContactModel'],
model: 'contacts.model.ContactModel',
singleton : true,
            proxy: {
                type: 'ajax',
                url: 'http://localhost/contacts.json',
                reader: {
                    type: 'json',
                    root: 'data'
                }
            }
        }, cfg)]);
    }
});

MVC in ExtJS - Why do we need a Model?

This blog post is based on how I understand now. I'll refine it in future.

Need for View and Controller

The need for View and Controller is relatively easy to understand (than the need for a model) in an ExtJS app. The arguments for separating View and Controller are the same here in ExtJS as well: separation of concerns. By isolating the controller logic from view, it is possible to reuse views, test them easily, etc.

Need for Model

The need for model in ExtJS may be slightly difficult to understand to a beginner.   It is because of the ambiguity surrounding the purpose of two different, yet similar objects - Store and Model, and when to use which object.

According to ExtJS help docs, "The Store class encapsulates a client side cache of Model objects."

It is like a C# datatable object that contains many rows of data. In this analogy, each row of data is a Model instance.

Store is always needed because it is the only way in which data can be stored on the client-side (browser) and be made available for consumption by many views.

Model is a choice. We may choose to create a model or choose not to create one.

If we choose to use a model, then each row of data in a Store is a Model instance and hence we will have access to validation, associations, etc. that are part of the Model.

Now, let us look at when we would need to create a model. But, first let us look at what components make up a Store object and a Model object.

 As you can see, both Model and Store share two properties: Fields and Proxy.

Proxy has two important properties: Reader and Writer. These are useful to fetch the data from the database /webserver and also to save any changes back to the data source.

Since proxy can be defined on Model or a Store, it is possible to do CRUD operations without a Model object!

Store also has fields collection. So, it is possible to databind a view to a Store and we do not need a Model object here as well.

So, it pretty much boils down to two scenarios when we would need a model:
(a) When we want to perform validations on the data before saving
(b) When we have hierarchical data and we want to navigate up and down the hierarchy at run time on the client side

Note: Even if we choose to create a Model, it is not a replacement for a Store. It is just that each row of data in the Store would now be a Model instance.

A What-to-read-first Guide for newbies

I am a newbie myself and I have been having a hard time trying to find the right articles that would introduce me to ExtJS.

So, here are the articles and the order in which they must be read that I think would help the newbies learn ExtJS in a gradual, incremental way.

BTW, this list is always "under construction" and will be changed as I find new articles and as my own understanding changes.


SETTING UP YOUR MACHINE

1. Getting Started
http://www.sencha.com/learn/getting-started-with-ext-js-4
(While you are at it, check out how to set up for IIS here)

2. ExtJS Designer is a great tool for development. Not only does it accelerate development, but it is also a great way to explore ExtJS! So, install this designer first.


LEARNING ABOUT ExtJS

1. ExtJS Essentials
(Very basic but it serves as good intro to concepts and a feel for ExtJS-based development)
http://www.sencha.com/learn/ext-js-essentials

2. Ext Designer for ExtJS 4.0
http://cdn.sencha.io/ext-designer/ext-designer-for-ext-js-4-users-guide.pdf

This is a very well-written guide. It has a lot of introductory material that you'd feel grateful for as well as tutorial-like steps that you can take and learn how to use ExtJS. (For following along with the guide, use the data from this link http://www.sencha.com/forum/showthread.php?112879-cars.json and save it as cars.json)

3. Architecting your app in ExtJS 4.x - part 1
http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/

4. Architecting your app in ExtJS 4.x - part 2
http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2

5. The Data Package -- This article introduces Model, Proxy and Store
http://www.sencha.com/learn/the-data-package/

ExtJS Samples


Check out these samples -- working demos with source code. This is a great way to learn!
Samples & Demos | Ext JS 4 | Products | Sencha

Getting Started w/ ExtJS 4

1.  Create the HTML file

There is possibly only one HTML file per application. This is a deviation from how we design apps in ASP.NET.

In ExtJS, we just have one HTML file and we load and unload different views on the same page.

It is easy to do this using Ext designer. (Download here)

2. Include ext-all-debug.js in your HTML

There are two core Javascript libraries that you must include in your HTML file in order to program using ExtJS. They are: Ext and DomQuery. Both these libraries are part of ext-all-debug.js file (I have commercial evaluation version)

Including this file is your first step.

 <html>
 <head>
   <script type="text/javascript" src="../ext-all-debug.js"></script>
 </head>

Note:

ext-all-debug.js is the non-minified version of ext-all.js which would be shipped along with production code. ext-all-debug.js eases development as it facilitates debugging through the code and making sense of what is happening.

If you are using Ext designer, this is done automatically for you.

Setting up ExtJS 4.0 on IIS 7

I downloaded ExtJS 4.0 (Commercial evaluation version) from http://www.sencha.com/products/extjs/download?page=a

1. Copied to c:\inetpub\wwwroot\ExtJS folder.
(Note: while extracting the zipped files, it would create a ExtJS\ext-js-4.0.7 folder, but i deleted the ext-js-4.0.7 folder after moving all its contents to its parent folder ExtJS. This is just for convenience)

2. Browsed to http://localhost/ExtJS and saw index.html getting rendered without issues. Woo hoo!

While trying to run a sample from (IntroToExt2) from http://www.sencha.com/learn/ext-js-essentials, I got the following error:
Invalid Character
ext-base.js
Line: 1
Code: 0
Char: 1

Not sure exactly why this error occurred. Googling for answers, I found this link: http://www.rahulsingla.com/blog/2011/04/extjs-4-running-docs-over-iis-in-windows. Following the instructions there, I added .json MIME type to IIS and that solved the issue!