Learn YUI. Ext 7-View & amp; JSONView Part Two-a studio website Case Study

Veiw and JSONView are briefly introduced in Part 1. Today, the younger brother will talk about the application cases. Jack's Image Chooser is a very good case, which contains a lot of tricks and tricks of Jack, but it is too esoteric because of this, I can't thoroughly understand it either. I just picked out the "big master" and shared it with you!
This article contains four knowledge points: 1. Add Tabs to LayoutDialog; 2. View usage; 3. JSONView usage; 4. Get XML/JSON fields values and pagination

Demo address

【View Definition]
A View is generally used to build a quick template-based display of datamodel, rather than building a more complex grid. I thnk there's a blog post that includes strates doing this with JSON data. templates can be used for any repetitious html creation, not necessarily tied to a datamodel.
The main meaning is that View is used to display the data of DataModel. Part 1 has already said. Here is a supplement from fourm.

Code comment:

1. First look at a simple

// Use yui. ext as the flip button and super easy (artist's favorite !? ^) ShowBtn = getEl ('showintro'); showBtn. on ('click', this. showDialog, this, true); showBtn. applyStyles ("cursor: pointer"); showBtn. on ('mouseover', function () {showBtn. dom. src = 'images/over_10.gif '}, this, true); showBtn. on ('mouseout', function () {showBtn. dom. src = 'images/btn_10.gif '}, this, true );

// Animation effect on the left, createDelegate () is responsible for rotating the effect var luo = getEl ("left_pic"); luo. move ('Right ', 250, true ,. 1, function () {luo. dom. src = 'images/'+ who + ". gif "; luo. move ('left ', 250, true ,. 15, null, YAHOO. util. easing. easeOutStrong );}. createDelegate (this ));

2. Add Tabs to LayoutDialog

LayoutDialong has two areas: west & center. In the center, we need to add tabs and add active events one by one.

Var center = layout. getRegion ('center'); var tab1 = new YAHOO. ext. contentPanel ('luo', {title: 'instructor luo '}); center. add (tab1); center. add (new YAHOO. ext. contentPanel ('chen ', {title: 'Mr chen '}));
// Center. on ('panelactivated ', function () {// alert (center. titleTextEl); //}, this, true); // center. showPanel ('center');/* two ways to activate the tabs. and tabs = CPs if you are in the BasicDialog, you only need the dialog itself to get getTabs, because the Dialog itself is the only Region, but in the LayoutDialog, there are multiple Region, only the Region that needs to be specified */
// Stoe a refeence to the tabs to obtain the TABS set var tabs = layout. getRegion ('center '). getTabs (); // Add the event tabs one by one. getTab ('center '). on ('activate', function () {this. show_thumb ('student ')}, this, true); tabs. getTab ('luo '). on ('activate', function () {this. show_thumb ('luo')}, this, true); tabs. getTab ('chen '). on ('activate', function () {this. show_thumb ('chen')}, this, true); // center. showPanel ('chen'); // use Region to activate it./* Tips: cannot be set. That is, the activation event will be delayed. After multiple lines of code, the delay will be OK! In theory, you can also use addbufferlistener */layout. getRegion ('center'). getTabs (). activate ('center ');

3. View usage

// XML: index-based field access; JSON: directly use the field name var tpl = new YAHOO. ext. template ('<div class = "thumb">' + '<div>  </div>' + '<div> file size: {1} </div> '+' </div> '); tpl. compile (); // "compile DOM" to accelerate var schema = {tagName: 'row', // Item id: 'id', // if not required, set a blank string and cannot be canceled! Fields: ['filename', 'filesize', 'width', 'height'] // read field}; var dm = new YAHOO. ext. grid. XMLDataModel (schema); var mainView = new YAHOO. ext. view ('pic _ '+ who, tpl, dm, {singleSelect: true, // If JSON, you also need to specify a config: jsonRootemptyText:' <div style = "padding: 10px; "> no matching content! </Div> '}); dm. on ('load', function () {}, this, true); mainView. on ('click', function (vw, index, node, e) {// alert ('node "'+ Node [] +'" at index: '+ index +' was clicked. ')}, this, true); mainView. prepareData = function (data) {// prepare, which is used to access property names in custom formats // such as JSON. e. g data. sizeString = formatSize (data. size); data [1] = formatSize (data [1]); return data ;}; // use DataModel to load files. If JSONView is used, this service is provided by JSONView itself (UpdateManag Er) provide dm. load ('xml. asp? Who = '+ who );

4. How to Use JSONView

Var dh = YAHOO. ext. domHelper; dh. append (document. body, {tag: 'div ', id: 'edituserdialog-user'}); // XML: access the field using the index method; JSON: directly use the field name var tpl = new YAHOO. ext. template ('username: {Username} '+ 'birthday: {Birthday}' + 'Member Since: {join_date} '+ 'last Login: {last_login}'); tpl. compile (); var mainView = new YAHOO. ext. jsonView ('pic ', tpl, {singleSelect: true, jsonRoot: 'user', emptyText: 'No images match the specified filter'}); mainView. load ("test. asp "," id = 2 "); // The exception event mainView exclusive to JSONView. on ('loadexception', function () {onLoadException ()}, this, true); var onLoadException = function (v, o) {alert ('error ');};

5. Get the fields value of XML/JSON and pagination

The reason for putting these two questions together is that I still cannot implement them. If you follow jack's method:

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

Index is available, but node. id cannot be obtained. I had to implement it in an ugly way:

// Output the click Event var tpl = new YAHOO. ext. Template (
'<Div class = "thumb">' +
'<Div> 'Src = userfiles/image/lite _ '+ who +'/{0}> </div> '+
'<Div> file size: {1} </div>' +
'</Div>'
);

Paging:
The View page should be indicated by DataModel. But I have never succeeded. If you know the reason, please let me know.
Http://www.ajaxjs.com/yuicn/article.asp? Id = 20070239