What Is ExtJS - Part 7

ExtJS 4.2 Plugin Example

I’ve enjoyed the 4.2 ExtJS release since it came out; especially the new theme and grids. I recently wanted to “puff in” a Panel for some eyecandy, but I quickly realized it’s a bit trickier than you might think.

Components don’t have slideOut or fadeIn methods like Elements do.

It’s not a problem in case of “hiding” actions (i.e. slideOut or puff), which you can accomplish by something like component.getEl().slideOut().

However, in the case where you want to “show” a hidden panel (i.e. slideIn), in a case of deferred rendering (i.e. when creating and showing a new panel on the fly), the getEl() doesn’t have a DOM element to show yet, until the panel has been rendered.

The fadeIn method is achieved by showing a panel with CSS opacity 0% and then animating it back to 100%.

I ended up solving this via means of a plugin. Can you think of a more elegant solution?
Continue reading ExtJS 4.2 Plugin Example

Rating: 7.4/10 (19 votes cast)

ASP.NET MVC4 Stripped

I’ve been ramping up on Microsoft’s latest and greatest ASP.NET MVC4 and while I love the technology, I hate the tight integration into Visual Studio. I could not find a single example that did not require a compilation of a DLL by Visual Studio.

I’m used to my Just in Time compiling, so I went hard to work at ripping out the Visual Studio umbilical cord and was able to produce a (what I think is) much cleaner setup. Most of all, it doesn’t require re-compiling every time, so you don’t need Visual Studio!

I should warn that this doesn’t have the “view” or “model” hookups; just the controller – with the default “Values” example. Since I work with ExtJS it’s mainly the Web API enabled by the controller that I’m after.

Download: MVC4Test (Stripped) (~2 MB)

INSTALLATION INSTRUCTIONS
– Install .NET 4.5 (I used MS Web Platform Installer)
– Make sure IIS application pool runs under .NET 4.0
– Make sure .NET 4 is allowed in IIS (CGI Restrictions)
– Install ASP.NET MVC 4 – I did not use MS Web Platform Installer, as it will also want to install a SQLExpress database; instead I used stand-alone installer (http://www.asp.net/mvc/mvc4)

Rating: 7.0/10 (5 votes cast)

ExtJS4+ “IntelliSense” in Eclipse :)

On Tuesday Sencha announced “Complete” and “Complete: Team” bundles, where of particular interest to me was the Eclipse “IntelliSense” Plugin (see Sencha’s excellent video).

I tried it for myself – it’s a pretty standard Eclipse plugin install:

There’s an Eclipse tutorial for how to setup a project; it took me about 5 minutes. I got stuck in a few spots, but figured it out. I plugged in a basic Fieldset extension and look at the depth of auto-complete – it recognizes ExtJS object hierarchy in great depth:

There’s also Eclipse help covering the great range of features. Overall, I was very impressed.

I use Notepad++, but this just might sway me to use Eclipse. Although, the $995 for the cheapest bundle option, is rather stingy. I really wish Sencha would offer this as a stand-alone product.

Rating: 7.4/10 (7 votes cast)

Sencha SDK 2.0.0 Beta 3 :(

Last I worked with Sencha SDK it was still version 1.2.3 beta. I had many difficulties with it and decided it certainly wasn’t ready, even for manual builds of my ASP.NET/ExtJS projects. Well, version 2.0.0 beta 3 has been out for a while now and I decided to give it a try.

The Good

I am now able to reference local .html files in the command line parameters. In last version I was only able to point it to an HTTP URL, which didn’t work for my Windows-authenticated websites.

The Bad

I am unable to reference a local Default.aspx file – I get an error saying “URI incorrect” or something of the sort
When I made a basic .html page with references to my JavaScript code, in a project that uses ExtJS 4.1 auto-loader without issue, all I got were the following vague errors in the console, when trying to build:

ReferenceError: Can't find variable: Ext

  phantomjs://webpage.evaluate():2
  phantomjs://webpage.evaluate():1
  C:\Program Files (x86)\SenchaSDKTools-2.0.0-beta3\compat\scripts\phantomjs-jsb.js:299

The Verdict

Sencha says it’s beta, so I would be very cautious about building any production code base with it. Even if you can get it to build, I’d run a full test pass on the resulting code.

Rating: 7.1/10 (9 votes cast)

ExtJS 4.1 Data Store Sorting

ExtJS 4+ data stores allow you to sort data rather easily through either a “sorters” configuration on the store itself, or through the store “sort” method. Only one problem: all sorting is case-sensitive. Here’s a quick example of how you can customize the sorter to be case-insensitive, in a context of a combo box:

{
	xtype: 'combo',
	fieldLabel: 'Supervisor',
	name: 'manager',
	queryMode: 'remote',
	store: Ext.create('Ext.data.Store', {
		fields: ['displayName', 'distinguishedName'],
		proxy: Ext.create('T4E.proxy.MSAjaxProxy', {
			url: '/User/SearchManager', reader: { type: 'json' }
		}), // eo proxy
		sorters: [{ 
			property: 'displayName'
			, transform: function(val) { 
				return val.toLowerCase(); 
			} 
		}] // eo sorters
	}), // eo store
	displayField: 'displayName',
	valueField: 'distinguishedName',
	forceSelection: true,
	typeAhead: true,
	minChars: 1
}

Rating: 8.4/10 (14 votes cast)