What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

12Mar/120

ASP.NET MVC3 XML & ExtJS4

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
VN:F [1.9.22_1171]
Rating: 6.9/10 (9 votes cast)
3Mar/122

ExtJS4 Clean Custom Builds (3)

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.

VN:F [1.9.22_1171]
Rating: 10.0/10 (2 votes cast)
12Jan/120

ExtJS4 Clean Custom Builds (2)

See Previous Example first!

In this tutorial we'll make a Windows batch script to automate building of the custom ExtJS4 framework. We'll also touch on declaring dependencies in custom components. Ultimately, this serves for much faster load times and less wasted bandwidth:

VN:F [1.9.22_1171]
Rating: 7.0/10 (3 votes cast)
5Jan/125

ExtJS4 Clean Custom Builds

In this tutorial I will show you how to reduce your ExtJS4 application load times by half, using Sencha SDK Tools. Also, I will show you how to do a clean custom build, the kind that doesn't cause your production code to occasionally download JS files via autoloader. Another gem of this example - we'll get our "compiled" JS down to just about 100 KB, instead of 500 KB+ that results if you follow other tutorials.

VN:F [1.9.22_1171]
Rating: 8.0/10 (7 votes cast)
10Dec/112

ASP.NET AJAX & ExtJS 4 in 2-way JSON (2)

In this example we will use what we learned to build a "MSAjaxProxy" - just like a normal AjaxProxy, except geared towards IIS 6+ running MS AJAX Extensions 1.0. Proxies are used by all ExtJS stores (combos, grids, trees, etc.), so we would be able to do something like this:

{
	xtype: 'combo'
	, displayField: 'attrName'
	, valueField: 'attrID'
	, store:
	{
		fields: ['attrID','attrName']
		, proxy: Ext.create('MyOrg.proxy.MSAjaxProxy', {
			url: 'Default-UMRA.aspx/Test'
			, reader: { type: 'json' }
		}) // eo proxy
	} // eo store
}
VN:F [1.9.22_1171]
Rating: 7.5/10 (8 votes cast)
Page 3 of 41234