Trying to understand what is meant by the term "view"

[Troy Wolf]

This time around, I'm "simply" trying to understand Ext.View. What IS it? What does Ext mean by the term "view"?

I'm trying to derive the meaning from the API documentation along with forum searching, and so far I continue to be unclear on the subject. Take for example, this bit of code from the doc at http://extjs.com/deploy/ext/docs/output/Ext.View.html



var store = new Ext.data.Store(...);

var view = new Ext.View("my-element",
'<div id="{0}">{2} - {1}</div>', // auto create template
{
singleSelect: true,
selectedClass: "ydataview-selected",
store: store
});

// listen for node click?
view.on("click", function(vw, index, node, e){
alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
});

// load XML data
dataModel.load("foobar.xml");


In particular, the 3rd line -- what does that second argument mean? What is this string:

'<div id="{0}">{2} - {1}</div>'

-----------------------------------------------------
A side note -- I have a feeling I'll learn to love the powerful functionality and elegance of Ext and become comfortable developing with it. If and when that happens, a paid support membership is an obvious choice. However, right now, I'm in a chicken & egg scenario. I cannot ask my employer to purchase support until I know if I want to use Ext. But without good support, it's hard to get to the point where I know how to use Ext.


Again, some kind of overview/architectural outline/terminology explanation would be helpful. (See http://extjs.com/forum/archive/index.php/t-9475.html)

[BernardChhun]

A view is well...the visual HTML representation of the datastore in this case I guess!

as for the 3rd line thingy. it's just a simple template. the numbers in between these guys {} are the columns from the DataStore's data object. the data object contains what was sended via a XHR request.

[Troy Wolf]

Thanks, BernardChhun. That helps.

I'm trying to build a vertical list of items like so:

Option Foo
Option Bar
Option Marklar

The items are not data-driven--just a static list of 3 things. I then need the user to be able to drag & drop sort the list. I can see that Ext has all the various functionality I need, but actually implementing this is proving near mission impossible for an Ext noob.

Animal has pointed me in the direction of using a View to implement my task, so I'm trying to understand Views as step 1.

(By the way, I'm a developer with over 12 years experience using a variety of programming languages and styles....yet I'm struggling a lot with grasping Ext web dev--it's a vastly different approach. Perhaps this would be easier if I'd never seen web dev before.)

[Animal]

A View is a view of an Ext.data.Store. As mentioned in the docs, this is a client side cache of Ext.data.Records which most likely represent database rows/persistent objects.

An Ext.data.Record contains named fields.

The HTML template string is telling the View how to display certain fields from a recrord. The field names are in braces:



"<div>{description}<br>Date: {date} User: {user}</div>"


That would display a view containing a 2 line representation of each record showing the fields "description", "date" and "user".

[Troy Wolf]

Excellent help! The curly braces template thing--got it. That is very *nix like. Makes sense and very powerful.

From the docs and examples, I was thinking a View is a window to a data store, as you confirm, Animal. My confusion stems from the fact that I'm looking for a way to create a D&D ordered list of three, simple, static strings.

Red
Green
Blue

The help I've received so far indicates I should use a View to accomplish this goal.....but if a View is for viewing data store records, what does a data store have to do with my 3 items?

I truly hope my confusion is warranted. I'm not one to jump into a forum with posts of "My code is broke--somebody fix it." I truly do search and read the docs, examine the examples, and search the forums before I post. On PHP, database, and basic javascript forums, I'm the one answering all the questions. I'm in unfamiliar and uncomfortable territory. Thanks for the help, all. ~o)

[BernardChhun]

The data store may be filled in various manners using proxies.

since you only have 3 static items, I'd probably use the MemoryProxy. The MemoryProxy receives an array of data as one of its parameters. it will turn them into data records for the data store. It also doesn't need to make a Xml Http Request and you will still have the data store's data structure behind it to play with.

and don't worry Troy, you don't sound like someone that needs someone to fix their code. You're just someone who wants answers and asks the good questions instead of whining loudly :)