Related to YUI extended Gird component Part-1_YUI.Ext

Original address

Article date: 2006/9/26

The new version of GIRD can support remote data. The settings for paging and remote sorting are easy to understand. I will explain some other 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 for this article comes from that example.

New methods and properties

Using LoadableDatatModel object (the parent class of XMLDataModel and JSONDataModel) to implement paging and remote sorting, there are several new methods and properties.
The following variable "dm" refers to an instance of DataModel.

Method

• initPaging(url, pageSize, baseParams) The most important method for realistic paging. Using this method, you can initialize paging once. For information about parameters, see the related properties below. Example fourm.js usage:

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

• loadPage(pageNum, callback, keepExisting)Load a new page. Your callback will be called after the data has been loaded. "keepExisting" determines whether to overwrite the current data or add new data to the existing data. Example fourm.js usage:

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

• isPaged()Returns whether paging is activated;
• getTotalRowCount()Returns the total number of records available (the total number of record) XMLDataModel has a new attribute "totalTag", which is used to get the total number of rows. The total number of rows is returned by the server to the value of the "totalTag" node in the generated XML document. This is a way to let the DataModel know how many records there are. If you want to specify a certain total, you can use getTotalRowCount to override the total when Gird is initialized. forum.js uses the default method:

  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; //或者是你要的数量 }
  		

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

Attributes

• pageSize - Number of records per page. It can be set in the initPaging parameter or directly.
• pageUrl - the URL called, return data. It can be set in the initPaging parameter or directly.

// 调用“/data.php”产生所有分页、排序
dm.pageUrl = '/data.php';
//这种方式也不错
dm.initPaging('/foo.php', 50);

• remoteSort - Type: Boolean True value activates remote sorting. If you use the initPaging() method above, this will automatically be set to TRUE, otherwise it defaults to false.
• baseParams - Type: Object. An object composed of "key, key value name/value" will be included in every paging and sorting request. In the forum I use this to pass the selected forumId to my data script:

// 传入已选择好forumId的值，产生所有分页、排序
dm.baseParams['forumId'] = forumId;

• paramMap - type Object. The model adds paging and sorting requests, and by default passes the following parameters: page, pageSize, sortColumn and sortDir. If you don't want to use these parameter names, you can rename them through the map parameters. For example:

//"page"改名为"pageNum"
myDataModel.paramMap['page'] = 'pageNum';

Group all functions together

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

// 限制选区只是一行
sm = new YAHOO.ext.grid.SingleSelectionModel();
// 监听选区改变
sm.addListener('selectionchange', onSelection);

// 创建我们的column model
cm = 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}
]);
//这个属性设置默认的排序，免得在每个column上设置。
cm.defaultSortable = true;

// 创建数据模型data model。注意"totalTag"条目。它告诉model去寻找该节点下全部的纪录。
dm = new YAHOO.ext.grid.XMLDataModel({
  tagName: 'Topic',
  totalTag: 'TotalCount',
  id: 'id',
  fields: ['title', 'author', 'totalPosts', 'lastPost', 'lastPoster']
});
// 初始化分页
dm.initPaging('topics.php', 20);
//设置我们想转入的附加参数（可作为第三个参数传入到inirPaing）
dm.baseParams = {'forumId': 4};
dm.setDefaultSort(cm, 3, 'DESC');
//当每次新数据加载后，选择GIRD的第一行
dm.addListener('load', sm.selectFirstRow, sm, true);

// 创建grid对象
grid = new YAHOO.ext.grid.Grid('topics-grid', dm, cm, sm);
grid.render();

//分页工具条，下面将会分析
var toolbar = grid.getView().getPageToolbar();
toolbar.addSeparator();
toolbar.addButton({
  className: 'new-topic-button',
  text: "New Topic",
  click: createTopic
});

// 当gird准备好，加载话题的第一项
dm.loadPage(1);

Paging Toolbar

Since paging buttons are more commonly used, I decided to write a simple toolbar component to implement paging. The YAHOO.ext.Toolbar released this time is very simple and provides some methods to implement paging of the toolbar. Button setting is done with CSS. The icon ICON should be a 16X16 standard picture. 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 is as in the above 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;
}

To customize the toolbar with a lot of icons, the best thing is css sprite. The paging icon of the new version of GIRD may use CSS Sprite.

The next step is. .

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

Jack