Model | What Is ExtJS

I’ve come across a rather interesting… let’s call it “feature” of ExtJS ViewModel and data binding system. Turns out it is possible to establish “implicit” two-way data binds between parent & child view model data (within same component hierarchy) by setting the data of “lower” view model to “undefined”, so long as the view models both define that data property with the same name. Picture the following simple hierarchy:

Parent Panel
- Child Panel

Now imagine that both of the panels define their own ViewModels (implicit or not doesn’t matter) that both define the same two properties, like so:

Parent Panel
- undefinedText: “default Parent text”
- definedText: “default Parent text”
Child Panel
- undefinedText: undefined
- definedText: “default Child text”

This is what the default rendering of these panels would look like:

Read on for a walk through of various scenarios and a Sencha Fiddle…
Continue reading Implicit ViewModel 2-Way Data Bindings

Rating: 6.0/10 (21 votes cast)

Read Previous Example First!

In this example, we’ll improve our ExtJS 4 model to include an “association” that it will read from XML produced by AJAX call to ASP.NET. Most common association is one to many, for example: your Client can place multiple Orders. An ExtJS 4 data store and model can accommodate this.

The new XML data packet will look like this; notice hiddenAttributes:

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;matches&gt;
	&lt;match&gt;
		&lt;id&gt;0&lt;/id&gt;
		&lt;name&gt;Number 0&lt;/name&gt;
		&lt;hiddenAttributes&gt;
			&lt;attr&gt;
				&lt;name&gt;hidden1&lt;/name&gt;
				&lt;value&gt;val1&lt;/value&gt;
			&lt;/attr&gt;
			&lt;attr&gt;
				&lt;name&gt;hidden2&lt;/name&gt;
				&lt;value&gt;val2&lt;/value&gt;
			&lt;/attr&gt;
		&lt;/hiddenAttributes&gt;
	&lt;/match&gt;
	&lt;match&gt;&lt;id&gt;1&lt;/id&gt;&lt;name&gt;Number 1&lt;/name&gt;&lt;/match&gt;
	...
&lt;/matches&gt;

Continue reading ASP.NET AJAX & ExtJS 4 Grid (4)

Rating: 6.8/10 (5 votes cast)