Define custom renderer for table row : Grid Renderer « Ext JS « JavaScript DHTML






  1. JavaScript DHTML
  2. Ext JS
  3. Grid Renderer

Define custom renderer for table row

   

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

</head>
<script type="text/javascript">

Ext.onReady(function() {
      var store = new Ext.data.Store({
      data: [
        [1,"A","D","2009-02-19",1,"asdf",19.95,true],
        [3,"B","E","2002-02-15",1,"asdf",14.95,1],
        [4,"C","F","2009-10-01",2,"asdf",19.95,true]
        ],
      reader: new Ext.data.ArrayReader({id:'id'}, [
        'id',
        'title',
        'director',
        {name: 'released', type: 'date', dateFormat: 'Y-m-d'},
        'genre',
        'tagline',
        {name: 'price', type: 'float'},
        {name: 'available', type: 'bool'}
      ])
      });
    function title_tagline(val, x, store){
      return '<b>'+val+'</b><br>'+store.data.tagline;
    }
      var grid = new Ext.grid.GridPanel({
      renderTo: document.body,
      frame:true,
      title: 'Movie Database',
          height:200,
          width:520,
      enableColumnMove: false,
          store: store,
          columns: [
        {header: "Title", dataIndex: 'title',renderer: title_tagline},
        {header: "Director", dataIndex: 'director'},
        {header: "Released", dataIndex: 'released', renderer: Ext.util.Format.dateRenderer('m/d/Y')},
        {header: "Genre", dataIndex: 'genre'},
        {header: "Tagline", dataIndex: 'tagline'}
          ]
      });
});



</script>
<body>


</body>
</html>








Related examples in the same category

1.Set different renders for columns
2.Use Ext.util.Format.dateRenderer
3.Custom renderer function
4.Ext.util.Format.usMoney
5.Define your own render function for columns in a GridPanel
6.Custom Hybrid Summary Plugin
7.Custom Group Summary Plugin
8.Ext.ux.grid.RowExpander
9.Add Ext.grid.RowNumberer to GridPanel