In my previous post I presented an example of a basic ASP.NET MVC3 controller connecting to an ExtJS4 data store and passing some data in XML format via store’s load method.
So far I’ve run into just one issue with this setup – clean error handling. By default, ASP.NET MVC will spit out any exceptions in clear text (with <html> tags and everything), which is not very useful when building a quality web application. Here’s what I want on my errors:
In this example I will demonstrate how to use an ExtJS4 store to perform an XML data read from an ASP.NET MVC3 controller. First let me say that I wasted a LOT of time reading fake tutorials on these keywords – seems there are a lot of people who can explain the ASP.NET MVC3 side, but not how to actually connect it to an ExtJS4 store using a clean proxy, AND pass parameters to the server. Especially using XML for the return data.
So, let’s say we just want a basic search box – when user types something in and hits Search, we will use an ExtJS4 store and POST to an ASP.NET MVC3 method, passing the search query as a JSON parameter, while returning results in XML. Here’s the basic ExtJS model & store configuration:
// Basic model Ext.define('MY.model.SearchResult', { extend: 'Ext.data.Model', fields: ['id','html'] }); // Basic store Ext.create('Ext.data.Store',{ model: 'MY.model.SearchResult', proxy: Ext.create('MY.proxy.MSAjaxProxy', { url: '/User/Search', reader: { type: 'xml', root: 'matches', record: 'match' } }) // eo proxy }) // eo store |
Here’s an easy way to break zoom in and out capability in IE7+ in your ExtJS4 application:
There’s a <meta> tag (the ones that go into <head>) that was recommended to me for the sake of reducing IE testing efforts:
<meta http-equiv="X-UA-Compatible" content="IE=8"/> |
The idea here is it forces many IEs to act all in IE8 mode, so you can basically do quick tests in just IE8 and still get a good test coverage. However, it took me some effort to figure out that this breaks re-sizing capability of a Viewport on zoom in IE.
See Previous Example First!
Takeaway from this post: Sencha SDK Tools 1.2.3 are still beta and I don’t advise using them in production. This is a follow up post to my previous examples – I spent some time the other day trying to set up a 1-click build process for ExtJS, and failed!
Custom Build File Size
First, let’s talk about the incorrect file size shown on this screenshot in my previous 2 posts:
In the “Custom Build” example, the custom-built app-all.js is shown as being 120KB in size. In reality, the file is about 400KB in size on the disk. I don’t understand why that is – compression? If that was the case, wouldn’t the 1MB ext-all.js in the “Full Framework” example be something closer to 200KB? After some Googling I couldn’t figure out how to tell if a file was compressed. Any advice here is welcome as I’m a bit lost.
