To YUI expansion of the gird component Part-1_yui. Ext Related

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, and some other commonly used custom parameters I will explain in this post. The New Forum's interface (in construction) is a good example of paging and remote sorting, and the code for this article comes from that example.

New Methods and properties

There are several new methods and properties that implement paging and remote sorting using the Loadabledatatmodel object (the parent class of Xmldatamodel and Jsondatamodel).
The following variable "DM" refers to an instance of Datamodel.

Method

• initpaging (URL, pageSize, baseparams) the most important method of paging. With this method, you can initialize the paging over and over again. For information on parameters, see the related properties below. Examples of the use of Fourm.js:

  Dm.initpaging (' topics.php ', 20);

• loadpage (Pagenum, Callback, keepexisting) loads a new page. Your callback (callback) will be invoked after the data has been loaded. "Keepexisting" Determines whether to overwrite the current data or add new data to the existing data. Examples of the use of Fourm.js:

  The grid is ready, load page 1 of topics 
  dm.loadpage (1);

• ispaged () Returns whether the paging is active;
• gettotalrowcount () returns the total number of records available (the number of record) Xmldatamodel has a new property, "Totaltag", that is used to obtain a row count. The total number of rows is returned by the server to the "Totaltag" node in the generated XML document, a method that lets Datamodel know how many records are available. If you want a specific total number, you can use the Gettotalrowcount overlay (override) total at gird initialization forum.js by default:

  DM = new YAHOO.ext.grid.XMLDataModel ({   
    tagName: ' Topic ',   
    totaltag: ' TotalCount ',   
    ID: ' ID ',   
    fields: [' Title ', ' Author ', ' Totalposts ', ' lastpost ', ' Lastposter '] 
  };
  

  Another approach:

  DM = new YAHOO.ext.grid.XMLDataModel ({   
    tagName: ' Topic ',   
  	ID: ' ID ',   
  	fields: [' title ', ' Author ', ' Totalposts ', ' lastpost ', ' Lastposter '] 
   }; 
  Dm.gettotalrowcount = function () {return 500;//or the quantity you want}
  		

• getpagesize () returns the configured page size
• gettotalpages () calculates the number of pages available using page size and total rows.

Property

• PageSize-the number of records per page. Can be set or set directly in the Initpaging parameter.
• Pageurl-the URL of the call, returns the data. Can be set or set directly in the Initpaging parameter.

Call "/data.php" to produce all paging, sorting
dm.pageurl = '/data.php ';
This way is also good
dm.initpaging ('/foo.php ', 50);

• Remotesort-Type: Boolean true to activate remote sorting. If you use the Initpaging () method above, this will automatically be set to True, otherwise the default is False.
• Baseparams-type: Object. An object consisting of "key, key value Name/value", which is included in each paging, sort request. In the forum I used this pass to choose good forumid into my data script:

Pass in the value that has chosen good forumid, produce all paging, sort
dm.baseparams[' forumid ' = ForumID;

• Parammap-Type Object. Model adds paging, sort requests, and defaults to the following parameters: page, PageSize, SortColumn, and Sortdir. If you do not want to use these parameter names, you can rename them through the parameters of the map. For example:

"Page" is renamed "Pagenum"
mydatamodel.parammap[' page '] = ' pagenum ';

Combine all the features together

This is a process for creating gird, and Paging code:

Restricted selection is just one line sm = new YAHOO.ext.grid.SingleSelectionModel ();

Monitor constituency changes Sm.addlistener (' SelectionChange ', onselection); Create our column model cm = new YAHOO.ext.grid.DefaultColumnModel ([{header: "Topic", width:330}, {header: "Author", wid
th:100}, {header: ' Posts ', width:40}, {header: ' Last Post ', width:150}, {header: ' Last User ', width:120}]);
This property sets the default sort to avoid setting on each column.

Cm.defaultsortable = true; Create data model. Note the "Totaltag" entry.
It tells the model to look for all the records under the node. DM = new YAHOO.ext.grid.XMLDataModel ({tagName: ' Topic ', Totaltag: ' TotalCount ', ID: ' ID ', fields: [' title ', ' Auth
Or ', ' totalposts ', ' lastpost ', ' Lastposter ']};
Initialize the paging dm.initpaging (' topics.php ', 20);
Set the additional parameters we want to transfer (which can be passed to inirpaing as a third parameter) Dm.baseparams = {' ForumID ': 4};
Dm.setdefaultsort (cm, 3, ' DESC ');

When each new data is loaded, select the first line of Gird Dm.addlistener (' Load ', Sm.selectfirstrow, SM, true);
Create grid Object Grid = new YAHOO.ext.grid.Grid (' Topics-grid ', DM, CM, SM);

Grid.render (); Pagination toolbar, the following will analyze var toolbar = Grid.getview (). gEtpagetoolbar ();
Toolbar.addseparator ();

Toolbar.addbutton ({className: ' New-topic-button ', Text: "New topic", click:createtopic});
 When the gird is ready, load the topic of the first item dm.loadpage (1);

Paging Tool bar Paging Toolbar

Because the paging buttons are more commonly used, I decided to write a simple sidebar component to implement pagination. This release of the YAHOO.ext.Toolbar is very simple, providing a number of ways to implement the toolbar pagination. The setting of the button is done by CSS. Icons icon should be 16x16 standard picture. If not, the picture will be cut. Example of adding a button:

Toolbar.addbutton ({
  className: ' My-button ',
  tooltip: "New Foo",
  Click:createfoo
});

enable/disabled icons 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 script as above example):

Toolbar.addbutton ({
  className: ' My-button ',
  text: "New Foo",
  Click:createfoo
});

But the CSS 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;
}

The best way to customize a bunch of icons is to CSS Sprite. The new Gird page icon may be used in CSS sprite this way.

What to do next is.

Next post I'll talk about the drag-and-drop of the grid and the drag-and-drop between the two gird.

Jack