* Use a ''livegrid'' (http://www.ext-livegrid.com/) for displaying EPG.

debian/changelog

@@ -29,6 +29,8 @@ hts-tvheadend (2.3) hts; urgency=low
 
   * Hopefully fix some rounding errors in the EPG display. Ticket #69
 
+  * Use a ''livegrid'' (http://www.ext-livegrid.com/) for displaying EPG.
+
 hts-tvheadend (2.2) hts; urgency=low
 
   * Set $HOME so forked processes (XMLTV) will have correct environment

src/webui/extjs.c

@@ -89,6 +89,7 @@ extjs_root(http_connection_t *hc, const char *remain, void *opaque)
 		 "<script type=\"text/javascript\" src=\""EXTJSPATH"/adapter/ext/ext-base.js\"></script>\n"
 		 "<script type=\"text/javascript\" src=\""EXTJSPATH"/ext-all-debug.js\"></script>\n"
 		 "<link rel=\"stylesheet\" type=\"text/css\" href=\""EXTJSPATH"/resources/css/ext-all.css\">\n"
+		 "<link rel=\"stylesheet\" type=\"text/css\" href=\"static/livegrid/resources/css/ext-ux-livegrid.css\">\n"
 		 "<link rel=\"stylesheet\" type=\"text/css\" href=\"static/app/ext.css\">\n");
 
   extjs_exec(hq, "Ext.BLANK_IMAGE_URL = "
@@ -98,6 +99,8 @@ extjs_root(http_connection_t *hc, const char *remain, void *opaque)
    * Load extjs extensions
    */
   extjs_load(hq, "static/app/extensions.js");
+  extjs_load(hq, "static/livegrid/livegrid-all.js");
+  
 
   /**
    * Create a namespace for our app

src/webui/static/app/epg.js

@@ -63,27 +63,26 @@ tvheadend.epgDetails = function(event) {
 tvheadend.epg = function() {
     var xg = Ext.grid;
 
-    var epgRecord = Ext.data.Record.create([
-	{name: 'id'},
-	{name: 'channel'},
-	{name: 'title'},
-	{name: 'description'},
-	{name: 'chicon'},
-        {name: 'start', type: 'date', dateFormat: 'U' /* unix time */},
-        {name: 'end', type: 'date', dateFormat: 'U' /* unix time */},
-        {name: 'duration'},
-	{name: 'contentgrp'}
-    ]);
-		    
-    var epgStore = new Ext.data.JsonStore({
-	root: 'entries',
-        totalProperty: 'totalCount',
-	fields: epgRecord,
-	url: 'epg',
+    var epgStore = new Ext.ux.grid.livegrid.Store({
 	autoLoad: true,
-	id: 'id',
-	remoteSort: true
-    });
+	url: 'epg',
+	bufferSize: 300,
+	reader: new Ext.ux.grid.livegrid.JsonReader({
+	    root: 'entries',
+	    totalProperty: 'totalCount',
+	    id: 'id'
+	},[
+	    {name: 'id'},
+	    {name: 'channel'},
+	    {name: 'title'},
+	    {name: 'description'},
+	    {name: 'chicon'},
+            {name: 'start', type: 'date', dateFormat: 'U' /* unix time */},
+            {name: 'end', type: 'date', dateFormat: 'U' /* unix time */},
+            {name: 'duration'},
+	    {name: 'contentgrp'}
+	])
+   });
 
     function renderDate(value){
 	var dt = new Date(value);
@@ -204,14 +203,11 @@ tvheadend.epg = function() {
 	epgFilterContentGroup.setValue("");
 	epgFilterTitle.setValue("");
           
-        panel.getBottomToolbar().changePage(1);
-
 	epgStore.reload();
     }
 
     epgFilterChannels.on('select', function(c, r) {
 	if(epgStore.baseParams.channel != r.data.name) {
-            panel.getBottomToolbar().changePage(1);
 	    epgStore.baseParams.channel = r.data.name;
 	    epgStore.reload();
 	}
@@ -219,7 +215,6 @@ tvheadend.epg = function() {
 
     epgFilterChannelTags.on('select', function(c, r) {
 	if(epgStore.baseParams.tag != r.data.name) {
-            panel.getBottomToolbar().changePage(1);
 	    epgStore.baseParams.tag = r.data.name;
 	    epgStore.reload();
 	}
@@ -227,7 +222,6 @@ tvheadend.epg = function() {
 
     epgFilterContentGroup.on('select', function(c, r) {
 	if(epgStore.baseParams.contentgrp != r.data.name) {
-            panel.getBottomToolbar().changePage(1);
 	    epgStore.baseParams.contentgrp = r.data.name;
 	    epgStore.reload();
 	}
@@ -240,20 +234,25 @@ tvheadend.epg = function() {
 	    value = null;
 
 	if(epgStore.baseParams.title != value) {
-            panel.getBottomToolbar().changePage(1);
 	    epgStore.baseParams.title = value;
 	    epgStore.reload();
 	}
     });
 
-    var panel = new Ext.grid.GridPanel({
-        loadMask: true,
-	stripeRows: true,
-	disableSelection: true,
-	title: 'Electronic Program Guide',
-	store: epgStore,
+    var epgView = new Ext.ux.grid.livegrid.GridView({
+	nearLimit : 100,
+	loadMask  : {
+	    msg :  'Buffering. Please wait...'
+	}
+    });
+
+    var panel = new Ext.ux.grid.livegrid.GridPanel({
+	enableDragDrop : false,
 	cm: epgCm,
-        viewConfig: {forceFit:true},
+	title: 'Electronic Program Guide',
+        store : epgStore,
+	selModel : new Ext.ux.grid.livegrid.RowSelectionModel(),
+	view : epgView,
 	tbar: [
 	    epgFilterTitle,
 	    '-',
@@ -284,17 +283,13 @@ tvheadend.epg = function() {
 		}
 	    }
 	],
-	
-        bbar: new Ext.PagingToolbar({
-            store: epgStore,
-            pageSize: 20,
-            displayInfo: true,
-            displayMsg: 'Programs {0} - {1} of {2}',
-            emptyMsg: "No programs to display"
-        })
 
+	bbar : new Ext.ux.grid.livegrid.Toolbar({
+	    view : epgView,
+	    displayInfo : true
+	})
     });
-    
+
     panel.on('rowclick', rowclicked);
 
 

src/webui/static/livegrid/resources/css/ext-ux-livegrid.css

@@ -0,0 +1 @@
+.ext-ux-livegrid-drop-waiting{background-image:url(../images/loading.gif)!important;}.ext-ux-livegrid-liveScroller{z-index:1;background:none!important;position:absolute;height:3px;right:0;width:18px;overflow:scroll;overflow-x:hidden;}.ext-ux-livegrid-liveScroller div{background:none;width:1px;overflow:hidden;font-size:1px;height:0;}