Monorail Hands-On

<script type="text/javascript">
Ext.onReady(function() {
	var ds = new Ext.data.Store({
		proxy : new Ext.data.HttpProxy({
			url: '/product/list.rails'
		}),
		
		reader: new Ext.data.JsonReader({
			root: 'products',
			totalProperty: 'totalCount',
			id: 'id'
		}, [
			{name: 'Id', mapping: 'Id', type: 'int'},
			{name: 'Name', mapping: 'Name'},
			{name: 'Price', mapping: 'Price'},
			{name: 'Supplier', mapping: 'Supplier.Name'}
		]),
		
		remoteSort: true
	});
	
	ds.setDefaultSort('Id', 'asc');

	ds.on('beforeload', function() {
		ds.baseParams = {
			filter: '' //Ext.get('filter').getValue()
		};
	});

	var cm = new Ext.grid.ColumnModel([{
		header: 'Id',
		dataIndex: 'Id',
		width: 50
		},{
		header: 'Name',
		dataIndex: 'Name',
		width: 200
		},{
		header: 'Price',
		dataIndex: 'Price',
		align: 'Right',
		renderer: Ext.util.Format.usMoney,
		width: 150
		},{
		header: 'Supplier',
		dataIndex: 'Supplier',
		width: 195
	}]);

	cm.defaultSortable = true;

	var grid = new Ext.grid.Grid('productList', {
		ds: ds,
		cm: cm,
		selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
		loadMask: true
	});

	grid.render();

	var gridFoot = grid.getView().getFooterPanel(true);
	
	var paging = new Ext.PagingToolbar(gridFoot, ds, {
		pageSize: 8,
		displayInfo: true,
		displayMsg: 'Items {0} - {1} of {2}',
		emptyMsg: "No Items to display"
	});

	ds.load({params:{start:0, limit:8}});

	Ext.get('filter').addListener('change', function() {
		ds.load({params:{start:0, limit:8}});
	});

});
</script>

<div id="productList" style="border:1px solid #ccc; width:600px; height: 210px;"></div>

<script type="text/javascript">
	    function showList(url, page)
	    {
	        var date = new Date();
		    var dateString = Date.parse(date.toString());

		    var url = url + '?page=' + page + '&dt=' + dateString;
		    var pars = '';

		    var myAjax = new Ajax.Updater(
		    'list', 
		    url, 
		    {
			    method: 'post', 
			    parameters: pars
		    });
	    }

  function PopulateDetail(id, supplier_id, name, price)
  {
//      var e = new Effect.SlideDown('details');
//      window.setTimeout('Effect.Appear(\'demo-effect-slideup\', {duration:.3})',2500);

      var url = '/product/edit.rails';
      var pars = '';

      $('product_id').value = id;
      $('product_name').value = name;
      $('product_price').value = price;
      for (i=0; i < $('product.Supplier.Id').length; i++)
            {
        	    value = $('product.Supplier.Id').options[i].value;
                if (value == supplier_id)
	            {
                    $('product.Supplier.Id').selectedIndex = i;
	            }
	        }

    var url = '/product/empty.rails';
	var myAjax = new Ajax.Updater(
		'EditStatus', 
		url, 
		{
			method: 'post', 
			parameters: pars
		});
  }

      function populateList(page)
      {
                var date = new Date();
                var dateString = Date.parse(date.toString());

                //var url = '/product/list.rails?page=' + $products.CurrentIndex + '&dt=' + dateString + '&productName=' + $('searchProduct_name').value + '&supplierId=' + $('searchProduct_supplier_id').value;
                var url = '/product/list.rails?page=' + page + '&dt=' + dateString + '&productName=' + $('searchProduct_name').value + '&supplierId=' + $('searchProduct_supplier_id').value;
		        var pars = '';
        		
		        var myAjax = new Ajax.Updater(
			        'list', 
			        url, 
			        {
				        method: 'post', 
				        parameters: pars
			        });
      }

  function Delete(productId)
  {
  		var url = '/product/delete.rails';
  		url = url + '?id=' + productId;
		var pars = '';
		
		var myAjax = new Ajax.Updater(
			'statusbar', 
			url, 
			{
				method: 'post', 
				parameters: pars
			});

        var date = new Date();
        var dateString = Date.parse(date.toString());
        url = '/product/list.rails?page=' + $products.CurrentIndex + '&dt=' + dateString;
        pars = '';
		myAjax = new Ajax.Updater(
			'list', 
			url, 
			{
				method: 'get', 
				parameters: pars
			});
  }

  function reportError(request)
  {
  alert('Error while getting html details.');
  }
</script>
<style type="text/css">
</style>

<!--table id="product" width="600px" border="0" cellpadding="2" cellspacing="0">
  <tr class="title">
    <td colspan="5">
      Product list
    </td>
  </tr>
  <tr class="header">
    <td class="listcell">Id</td>
    <td class="listcell">Name</td>
    <td class="listcell">Price</td>
    <td class="listcell">Supplier</td>
    <td class="listcell">&nbsp;</td>
  </tr>
  #foreach($product in $products)
      #odd
        <tr class="oddrow">
      #even
        <tr class="evenrow">
      #each
            <td class="listcell" width="10%">$product.Id</td>
            <td class="listcell" width="30%">$product.Name</td>
            <td class="listcell" width="15%" align="right">$product.Price.ToString('0.00')</td>
            <td class="listcell" width="30%">$product.Supplier.Name</td>
            <td class="listcell" width="15%">
              <a href="javascript:PopulateDetail($product.Id, $product.Supplier.Id, '$product.Name', $product.Price)">Edit</a> |
              <a href="javascript:Delete(${product.Id})">Delete</a>
            </td>
        </tr>
  #end
  
     <div id="paginationwrap">
        <div class="pagination" id="pagination">
	        <table width="95%" height="70" border="0">
	            <tr class="paginationrow" valign="top">
	                <td>Showing $products.FirstItem - $products.LastItem of $products.TotalItems</td>
	                <td align="right">
	                    #if($products.HasFirst) <a href="javascript:populateList(1)">first</a> #end
	                    #if(!$products.HasFirst) first #end
	                    #if($products.HasPrevious) | <a href="javascript:populateList($products.PreviousIndex)">prev</a> #end
	                    #if(!$products.HasPrevious) | prev #end
	                    #if($products.HasNext) | <a href="javascript:populateList($products.NextIndex)">last</a> #end
	                    #if(!$products.HasNext) | next #end
	                    #if($products.HasLast) | <a href="javascript:populateList($products.LastIndex)">last</a> #end
	                    #if(!$products.HasLast) | last #end
	                </td>
	            </tr>
	        </table>
	    </div>
    </div>
</table-->