Learn Yui. Ext's seventh day-view & jsonview Part Two-a studio website case

Veiw and jsonview are briefly introduced in Part 1. Today, the younger brother will talk about the application case for you. The original Jack's image
Chooser is a very good case. It contains Jack's great tricks and tricks. However, because of this, it is too esoteric, And I can't thoroughly understand it, just pick out its "big stem, share with Jun
Success!
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

[View definition]
A view is generally used to build a quick template-based display
Datamodel, rather than building a more complex grid. I thnk there's
Blog Post that uses strates doing this with JSON data. templates can be
Used for any repetitious HTML creation, not necessarily tied to
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" mce_src = "images/over_10.gif"}, this, true );
Showbtn. On ('mouseout', function () {showbtn. Dom. src = "images/btn_10.gif" mce_src = "images/btn_10.gif"}, this, true );

 

// Animation effect on the left. createdelegate () is used to rotate the animation effect.
VaR Luo = getel ("left_pic ");
Luo. Move ('right', 250, true,. 1, function (){
Luo. Dom. src = "images/" mce_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 Chan '}));

// Center. On ('panelactivated ', function (){
// Alert (center. titletextel );
//}, This, true );
// Center. showpanel ('center ');
/* Two ways to activate the tabs. And tabs = Limit CPS
In basicdialog, you only need the dialog itself to get gettabs, because the dialog itself is
The only region;
However, in layoutdialog, there are multiple region, so you only need to specify the region.
*/

// Stoe A refeence to the tabs to obtain the tabs set
VaR tabs = layout. getregion ('center'). gettabs (); // Add events one by one
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'); // You can activate it with region.
/* Tips: The event cannot be activated immediately. latency is triggered. After multiple lines of code, the latency is OK! Theoretically, you can use addbufferlistener */
Layout. getregion ('center'). gettabs (). Activate ('center ');
3. View usage

// XML: index-based field access; JSON: directly using the field name
VaR TPL = new Yahoo. Ext. template (
'<Div class = "Thumb">' +
'<Div> 'Src = userfiles/image/lite _ '+ who +'/{0}> </div> '+
'<Div> file size: {1} </div>' +
'</Div>'
);
TPL. Compile (); // "compile dom" Acceleration
VaR schema = {
Tagname: 'row', // item
ID: 'id', // if you do not need the ID, you can set a blank string and cannot cancel it!
Fields: ['filename', 'filesize', 'width', 'height'] // read Fields
};
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 + 'was clicked .')
}, This, true );
Mainview. preparedata = function (data ){
// Prepare for custom format
// For example, direct attribute name access in JSON mode, e. g Data. sizestring = formatsize (data. size );
Data [1] = formatsize (data [1]);
Return data;
};
// Use datamodel to load the file. For jsonview, this service is provided by jsonview itself (updatemanager ).
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: index-based field access; 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 exception event
Mainview. 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 hard in domhelper
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.

This article from: http://www.ajaxjs.com/yuicn/article.asp? Id = 20070239

Translator name: Frank
Translator's blog: http://www.ajaxjs.com/blog/