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

Source: Internet
Author: User
Tags json

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.