Learn Yui.ext the seventh Day-view&jsonview part two-a studio website case _yui. Ext Related

The Veiw and Jsonview were briefly introduced before Part 1. Today's little brother for you to talk about the application of the case, originally Jack's Image Chooser is a very good case, including a large number of Chine, but because of this, too esoteric, I also can not grasp the whole, only pick its "big stem deep" place, and June to encourage!
This article contains four knowledge points: 1. add tabs;2 to Layoutdialog. The way the view is used; 3. The use of Jsonview; 4. Get Xml/json fields value and paging

Demo Address

"Thedefinition of view "
A View is generally used to build a quick template-based display of datamodel, rather than the building A more complex g Rid. I Thnk there ' s a blog post that illustrates 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 show the Datamodel data, as part 1 has already said. Here is a supplement from Fourm.

Code Reviews:

1. First look at a simple

	
Use Yui.ext to do flip button, super easy (art 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);

Left animation effect, createdelegate () is responsible for rotation effect
var luo=getel ("Left_pic");
Luo.move (' right ', +, True,. 1, function () {
  luo.dom.src= ' images/' +who+ ". gif";
  Luo.move (' left ', +, true,., null, YAHOO.util.Easing.easeOutStrong);
CreateDelegate (this));

2. Join tabs in Layoutdialog

Layoutdialong is divided into two areas: West & Center. And center, we're going to join tabs and attach an active event

var center = layout.getregion (' center '); 
var tab1 = new YAHOO.ext.ContentPanel (' Luo ', {title: ' Luo teacher Works '}); 
Center.add (TAB1); Center.add (New YAHOO.ext.ContentPanel (' Chen ', {title: ' Mr. Chen's Works '});
Center.on (' panelactivated ', function () {//alert (Center.titletextel);//}, this, true);    
Center.showpanel (' center ');
/*two ways to activate the Tabs.and tabs= many CPs if in Basicdialog, only dialog itself is required to obtain gettabs, because dialog itself is the only one region; But in Layoutdialog, region is more than one, all to indicate which one of the region.
Stoe a refeence to the tabs gets tabs set var tabs = layout.getregion (' center '). Gettabs ()//Join Event Tabs.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 '); With region activation can also be/*tips: Can not activate the event immediately, will point delay, after the delay of multiple lines of code OK! In theory, Addbufferlistener can also be * * layout.getregion (' center '). Gettabs (). Activate (' center ');

How to use 3.View

Xml:index access to fields; JSON: Directly using field name var TPL = new YAHOO.ext.Template (' <div class= ' thumb ' > ' + ' <div></div> ' + 
' <div> file Size: {1}</div> ' + ' </div> '); Tpl.compile ();
	Compile DOM accelerates the var schema = {tagName: ' row ',//item ID: ' ID ',//id if not required, set a blank string, 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:jsonroot emptytext: ' <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 + ' is clicked. ')
},this, True); Mainview.preparedata = function (data) {//prepare, for custom format//JSON direct property name access, e.g Data.sizestring = formatsize (data.size)
	; DATA[1]= Formatsize (data[1]);
return data;
};	
 Loading the file with Datamodel, if it is Jsonview, the service is provided by the Jsonview itself (Updatemanager) dm.load (' xml.asp?who= ' +who);

How to use 4.JSONView

var dh = YAHOO.ext.DomHelper; 
Dh.append (document.body, {tag: ' div ', id: ' Edituserdialog-user '}); 
Xml:index access to fields; JSON: Directly using 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"); 
Jsonview-specific Exception event
Mainview.on (' loadexception ', function () {onloadexception ()}, this, true);

var onloadexception= function (v,o) {
	 alert (' Error '); 
};

5. Get the fields value and paging of Xml/json

The reason why these two questions are discussed together is that I have not yet achieved them. If you follow Jack's method:

Mainview.on (' click ', function (VW, index, node, e) {
	alert (' node ' + node.id + ' "at index: ' + index + ' is clicked. ') );
});

can get index but node.id can't get it. I had to do it in a more ugly way:

"Hard" output click event in Domhelper

	' <div class= ' thumb ' > ' +
	' <div>	
	' <div> file Size: {1}</div> ' +
	' </div> '
); 

Page pagination:
View pagination should be passed through the Datamodel. But I did not succeed. If you know the reason of a friend, please tell them.
http://www.ajaxjs.com/yuicn/article.asp?id=20070239