Add Ext.grid.RowNumberer to GridPanel : Grid Renderer « Ext JS « JavaScript DHTML






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

Add Ext.grid.RowNumberer to GridPanel

 <!-- /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ --> <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> <script type="text/javascript" src="ext-3.0.0/examples/ux/BufferView.js"></script> <style type="text/css"> .x-grid3-td-topic b { font-family:tahoma, verdana; display:block; overflow:hidden; width:98%; text-overflow:ellipsis; } .x-grid3-td-topic b i { font-weight:normal; font-style: normal; color:#000; overflow:hidden; text-overflow:ellipsis; } .x-grid3-td-topic .x-grid3-cell-inner { white-space: nowrap; } </style> </head> <!-- Revised from demo code in ext3.0.0 --> <body> <script type="text/javascript"> /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ Ext.onReady(function(){ var store = new Ext.data.Store({ remoteSort: true, baseParams: {lightWeight:true,ext: 'js'}, sortInfo: {field:'lastpost', direction:'DESC'}, autoLoad: {params:{start:0, limit:500}}, proxy: new Ext.data.ScriptTagProxy({ url: 'http://extjs.com/forum/topics-browse-remote.php'  }), reader: new Ext.data.JsonReader({ root: 'topics', totalProperty: 'totalCount', idProperty: 'threadid', fields: [ 'title', 'forumtitle', 'forumid', 'author', {name: 'replycount', type: 'int'}, {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'}, 'lastposter', 'excerpt' ] }) }); var grid = new Ext.grid.GridPanel({ renderTo: 'topic-grid', width:700, height:500, frame:true, title:'ExtJS.com - Browse Forums', trackMouseOver:false, autoExpandColumn: 'topic', store: store, columns: [new Ext.grid.RowNumberer({width: 30}),{ id: 'topic', header: "Topic", dataIndex: 'title', width: 420, renderer: renderTopic, sortable:true },{ header: "Replies", dataIndex: 'replycount', width: 70, align: 'right', sortable:true },{ id: 'last', header: "Last Post", dataIndex: 'lastpost', width: 150, renderer: renderLast, sortable:true }], bbar: new Ext.PagingToolbar({ store: store, pageSize:500, displayInfo:true }), view: new Ext.ux.grid.BufferView({ // custom row height  rowHeight: 34, // render rows as they come into viewable area.  scrollDelay: false }) }); // render functions  function renderTopic(value, p, record){ return String.format( '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',  value, record.data.forumtitle, record.id, record.data.forumid); } function renderLast(value, p, r){ return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']); } }); </script> <div id="topic-grid"></div> </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.Define custom renderer for table row
close