Pagelist

Pagelist is a component for presenting different views which can be changed by means of scrolling (horizontal or vertical). By changing size of pagelist area, you can set any number of displayed at the same time views. Ui-related pagelist inherits from list.


Full code of the example in the picture

Initialization

To init the component you need to perform a simple procedure - call initialization code.

Initialization code or an object constructor lets you create an object by using common declaration.

dhx.ui ({view:"pagelist", 
...})

Supported data types

Parameters

In constructor you can specify the following parameters:

  • layout - (x, y) sets the type of scrolling (x - horizontal, y - vertical)
  • panel - (false or obj) the panel showing the total amount of pagelist's items and which one of them is selected.
    You can find it in the picture above: it looks like . If you set the parameter to false (default value) - instead of panel, pagelist will display a scroll bar
    • align - (left, right, top, bottom) specifies the position of the panel
    • size - (integer) specifies the size of the panel (defines panel's width if align is set to left or rigth or panel's height - if align is set to top or bottom)
      The default value - 16 px.

Please note, pagelist is a derived class, i.e. it inherits all the features of the base classes (pagelist → listview).

dhx.ui({
        container:"container",
	rows:[	
		{ height:230,
		  view:"pagelist", 
 		  layout:"x",
                  url:"xml/books.xml", 
                  datatype:"xml",
  		  template:"#name#",
 		  panel: false
	}]
})

Useful tips

  • Pagelist and carausel are similar, but pagelist has more possibilities.
    • In pagelist you can dispaly as much items as you want at the same time, in carausel - just one.
    • As carause inherits from layout, you can specify for it just internal source of data. Pagelist, in its turn, inherits from list and allows to use xml, csv, json or jsarray file as datasource.
  • To set the desired size of pagelist area - use the parameter type, inherited from list.

Related how-tos