Part-1_YUI.Ext related to Gird components of YUI extensions

Original address of Part-1, Gird component extended by YUI

Article Date: 2006/9/26

The new GIRD supports remote data. Paging and remote sorting settings are easy to understand. I will describe some commonly used custom parameters in this post. The new forum interface (under construction) is a good example of paging and remote sorting, and the code in this article comes from that example.

New methods and attributes

The LoadableDatatModel object (parent class of XMLDataModel and JSONDataModel) is used to implement paging and remote sorting. There are several new methods and attributes.
The following variable "dm" refers to the instance of DataModel.

Method

• InitPaging (url, pageSize, baseParams)The most important method of real-world paging. With this method, you can initialize pagination at a time. For more information about parameters, see the following related attributes. The usage of fourm. js is as follows:

  dm.initPaging('topics.php', 20);

• LoadPage (pageNum, callback, keepExisting)Load a new page. Your callback will be called after the data is loaded ." KeepExisting "determines whether to overwrite the current data or add new data to the existing data. The usage of fourm. js is as follows:

  // the grid is ready, load page 1 of topics dm.loadPage(1);

• IsPaged ()Returns whether the page is activated;
• GetTotalRowCount ()The total number of records (the total number of records) XMLDataModel has a new attribute "totalTag" to obtain the total number of rows. The total number of rows is returned by the server to generate the value of the node "totalTag" in the XML document. This is a good way to let DataModel know how many records there are. If you want to specify a specific total number, you can use getTotalRowCount to overwrite the total number of forum. js during Gird initialization. The default method is as follows:

  dm = new YAHOO.ext.grid.XMLDataModel({     tagName: 'Topic',     totalTag: 'TotalCount',     id: 'id',     fields: ['title', 'author', 'totalPosts', 'lastPost', 'lastPoster'] });

  Another method:

  Dm = new YAHOO. ext. grid. XMLDataModel ({tagName: 'topic ', id: 'id', fields: ['title', 'author', 'totalposts', 'lastpost ', 'lastposter']}); dm. getTotalRowCount = function () {return 500; // or the number you want}

• GetPageSize ()Returns the configured page size.
• GetTotalPages ()Use page size and total rows to calculate the number of available pages.

Attribute

• PageSize-number of records per page. You can set it in the initPaging parameter or directly.
• PageUrl-The called URL, which returns data. You can set it in the initPaging parameter or directly.

// Call "/data. php "generates all paging and sorting dm. pageUrl = '/data. php '; // This method is also good for dm. initPaging ('/foo. php ', 50 );

• RemoteSort-type: Boolean True value to activate remote sorting. If you use the initPaging () method, this parameter is automatically set to TRUE. Otherwise, the default value is false.
• BaseParams-type: Object. Objects composed of "key, key value name/value" are included in each page and sorted request. In the forum, I used the forumId passed to my data script:

// Input the value of forumId selected to generate all pages and sort dm. baseParams ['forumid'] = forumId;

• ParamMap-type Object. The model adds paging and sorting requests. By default, the following parameters are used: page, pageSize, sortColumn, and sortDir. If you do not want to use these parameter names, you can use the map parameter name. For example:

// "Page" is renamed "pageNum" myDataModel. paramMap ['page'] = 'pagenum ';

Combine all functions

This is a process of creating a Gird and paging code:

// Only one row of sm = new YAHOO. ext. grid. singleSelectionModel (); // The Listener changes the sm. addListener ('selectionchang', onSelection); // create our column modelcm = new YAHOO. ext. grid. defaultColumnModel ([{header: "Topic", width: 330 },{ header: "Author", width: 100 },{ header: "Posts", width: 40 }, {header: "Last Post", width: 150 },{ header: "Last User", width: 120}]); // This attribute sets the default sorting, avoid setting on each column. Cm. defaultSortable = true; // create a data model. Note the "totalTag" entry. It tells the model to find all records under the node. Dm = new YAHOO. ext. grid. XMLDataModel ({tagName: 'topic ', totalTag: 'totalcount', id: 'id', fields: ['title', 'author', 'totalposts', 'lastpost ', 'lastposter']}); // initialize the page dm. initPaging ('topics. php ', 20); // set the additional parameters (which can be passed to inirPaing as the third parameter. baseParams = {'forumid': 4}; dm. setDefaultSort (cm, 3, 'desc'); // after each new data load, select the first line of the GIRD dm. addListener ('load', sm. selectFirstRow, sm, true); // create the grid Object grid = new YAHOO. ext. grid. grid ('topics-grid', dm, cm, sm); grid. render (); // pagination toolbar. The following section analyzes var toolbar = grid. getView (). getPageToolbar (); toolbar. addSeparator (); toolbar. addButton ({className: 'New-topic-click', text: "new Topic", click: createTopic}); // when gird is ready, load the first dm of the topic. loadPage (1 );

Paging Toolbar

As paging buttons are commonly used, I decided to write a simple toolbar component to implement paging. This release of YAHOO. ext. Toolbar is very simple and provides some methods to implement paging of Toolbar. The button settings are completed by CSS. The ICON must be a standard 16x16 image. If not, the image will be cut. Example of adding a button:

toolbar.addButton({  className: 'my-button',  tooltip: "New Foo",  click: createFoo});

ENABLE/DISABLED icon in CSS:

.my-button{ background-image: url(../images/foo.gif);}.ytb-button-disabled .my-button{ background-image: url(../images/foo-disabled.gif);}

Create an ICON with text (JS writing as shown in the preceding example ):

toolbar.addButton({  className: 'my-button',  text: "New Foo",  click: createFoo});

But CSS writing is a bit complicated:

.ytoolbar .my-button{ background-image: url('images/foo.gif'); background-position: 0px 0px; background-repeat: no-repeat; padding-left:18px; padding-top:1px; width:auto; display:block;}

Css sprite is the best tool bar for customizing a large number of icons. The new GIRD paging icon may adopt CSS Sprite.

The next step is ..

In the next post, I will talk about the drag and drop of grid and the drag and drop between two girds.

Jack