webui: Upgrade CheckColumn to extjs 3.4

This commit is contained in:
Andreas Öman 2012-11-16 11:41:29 +01:00
parent ba59e82ad4
commit 5716eaebf6
10 changed files with 251 additions and 224 deletions

View file

@ -111,6 +111,7 @@ extjs_root(http_connection_t *hc, const char *remain, void *opaque)
extjs_load(hq, "static/lovcombo/lovcombo-all.js");
extjs_load(hq, "static/multiselect/multiselect.js");
extjs_load(hq, "static/multiselect/ddview.js");
extjs_load(hq, "static/checkcolumn/CheckColumn.js");
/**
* Create a namespace for our app

View file

@ -1,77 +1,73 @@
tvheadend.acleditor = function() {
var fm = Ext.form;
var enabledColumn = new Ext.grid.CheckColumn({
header : "Enabled",
dataIndex : 'enabled',
width : 60
});
var cm = new Ext.grid.ColumnModel({
defaultSortable: true,
var streamingColumn = new Ext.grid.CheckColumn({
header : "Streaming",
dataIndex : 'streaming',
width : 100
});
columns : [{
xtype: 'checkcolumn',
header : "Enabled",
dataIndex : 'enabled',
width : 60
}, {
header : "Username",
dataIndex : 'username',
editor : new fm.TextField({
allowBlank : false
})
}, {
header : "Password",
dataIndex : 'password',
renderer : function(value, metadata, record, row, col, store) {
return '<span class="tvh-grid-unset">Hidden</span>';
},
editor : new fm.TextField({
allowBlank : false
})
}, {
header : "Prefix",
dataIndex : 'prefix',
editor : new fm.TextField({
allowBlank : false
})
}, {
xtype: 'checkcolumn',
header : "Streaming",
dataIndex : 'streaming',
width : 100
}, {
xtype: 'checkcolumn',
header : "Video Recorder",
dataIndex : 'dvr',
width : 100
}, {
xtype: 'checkcolumn',
header : "All Configs (VR)",
dataIndex : 'dvrallcfg',
width : 100
}, {
xtype: 'checkcolumn',
header : "Web Interface",
dataIndex : 'webui',
width : 100
}, {
xtype: 'checkcolumn',
header : "Admin",
dataIndex : 'admin',
width : 100
}, {
header : "Comment",
dataIndex : 'comment',
width : 400,
editor : new fm.TextField({})
}]});
var dvrColumn = new Ext.grid.CheckColumn({
header : "Video Recorder",
dataIndex : 'dvr',
width : 100
});
var UserRecord = Ext.data.Record.create(
[ 'enabled', 'streaming', 'dvr', 'dvrallcfg', 'admin', 'webui', 'username',
'prefix', 'password', 'comment'
]);
var dvrallcfgColumn = new Ext.grid.CheckColumn({
header : "All Configs (VR)",
dataIndex : 'dvrallcfg',
width : 100
});
var webuiColumn = new Ext.grid.CheckColumn({
header : "Web Interface",
dataIndex : 'webui',
width : 100
});
var adminColumn = new Ext.grid.CheckColumn({
header : "Admin",
dataIndex : 'admin',
width : 100
});
var cm = new Ext.grid.ColumnModel({
defaultSortable: true,
columns : [ enabledColumn, {
header : "Username",
dataIndex : 'username',
editor : new fm.TextField({
allowBlank : false
})
}, {
header : "Password",
dataIndex : 'password',
renderer : function(value, metadata, record, row, col, store) {
return '<span class="tvh-grid-unset">Hidden</span>';
},
editor : new fm.TextField({
allowBlank : false
})
}, {
header : "Prefix",
dataIndex : 'prefix',
editor : new fm.TextField({
allowBlank : false
})
}, streamingColumn, dvrColumn, dvrallcfgColumn, webuiColumn, adminColumn, {
header : "Comment",
dataIndex : 'comment',
width : 400,
editor : new fm.TextField({})
} ]});
var UserRecord = Ext.data.Record.create([ 'enabled', 'streaming', 'dvr',
'dvrallcfg', 'admin', 'webui', 'username', 'prefix', 'password',
'comment' ]);
return new tvheadend.tableEditor('Access control', 'accesscontrol', cm,
UserRecord, [ enabledColumn, streamingColumn, dvrColumn, dvrallcfgColumn,
webuiColumn, adminColumn ], null, 'config_access.html', 'group');
return new tvheadend.tableEditor('Access control', 'accesscontrol', cm,
UserRecord, [], null, 'config_access.html',
'group');
}

View file

@ -1,18 +1,6 @@
tvheadend.capmteditor = function() {
var fm = Ext.form;
var enabledColumn = new Ext.grid.CheckColumn({
header : "Enabled",
dataIndex : 'enabled',
width : 60
});
var oscamColumn = new Ext.grid.CheckColumn({
header : "OSCam mode",
dataIndex : 'oscam',
width : 60
});
function setMetaAttr(meta, record) {
var enabled = record.get('enabled');
if (!enabled) return;
@ -28,7 +16,12 @@ tvheadend.capmteditor = function() {
var cm = new Ext.grid.ColumnModel({
defaultSortable: true,
columns: [ enabledColumn, {
columns: [ {
xtype: 'checkcolumn',
header : "Enabled",
dataIndex : 'enabled',
width : 60
}, {
header : "Camd.socket Filename",
dataIndex : 'camdfilename',
width : 200,
@ -49,7 +42,13 @@ tvheadend.capmteditor = function() {
editor : new fm.TextField({
allowBlank : false
})
}, oscamColumn, {
}, {
xtype: 'checkcolumn',
header : "OSCam mode",
dataIndex : 'oscam',
width : 60
} , {
header : "Comment",
dataIndex : 'comment',
width : 400,
@ -83,5 +82,5 @@ tvheadend.capmteditor = function() {
});
return new tvheadend.tableEditor('Capmt Connections', 'capmt', cm, rec,
[ enabledColumn, oscamColumn ], store, 'config_capmt.html', 'key');
[ ], store, 'config_capmt.html', 'key');
}

View file

@ -1,51 +1,49 @@
tvheadend.cteditor = function() {
var fm = Ext.form;
var fm = Ext.form;
var enabledColumn = new Ext.grid.CheckColumn({
header : "Enabled",
dataIndex : 'enabled',
width : 60
});
var internalColumn = new Ext.grid.CheckColumn({
header : "Internal",
dataIndex : 'internal',
width : 100
});
var cm = new Ext.grid.ColumnModel({
defaultSortable: true,
columns : [{
xtype: 'checkcolumn',
header : "Enabled",
dataIndex : 'enabled',
width : 60
} , {
header : "Name",
dataIndex : 'name',
editor : new fm.TextField({
allowBlank : false
})
}, {
xtype: 'checkcolumn',
header : "Internal",
dataIndex : 'internal',
width : 100
}, {
header : "Icon (full URL)",
dataIndex : 'icon',
width : 400,
editor : new fm.TextField({})
}, {
xtype: 'checkcolumn',
header : "Icon has title",
dataIndex : 'titledIcon',
width : 100,
tooltip : 'Set this if the supplied icon has a title embedded. '
+ 'This will tell displaying application not to superimpose title '
+ 'on top of logo.'
}, {
header : "Comment",
dataIndex : 'comment',
width : 400,
editor : new fm.TextField({})
} ]});
var titledIconColumn = new Ext.grid.CheckColumn({
header : "Icon has title",
dataIndex : 'titledIcon',
width : 100,
tooltip : 'Set this if the supplied icon has a title embedded. '
+ 'This will tell displaying application not to superimpose title '
+ 'on top of logo.'
});
var ChannelTagRecord = Ext.data.Record.create([
'enabled', 'name', 'internal', 'icon', 'comment', 'titledIcon' ]);
var cm = new Ext.grid.ColumnModel({
defaultSortable: true,
columns : [ enabledColumn, {
header : "Name",
dataIndex : 'name',
editor : new fm.TextField({
allowBlank : false
})
}, internalColumn, {
header : "Icon (full URL)",
dataIndex : 'icon',
width : 400,
editor : new fm.TextField({})
}, titledIconColumn, {
header : "Comment",
dataIndex : 'comment',
width : 400,
editor : new fm.TextField({})
} ]});
var ChannelTagRecord = Ext.data.Record.create([ 'enabled', 'name',
'internal', 'icon', 'comment', 'titledIcon' ]);
return new tvheadend.tableEditor('Channel Tags', 'channeltags', cm,
ChannelTagRecord, [ enabledColumn, internalColumn, titledIconColumn ],
null, 'config_tags.html', 'tags');
return new tvheadend.tableEditor('Channel Tags', 'channeltags', cm,
ChannelTagRecord, [],
null, 'config_tags.html', 'tags');
}

View file

@ -1,24 +1,6 @@
tvheadend.cwceditor = function() {
var fm = Ext.form;
var enabledColumn = new Ext.grid.CheckColumn({
header : "Enabled",
dataIndex : 'enabled',
width : 60
});
var emmColumn = new Ext.grid.CheckColumn({
header : "Update Card",
dataIndex : 'emm',
width : 100
});
var emmexColumn = new Ext.grid.CheckColumn({
header : "Update One",
dataIndex : 'emmex',
width : 100
});
function setMetaAttr(meta, record) {
var enabled = record.get('enabled');
if (!enabled) return;
@ -34,7 +16,12 @@ tvheadend.cwceditor = function() {
var cm = new Ext.grid.ColumnModel({
defaultSortable: true,
columns : [ enabledColumn, {
columns : [ {
xtype: 'checkcolumn',
header : "Enabled",
dataIndex : 'enabled',
width : 60
}, {
header : "Hostname",
dataIndex : 'hostname',
width : 200,
@ -86,7 +73,17 @@ tvheadend.cwceditor = function() {
editor : new fm.TextField({
allowBlank : false
})
}, emmColumn, emmexColumn, {
}, {
xtype: 'checkcolumn',
header : "Update Card",
dataIndex : 'emm',
width : 100
}, {
xtype: 'checkcolumn',
header : "Update One",
dataIndex : 'emmex',
width : 100
}, {
header : "Comment",
dataIndex : 'comment',
width : 400,
@ -112,8 +109,8 @@ tvheadend.cwceditor = function() {
}
});
var grid = new tvheadend.tableEditor('Code Word Client', 'cwc', cm, rec, [
enabledColumn, emmColumn, emmexColumn ], store, 'config_cwc.html', 'key');
var grid = new tvheadend.tableEditor('Code Word Client', 'cwc', cm, rec, [],
store, 'config_cwc.html', 'key');
tvheadend.comet.on('cwcStatus', function(msg) {
var rec = store.getById(msg.id);

View file

@ -7,12 +7,6 @@ tvheadend.dvb_muxes = function(adapterData, satConfStore) {
var fm = Ext.form;
var enabledColumn = new Ext.grid.CheckColumn({
header : "Enabled",
dataIndex : 'enabled',
width : 40
});
var qualityColumn = new Ext.ux.grid.ProgressColumn({
header : "Quality",
dataIndex : 'quality',
@ -23,7 +17,13 @@ tvheadend.dvb_muxes = function(adapterData, satConfStore) {
var cmlist = Array();
cmlist.push(enabledColumn, {
cmlist.push({
xtype: 'checkcolumn',
header : "Enabled",
dataIndex : 'enabled',
width : 40
}, {
header : "Network",
dataIndex : 'network',
width : 200
@ -352,7 +352,7 @@ tvheadend.dvb_muxes = function(adapterData, satConfStore) {
var grid = new Ext.grid.EditorGridPanel({
stripeRows : true,
title : 'Multiplexes',
plugins : [ enabledColumn, qualityColumn ],
plugins : [ qualityColumn ],
store : store,
clicksToEdit : 2,
cm : cm,
@ -379,17 +379,6 @@ tvheadend.dvb_services = function(adapterId) {
var fm = Ext.form;
var enabledColumn = new Ext.grid.CheckColumn({
header : "Enabled",
dataIndex : 'enabled',
width : 45
});
var eitColumn = new Ext.grid.CheckColumn({
header : "EPG",
dataIndex : 'dvb_eit_enable',
width : 45
});
var actions = new Ext.ux.grid.RowActions({
header : '',
@ -413,7 +402,12 @@ tvheadend.dvb_services = function(adapterId) {
var cm = new Ext.grid.ColumnModel({
defaultSortable: true,
columns: [
enabledColumn,
{
xtype: 'checkcolumn',
header : "Enabled",
dataIndex : 'enabled',
width : 45
},
{
header : "Service name",
dataIndex : 'svcname',
@ -485,7 +479,12 @@ tvheadend.dvb_services = function(adapterId) {
displayField : 'value',
valueField : 'key'
})
}, eitColumn, {
}, {
xtype: 'checkcolumn',
header : "EPG",
dataIndex : 'dvb_eit_enable',
width : 45
} , {
header : "Type",
dataIndex : 'type',
width : 50
@ -608,7 +607,7 @@ tvheadend.dvb_services = function(adapterId) {
var grid = new Ext.grid.EditorGridPanel({
stripeRows : true,
title : 'Services',
plugins : [ enabledColumn, eitColumn, actions ],
plugins : [ actions ],
store : store,
clicksToEdit : 2,
cm : cm,

View file

@ -404,17 +404,18 @@ tvheadend.dvrschedule = function() {
tvheadend.autoreceditor = function() {
var fm = Ext.form;
var enabledColumn = new Ext.grid.CheckColumn({
header : "Enabled",
dataIndex : 'enabled',
width : 30
});
var cm = new Ext.grid.ColumnModel({
defaultSortable: true,
columns :
[
enabledColumn,
[
{
header: 'Enabled',
dataIndex: 'enabled',
width: 30,
xtype: 'checkcolumn'
},
{
header : "Title (Regexp)",
dataIndex : 'title',
@ -562,7 +563,7 @@ tvheadend.autoreceditor = function() {
} ]});
return new tvheadend.tableEditor('Automatic Recorder', 'autorec', cm,
tvheadend.autorecRecord, [ enabledColumn ], tvheadend.autorecStore,
tvheadend.autorecRecord, [], tvheadend.autorecStore,
'autorec.html', 'wand');
}
/**

View file

@ -6,41 +6,6 @@
* http://extjs.com/license
*/
/**
* CheckedColumn
*/
Ext.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};
Ext.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
onMouseDown : function(e, t){
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},
renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';
}
};
/**
* Rowexpander

View file

@ -16,11 +16,6 @@ tvheadend.iptv = function(adapterId) {
var fm = Ext.form;
var enabledColumn = new Ext.grid.CheckColumn({
header : "Enabled",
dataIndex : 'enabled',
width : 45
});
var actions = new Ext.ux.grid.RowActions({
header : '',
@ -44,7 +39,12 @@ tvheadend.iptv = function(adapterId) {
var cm = new Ext.grid.ColumnModel({
defaultSortable: true,
columns : [
enabledColumn,
{
xtype: 'checkcolumn',
header : "Enabled",
dataIndex : 'enabled',
width : 45
},
{
header : "Channel name",
dataIndex : 'channelname',
@ -275,7 +275,7 @@ tvheadend.iptv = function(adapterId) {
stripeRows : true,
title : 'IPTV',
iconCls : 'iptv',
plugins : [ enabledColumn, actions ],
plugins : [ actions ],
store : store,
clicksToEdit : 2,
cm : cm,

View file

@ -0,0 +1,71 @@
/*!
* Ext JS Library 3.4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
Ext.ns('Ext.ux.grid');
/**
* @class Ext.ux.grid.CheckColumn
* @extends Ext.grid.Column
* <p>A Column subclass which renders a checkbox in each column cell which toggles the truthiness of the associated data field on click.</p>
* <p><b>Note. As of ExtJS 3.3 this no longer has to be configured as a plugin of the GridPanel.</b></p>
* <p>Example usage:</p>
* <pre><code>
var cm = new Ext.grid.ColumnModel([{
header: 'Foo',
...
},{
xtype: 'checkcolumn',
header: 'Indoor?',
dataIndex: 'indoor',
width: 55
}
]);
// create the grid
var grid = new Ext.grid.EditorGridPanel({
...
colModel: cm,
...
});
* </code></pre>
* In addition to toggling a Boolean value within the record data, this
* class toggles a css class between <tt>'x-grid3-check-col'</tt> and
* <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
* a column.
*/
Ext.ux.grid.CheckColumn = Ext.extend(Ext.grid.Column, {
/**
* @private
* Process and refire events routed from the GridView's processEvent method.
*/
processEvent : function(name, e, grid, rowIndex, colIndex){
if (name == 'mousedown') {
var record = grid.store.getAt(rowIndex);
record.set(this.dataIndex, !record.data[this.dataIndex]);
return false; // Cancel row selection.
} else {
return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
}
},
renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0}">&#160;</div>', v ? '-on' : '');
},
// Deprecate use as a plugin. Remove in 4.0
init: Ext.emptyFn
});
// register ptype. Deprecate. Remove in 4.0
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);
// backwards compat. Remove in 4.0
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;
// register Column xtype
Ext.grid.Column.types.checkcolumn = Ext.ux.grid.CheckColumn;