What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

29Jun/170

Implicit ViewModel 2-Way Data Bindings

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:
Screen

Read on for a walk through of various scenarios and a Sencha Fiddle...

VN:F [1.9.22_1171]
Rating: 10.0/10 (1 vote cast)
15Dec/110

ASP.NET AJAX & ExtJS 4 Grid (4)

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:

<?xml version="1.0" encoding="utf-8"?>
<matches>
	<match>
		<id>0</id>
		<name>Number 0</name>
		<hiddenAttributes>
			<attr>
				<name>hidden1</name>
				<value>val1</value>
			</attr>
			<attr>
				<name>hidden2</name>
				<value>val2</value>
			</attr>
		</hiddenAttributes>
	</match>
	<match><id>1</id><name>Number 1</name></match>
	...
</matches>
VN:F [1.9.22_1171]
Rating: 6.8/10 (5 votes cast)