<!DOCTYPE html>
<html>
<head>
	<title>Sortable Table using Polymer Web Components</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="../../../webcomponentsjs/webcomponents.min.js"></script>
	<link rel="import" href="../../extjs-ajax.html">
	<link rel="import" href="../json-stringify.html">
	<link rel="import" href="../project-docs.html">
	<link rel="import" href="../../sortable-table.html">
	<link rel="import" href="../my-filters.html">
	<link rel="import" href="column-filters.html">
	<style shim-shadowdom>
		.paramType { color: #526E9C }
		sortable-table::shadow td.column-last,
		sortable-table::shadow td.column-volume,
		sortable-table::shadow td.column-daily,
		sortable-table::shadow td.column-ytd {
			text-align: right;
			padding-right: 5px;
			width: 10%;
		}
	</style>
</head>
<body unresolved is="project-docs">

	<h1>ExtJS AJAX</h1>

	This is a REST API using JSON to pass paged data from the server to the client.

	<p>

	The <code style="font-weight:bold">extj-ajax</code> component is a client-side binding to a server-side XHR datasource,
	supporting paging, sorting, <span style="text-decoration: line-through;" title="Not yet supported by this web component">and filtering.</span>

	<p>

	The API was designed for both version 4 and 5 of Sencha's <a href="http://www.sencha.com/products/extjs/" target="_blank" alt="Sencha's ExtJS">
	ExtJS Grid</a> (available free under <a href="http://www.gnu.org/copyleft/gpl.html" alt="GPL3" target="_blank">GPL 3</a>), and full documentation can be found on Sencha's web site.

	<p>

	<pre>
	&lt;sortable-table pageSize="10"&gt;
		&lt;extjs-ajax role="datasource" url="<a href="../extjs/grid-filter.php" target="_blank" alt="api">extjs/grid-filter.php</a>"&gt;&lt;/extjs-ajax&gt;
	&lt;/sortable-table&gt;
	</pre>

	<p>

	<em>The server is hosted in the Netherlands, so users outside of Europe might notice extra latency loading data</em><br>

	<template is="auto-binding">
		<sortable-table
			class="default"
			footerTemplate="defaultPager"
			filterTemplate="fullFilters"
			pageSize="10"
			loading="{{loading}}"
		>
			<sortable-column name="name">Name</sortable-column>
			<sortable-column name="last" formula="currency">Last</sortable-column>
			<sortable-column name="volume" formula="function(v){ if(v > 1000000) return v/1000000 + 'M'; else return v/1000 + 'K'; }">Volume</sortable-column>
			<sortable-column name="daily" formula="function(v){ return v + ' %'; }">Daily</sortable-column>
			<sortable-column name="ytd" formula="function(v){ if(v) return v + ' %'; else return '-'; }">YTD</sortable-column>

			<extjs-ajax role="datasource" url="../extjs/grid-filter.php"></extjs-ajax>
		</sortable-table>

		<p>

		Data is loading = {{loading}}
	</template>

	<p>

	<hr style="width:75%;height:1px;border:none;color:#DDD;background-color:#DDD;" align="left">

	<h2>Basic Use</h2>

	<pre>
	<strong>&lt;extjs-ajax</strong>
		url="<a href="http://files.stevenskelton.ca/sortable-table/examples/extjs/grid-filter.php" target="_blank" alt="api"
				>http://files.stevenskelton.ca/sortable-table/examples/extjs/grid-filter.php</a>"
		start=<span class="paramType">[int]</span>
		length=<span class="paramType">[int]</span>
		sortColumn=<span class="paramType">[string]</span>
		sortDescending=<span class="paramType">[boolean]</span>
		columns='[
			{"name":"id"},
			{"name":"name"},
			{"name":"last"},
			{"name":"volume"},
			{"name":"daily"},
			{"name":"ytd"}
		]'
	<strong>&gt;&lt;/extjs-ajax&gt;</strong>
	</pre>

	<hr style="width:75%;height:1px;border:none;color:#DDD;background-color:#DDD;" align="left">

	<p>

	<h2>Demo</h2>

	<p>

	<template is="auto-binding">
		<table>
			<tr>
				<td>Start</td>
				<td><input type="number" min="0" max="503" value="{{start}}" style="text-align:right"></td>
				<td><input type="range" min="0" max="503" value="{{start}}"></td>
				<td>Paging first record indicator. This is the start point in the current data set (0 index based - i.e. 0 is the first record).</td>
			</tr>
			<tr>
				<td>Length</td>
				<td><input type="number" min="-1" max="503" value="{{length}}" style="text-align:right"></td>
				<td><input type="range" min="-1" max="503" value="{{length}}"></td>
				<td>Number of records that the table can display in the current draw. It is expected that the number of records returned will be equal to this number, unless the server has fewer records to return. Note that this can be -1 to indicate that all records should be returned (although that negates any benefits of server-side processing!)</td>
			</tr>
			<tr>
				<td style="white-space: nowrap;">Sort Column</td>
				<td>
					<select value="{{sortColumn}}">
						<option value="">-</option>
						<option value="id">ID</option>
						<option value="name">Name</option>
						<option value="last">Last Price</option>
						<option value="volume">Volume</option>
						<option value="daily">Daily Change %</option>
						<option value="ytd">YTD Change %</option>
					</select>
				</td>
				<td><input type="checkbox" checked="{{sortDescending}}">Descending</td>
				<td>Column by which to sort the records.</td>
			</tr>
			<tr>
				<td style="white-space: nowrap;vertical-align:top" rowspan="2">Filter Columns</td>
				<td colspan="2"><button onclick="document.getElementById('cf').newFilter()">New Filter</button></td>
				<td>Columns to filter by.</td>
			</tr>
			<tr>
				<td colspan="3"><column-filters id="cf" filters="{{filters}}" filterOps="{{filterOps}}"
				columns='[{"name":"id","text":"ID"},
				{"name":"name","text":"Name"},
				{"name":"last","text":"Last Price"},
				{"name":"volume","text":"Volume"},
				{"name":"daily","text":"Daily Change %"},
				{"name":"ytd","text":"YTD Change %"}]'></column-filters></td>
			</tr>
		</table>

		<extjs-ajax
			url="../extjs/grid-filter.php"
			data="{{data}}"
			dataSize="{{dataSize}}"
			loading="{{loading}}"
			start="{{start}}"
			length="{{length}}"
			sortColumn="{{sortColumn}}"
			sortDescending="{{sortDescending}}"
			filters="{{filters}}"
			filterOps="{{filterOps}}"
			columns='[
				{"name":"id"},
				{"name":"name"},
				{"name":"last"},
				{"name":"volume"},
				{"name":"daily"},
				{"name":"ytd"}
			]'
		></extjs-ajax>

		<p>

		<strong>
			<template if="{{!loading}}">Waiting for Query<br></template>
			<template if="{{loading}}">Loading<br></template>
			{{dataSize}} Total Records<br>
			{{data.length}} Records Returned<br>
		</strong>

		<json-stringify
			data="{{data}}"
			style="overflow-y:auto;display:block;border:1px solid #333;"
		></json-stringify>

		<br>

		<em>Column Filters</em>
		<json-stringify
			data="{{filters}}"
			style="overflow-y:auto;display:block;border:1px solid #333;"
		></json-stringify>
	</template>

</body>
</html>