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. For more information about the two events, see the documentation.

Create our Gird object. The first parameter is passed into the Grid construction function is the rendered container (also known as holder: Carrier, carrier, and Grid owner, which is widely used in MVC ). ContainerRequiredSpecify the height and width. If no absolute/relative positioning is set, GIRD sets "relative ". Parameters 2 and 3 are the objects of Step 1 and Step 2.

Then we start rendering render (). Render the grid to the container on the event. Before render () is called, any effect, such as line-by-line or MouseOver, must be set. Although data and selection are event-driven, once rendered, they cannot be changed. Therefore, this method is called only once. Unfortunately, you cannot render multiple containers of the same grid, that is, the grid instance cannot be reused.

Step 4: load some data

this.dataModel.load('feed.php', {feed: 'http://feeds.feedburner.com/ajaxian'});

This method can be called only after XMLDataModel is created. My suggestion is to call this method after everything is created. In this way, the data has been loaded before the user sees the gird ui.

Load () has three methods. URL (required), parameter (optional), and callback (optional ). The parameter can also be encoded with the encoded string (param1 = one second m2 = two) or an object (in this example ). If it is an object, the key and value will be encoded into URI before sending.

Then we start rendering render (). Render the grid to the container on the event. Before render () is called, any effect, such as line-by-line or MouseOver, must be set. Although data and selection are event-driven, once rendered, they cannot be changed. Therefore, this method is called only once. Unfortunately, you cannot render multiple containers of the same grid, that is, the grid instance cannot be reused.

If you already have XML documents, you can directly load them without AJAX. The load method can be called multiple times to replace or append the GRID data. In view. js code, you can see the load () call when the user sumbit submits the feed form.

The number of lines of code loaded by creating a GRID and AJAX is no more than 20, and the lines are straight and straight. Although this is not enough to take full advantage of GIRD, I hope this small example can help you get started. Don't be hard on you by these classes. Most of these classes are used internally, or you need to customize GIRD or expand GIRD without having to repair the core.

Full feed-viewer.js download here. CSS here to view the HTML source, right-click on IFRAME, there should be the option of "View Source Code.