Gird component Part-3: Example RSSFeed Viewer

Original address Article Date: 2006/09/04

The new component Gird contains many classes and inheritance methods. If you are not familiar with object-oriented development, you may be confused about how a variable inherits from a class, and it is difficult to use GIRD. In YAHOO. ext. in the gird package, most classes are designed to be plug-and-play, extensible extended, and customizable mizmized, it can be easily inserted into web programs with the minimum amount of code.

To test and create an example to implement gird, I decided to make a simple RSS Feed Viewer with only one page of RSS seeds. The entire program has written 100 lines of code, and 20 of them are about gird. This example illustrates some typical gird functions, such as Ajax loading, preprocessing, and custom rendering (custom rendering)

A mini Program (iframe) is embedded here)

I will take you to GIRD step by step. What are the key points and what are not supported.

Step 1 create a column model ColumnModel

var myColumns = [  {header: "Title", width: 350, sortable: true},   {header: "Date", width: 125, sortable: true, renderer: formatDate}];var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

GRID obtains the information of a column from the column model. In this example, we call a default column model (DefaultColumnModel), an object that contains all relevant information. The attributes of the object are as follows:

• Header:-Header
• Width:-Width
• Sortable:-True = sortable
• Renderer:-Specify the rendering method. The call function parameter is (value, rowIndex, columnIndex), and the return value is displayed in the cell.
• SortType:-Specify the sorting method. See documentation for five to six conversion methods.

Optional except header and width

Create a DataModel Data Model

Var schema = {tagName: 'item', id: 'Use-Index', fields: ['title', 'pubdate']}; this. dataModel = new YAHOO. ext. grid. XMLDataModel (schema); this. dataModel. addPreprocessor (1, parseDate); // column 1 is a date. Preprocessing this. dataModel. onLoad. subscribe (this. onLoad, this, true); this. dataModel. onLoadException. subscribe (this. showError, this, true); this. dataModel. setDefaultSort (colModel, 1, 'asc ');

DataModel is the data source of GIRD. All DataModels In the YAHOO. ext. grid package have events that notify the UI of content changes. In other words, you can change the data in the model and automatically map the UI.

XMLDataModel is used in this example. XMLDataModel provides a simple way to map the structure between the XML document and gird. All you need to do is write a simple schema to let the model know which columns are available to gird. Schema has the following attributes:

• TagName:-The Model will read all the subnodes under this node (tagName) (the name of the previous node of items );
• Id:-The attribute or child element to match to get the id of the row. if an attribute or child element is not found with the supplied "id" name, the index of the record is used. so if you don't have a specific id attribute, just use something like 'use-Index' which won't be matched and the index will be used.
• Fields:-An array of attribute names or child node tag names to match for the column values. if you have 4 columns in your ColumnModel, you shoshould have 4 items in your fields array. if a name specified in the array isn' t found, an empty string is used.

Then we add a custom preprocessor function (a custom preprocessor ). If you just sort the date, you don't need this function. It's Okay (by default, it will sort it by itself ). The advantage is higher efficiency.Note that,This function must be used before the data becomes a part of the model data. All RSS feeds and XML are actually Strings. If you want JAVASCRIPT analysis, type conversion is required first. We add a Preprocessor to convert it to the JAVASCRIPR type and put it in DataModel.

The following describes the easy-to-understand content of the DataModel event and default sorting.

Step 3: Create a Grid

this.selModel = new YAHOO.ext.grid.SingleSelectionModel();this.selModel.onRowSelect.subscribe(this.showPost, this, true); this.grid = new YAHOO.ext.grid.Grid('feed-grid', this.dataModel, colModel, this.selModel); this.grid.render(); 

First, create a SingleSelectionModel. The reason is that we want to restrict only one constituency to be selected within the same time. If you do not want this restriction, ignore the relevant code. If you do not specify it, gird will automatically create the DefaultSelectionModel.

SelectionModel exposes two events: onRowSelect and onSelectionChange. OnRowSelect is triggered when a row is selected or reversed. Another parameter allows you to pass in to know which row is selected or reversed. OnSelectionChange is triggered when Gird's constituency changes. The main difference between the two is that when more than one row is selected (within the same time), each row of the constituency triggers its own event, and onSelectionChange will only finish the selection after the multi-selection, trigger an event.