tag:blogger.com,1999:blog-90898979667359605482024-03-13T04:33:08.232-07:00ExtJS FocusCreating MVC apps using ExtJS on IIS - Lessons Learned, Tips, Troubleshooting Help, How-To's, etc.Parthiban Sundaramhttp://www.blogger.com/profile/17201575300449827879noreply@blogger.comBlogger6125tag:blogger.com,1999:blog-9089897966735960548.post-91741088441391684732012-01-19T11:21:00.000-08:002012-01-19T11:24:29.638-08:00Ext.define versus Ext.create<div dir="ltr" style="text-align: left;" trbidi="on">
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 <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Class-cfg-override">http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Class-cfg-override</a>)<br />
<br />
Ext.create is used to instantiate a class.<br />
<br />
Ext.create takes the name of the class you've Ext.defined elsewhere, or an anonymous class.<br />
<br />
<b>Examples:</b><br />
<br />
1. Ext.create taking an anonymous class as argument:<br />
<br />
<br />
Ext.create('Ext.panel.Panel', {<br />
title: 'Hello',<br />
width: 200,<br />
html: '<p>World!</p>',<br />
renderTo: Ext.getBody()<br />
});<br />
<div>
<br /></div>
<div>
<br /></div>
<div>
2. Ext.create taking the name of a class that has been Ext.defined separately.</div>
<div>
<br /></div>
<div>
<div>
<div>
Ext.define('My.panel.Panel', {</div>
<div>
title: 'Hello',</div>
<div>
width: 200,</div>
<div>
html: '<p>World!</p>'</div>
<div>
});</div>
</div>
</div>
<div>
<div>
<br /></div>
<div>
Ext.create('My.panel.Panel', {</div>
<div>
renderTo: Ext.getBody()</div>
<div>
});</div>
</div>
<div>
<br /></div>
<br />
<br />
<br /></div>Parthiban Sundaramhttp://www.blogger.com/profile/17201575300449827879noreply@blogger.com3tag:blogger.com,1999:blog-9089897966735960548.post-43732222728520034392011-12-07T08:35:00.001-08:002011-12-07T08:44:36.171-08:00Object # Object has no method 'read'<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="background-color: white; color: red; font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; line-height: 12px; white-space: pre-wrap;">Object #<Object> has no method 'read'</span><br />
<span class="Apple-style-span" style="background-color: white; color: red; font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; line-height: 12px; white-space: pre-wrap;"><br /></span><br />
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.<br />
<br />
To avoid this error, make sure:<br />
(a) you use fully-qualified Model names wherever you refer to them. E.g., "contacts.model.AddressModel" instead of just "AddressModel".<br />
(b) you have placed the file having the code for the Model class in the app\model folder<br />
(c) you have a "<a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Class-cfg-requires">requires</a>" config set up on the respective Model or store object.<br />
<br />
Here's an example: ContactModel references AddressModel<br />
<br />
<br />
<span class="Apple-style-span" style="background-color: #cccccc;"> Ext.define(</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;">'contacts.model.ContactModel', {</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>extend: 'Ext.data.Model',</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>requires : [</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>'contacts.model.AddressModel'</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>],</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>fields: [</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{ name: 'id', type: 'integer' },</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{ name: 'name', type: 'string' },</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{ name: 'company', type: 'string' },</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{ name: 'age', type: 'integer' },</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{ name: 'addresses', type: 'array' },</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>],<span class="Apple-tab-span" style="white-space: pre;"> </span></span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>hasMany: {model: 'contacts.model.AddressModel', </span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> name: 'addresses', associationKey:'addresses'}</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>});</span><br />
<br />
Here's another example: ContactStore uses ContactModel<br />
<br />
<br />
<span class="Apple-style-span" style="background-color: #cccccc;">Ext.define('contacts.store.ContactStore', {</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> extend: 'Ext.data.Store',</span><br />
<span class="Apple-tab-span" style="background-color: #cccccc; white-space: pre;"> </span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> constructor: function(cfg) {</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> var me = this;</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> cfg = cfg || {};</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> me.callParent([Ext.apply({</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> autoLoad: true,</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> storeId: 'ContactStore',</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>requires: ['contacts.model.ContactModel'],</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>model: 'contacts.model.ContactModel',</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="Apple-tab-span" style="white-space: pre;"> </span>singleton : true,</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> proxy: {</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> type: 'ajax',</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> url: 'http://localhost/contacts.json',</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> reader: {</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> type: 'json',</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> root: 'data'</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> }</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> }</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> }, cfg)]);</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"> }</span><br />
<span class="Apple-style-span" style="background-color: #cccccc;">});</span><br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<br /></div>Parthiban Sundaramhttp://www.blogger.com/profile/17201575300449827879noreply@blogger.com0tag:blogger.com,1999:blog-9089897966735960548.post-29300678776744457932011-12-07T07:30:00.001-08:002011-12-07T08:26:51.291-08:00MVC in ExtJS - Why do we need a Model?<div dir="ltr" style="text-align: left;" trbidi="on">
This blog post is based on how I understand now. I'll refine it in future.<br />
<br />
<b>Need for View and Controller</b><br />
<br />
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.<br />
<br />
<b>Need for Model</b><br />
<br />
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.<br />
<br />
According to ExtJS help docs, "The Store class encapsulates a client side cache of Model objects."<br />
<br />
It is like a C# datatable object that contains many rows of data. In this analogy, each row of data is a Model instance.<br />
<br />
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.<br />
<br />
Model is a choice. We may choose to create a model or choose not to create one.<br />
<br />
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.<br />
<br />
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.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-2ZVmEUX32wk/Tt-PhY9-a-I/AAAAAAAAJqY/kvkRiVSTlQI/s1600/Model.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="190" src="http://4.bp.blogspot.com/-2ZVmEUX32wk/Tt-PhY9-a-I/AAAAAAAAJqY/kvkRiVSTlQI/s400/Model.gif" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
As you can see, both Model and Store share two properties: Fields and Proxy.<br />
<br />
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.<br />
<br />
Since proxy can be defined on Model or a Store, it is possible to do CRUD operations without a Model object!<br />
<br />
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.<br />
<br />
So, it pretty much boils down to two scenarios when we would need a model:<br />
(a) When we want to perform validations on the data before saving<br />
(b) When we have hierarchical data and we want to navigate up and down the hierarchy at run time on the client side<br />
<br />
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.</div>Parthiban Sundaramhttp://www.blogger.com/profile/17201575300449827879noreply@blogger.com0tag:blogger.com,1999:blog-9089897966735960548.post-44158371319164709742011-11-18T08:19:00.001-08:002011-12-07T08:17:23.533-08:00A What-to-read-first Guide for newbies<div dir="ltr" style="text-align: left;" trbidi="on">
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.<br />
<br />
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.<br />
<br />
BTW, this list is always "under construction" and will be changed as I find new articles and as my own understanding changes.<br />
<br />
<br />
<b>SETTING UP YOUR MACHINE</b><br />
<br />
1. Getting Started<br />
<a href="http://www.sencha.com/learn/getting-started-with-ext-js-4">http://www.sencha.com/learn/getting-started-with-ext-js-4</a><br />
(While you are at it, check out how to set up for IIS <a href="http://extjsfocus.blogspot.com/2011/11/setting-up-extjs-40-on-iis-7.html">here</a>)<br />
<br />
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.<br />
<br />
<br />
<b>LEARNING ABOUT ExtJS</b><br />
<br />
1. ExtJS Essentials<br />
(Very basic but it serves as good intro to concepts and a feel for ExtJS-based development)<br />
<a href="http://www.sencha.com/learn/ext-js-essentials">http://www.sencha.com/learn/ext-js-essentials</a><br />
<br />
2. Ext Designer for ExtJS 4.0<br />
<a href="http://cdn.sencha.io/ext-designer/ext-designer-for-ext-js-4-users-guide.pdf">http://cdn.sencha.io/ext-designer/ext-designer-for-ext-js-4-users-guide.pdf</a><br />
<br />
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 <a href="http://www.sencha.com/forum/showthread.php?112879-cars.json">http://www.sencha.com/forum/showthread.php?112879-cars.json</a> and save it as cars.json)<br />
<br />
3. Architecting your app in ExtJS 4.x - part 1<br />
<a href="http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/">http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/</a><br />
<br />
4. Architecting your app in ExtJS 4.x - part 2<br />
<a href="http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2">http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2</a><br />
<br />
5. The Data Package -- This article introduces Model, Proxy and Store<br />
<a href="http://www.sencha.com/learn/the-data-package/">http://www.sencha.com/learn/the-data-package/</a><br />
<br />
<b>ExtJS Samples</b><br />
<b><br /></b><br />
Check out these samples -- working demos with source code. This is a great way to learn!<br />
<a href="http://www.sencha.com/products/extjs/examples/#sample-2">Samples & Demos | Ext JS 4 | Products | Sencha</a><br />
<br />
<br /></div>Parthiban Sundaramhttp://www.blogger.com/profile/17201575300449827879noreply@blogger.com0tag:blogger.com,1999:blog-9089897966735960548.post-15680045437474406762011-11-16T08:22:00.001-08:002011-12-07T08:23:00.607-08:00Getting Started w/ ExtJS 4<div dir="ltr" style="text-align: left;" trbidi="on">
1. Create the HTML file<br />
<br />
There is possibly only one HTML file per application. This is a deviation from how we design apps in ASP.NET.<br />
<br />
In ExtJS, we just have one HTML file and we load and unload different views on the same page.<br />
<br />
It is easy to do this using Ext designer. (Download <a href="http://www.sencha.com/products/designer/download/?ls=Google-AdWords&ss=ExtJS-Brand&gclid=CIye45iv8KwCFQ5T7Aod12SnLg">here</a>)<br />
<br />
2. Include ext-all-debug.js in your HTML<br />
<br />
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)<br />
<br />
Including this file is your first step.<br />
<br />
<blockquote class="tr_bq">
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <html><br /> <head> <br /> <script type="text/javascript" src="../ext-all-debug.js"></script> <br /> </head></span></blockquote>
<div>
<br /></div>
Note:<br />
<br />
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.<br />
<br />
If you are using Ext designer, this is done automatically for you.<br />
<br />
<br /></div>Parthiban Sundaramhttp://www.blogger.com/profile/17201575300449827879noreply@blogger.com0tag:blogger.com,1999:blog-9089897966735960548.post-9727002904445747832011-11-15T05:48:00.000-08:002011-11-16T05:57:52.140-08:00Setting up ExtJS 4.0 on IIS 7<div dir="ltr" style="text-align: left;" trbidi="on">
I downloaded ExtJS 4.0 (Commercial evaluation version) from <a href="http://www.sencha.com/products/extjs/download?page=a">http://www.sencha.com/products/extjs/download?page=a</a><br />
<br />
1. Copied to c:\inetpub\wwwroot\ExtJS folder.<br />
(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)<br />
<br />
2. Browsed to http://localhost/ExtJS and saw index.html getting rendered without issues. Woo hoo!<br />
<br />
While trying to run a sample from (IntroToExt2) from <a href="http://www.sencha.com/learn/ext-js-essentials">http://www.sencha.com/learn/ext-js-essentials</a>, I got the following error:<br />
Invalid Character<br />
ext-base.js<br />
Line: 1<br />
Code: 0<br />
Char: 1<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="http://4.bp.blogspot.com/-ZoE229_pOGQ/TsPAvm7AnVI/AAAAAAAAJoQ/WhErGlrsLuM/s1600/ext-base+js+error.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="214" src="http://4.bp.blogspot.com/-ZoE229_pOGQ/TsPAvm7AnVI/AAAAAAAAJoQ/WhErGlrsLuM/s320/ext-base+js+error.gif" width="320" /></a></div>
<br />
<br />
Not sure exactly why this error occurred. Googling for answers, I found this link: <a href="http://www.rahulsingla.com/blog/2011/04/extjs-4-running-docs-over-iis-in-windows">http://www.rahulsingla.com/blog/2011/04/extjs-4-running-docs-over-iis-in-windows</a>. Following the instructions there, I added .json MIME type to IIS and that solved the issue!<br />
<br />
<br /></div>Parthiban Sundaramhttp://www.blogger.com/profile/17201575300449827879noreply@blogger.com0