Day 7 of Study-View&JSONView Part Two-A Cases of a Studio Website

Previously, Veiw and JSONView were briefly introduced in Part 1. Today, I will tell you about the application cases. Originally, Jack's Image Chooser was a very good case, which contained a lot of Jack's skills. However, because of this, it is too profound, I cannot fully understand it. I only choose the "large erectile stem deep" points and encourage you!
This article contains four major knowledge points: 1.Add Tabs to LayoutDialog; usage method; usage method; 4. Get XML/JSON field values ​​and pagination

Demo address

【Definition of View】
  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 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 display the data of DataModel, Part 1 has already said. Here is a supplement from fourm.

Code comments:

1. Let's take a look at a simple paragraph

	
//Use it as a flip button, super easy (artist favorite!?^^)showBtn = getEl('showIntro');
('click', , this, true);
("cursor:pointer");
('mouseover', function(){='images/over_10.gif'}, this, true);
('mouseout', function(){='images/btn_10.gif'}, this, true);

//The animation effect on the left, createDelegate() is responsible for the rotation effectvar luo=getEl("left_pic");
('right', 250, true, .1, function(){
  ='images/'+who+".gif";
  ('left', 250, true, .15, null, );
}.createDelegate(this));

2. Add Tabs to LayoutDialog

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

			
var center = ('center'); 
var tab1 = new ('luo', {title: 'Teacher Luo'}); 
(tab1); 
(new ('chen', {title: 'Teacher Chen'})); 


//('panelactivated',function(){
// alert();
//}, this, true);
//('center');    
/*two ways to activate the tabs= many CPs
 If in BasicDialog, you only need the dialog itself to get the getTabs, because Dialog itself is
 The only Region;
 But in LayoutDialog, there are multiple Regions, and all of them need to specify which Region is enough
 */


 // stoe a reference to the tabs Get the TABS collectionvar tabs = ('center').getTabs();//Add events one by one('center').on('activate', function(){this.show_thumb('student')}, this, true);
('luo').on('activate', function(){this.show_thumb('luo')}, this, true);
('chen').on('activate',function(){this.show_thumb('chen')}, this, true);	
//('chen'); // Activate with Region is also OK/*Tips: The event cannot be activated immediately, it will delay, and it will be OK after multiple lines of code delay!  Using addbufferlistener can also be used in theory*/
('center').getTabs().activate('center'); 

How to use

//XML: index access field; JSON: Directly use field namesvar tpl = new ( 
	'<div class="thumb">'+
	'<div><img onclick=popupDialog("userfiles/image/'+who+'/{0}",{2},{3}) '+
	' src=userfiles/image/lite_'+who+'/{0}></div>' + 
	'<div>File size: {1}</div>'+
	'</div>'
); 
(); // "Compiled DOM" acceleration
var schema = {
	tagName: 'row',//Item item	id: 'id',//If ID is not needed, set a blank string and cannot be cancelled!	fields: ['filename','filesize','width','height']//Read fields};
var dm = new (schema);
var mainView = new ('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>'
}); 
('load',function(){}, this, true); 
('click', function(vw, index, node, e){
	//alert('Node "' + node[] + '" at index: ' + index + ' was clicked.')
},this, true);
 = function(data){
	// prepare, for custom format	//For example, if you access the attribute name directly in JSON mode, = formatSize();	data[1] = formatSize(data[1]);
	return data;
};
//Load the file with DataModel. If it is a JSONView, this service is provided by the JSONView itself (UpdateManager).('?who='+who);	

How to use

var dh = ; 
(, {tag: 'div', id: 'editUserDialog-user'}); 
//XML: index access field; JSON: Directly use field namesvar tpl = new ('

' + '

' + '

' + '

'); (); var mainView = new ('pic', tpl, { singleSelect: true, jsonRoot: 'user', emptyText : '

' }); ("", "id=2"); //Exception events unique to JSONView ('loadexception', function(){onLoadException()}, this, true); var onLoadException= function(v,o){ alert('Error'); };

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

The reason why these two issues are discussed together is that I cannot achieve them yet. If you follow the jack method:

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

The index is available but cannot be obtained. I had to do it in an ugly way:

// "hard" output click event in Domhelpervar tpl = new ( 
	'<div class="thumb">'+
	'<div><img onclick=popupDialog("userfiles/image/'+who+'/{0}",{2},{3}) '+
	' src=userfiles/image/lite_'+who+'/{0}></div>' + 
	'<div>File size: {1}</div>'+
	'</div>'
); 

Pagination:
The view's pagination depends on the DataModel. But I haven't succeeded. If a friend who knows the reason please tell me.
/yuicn/?id=20070239