Add lovcombo multiselect combo for use in channel config (epggrab source select).
This commit is contained in:
Adam Sutton
parent
b1b80076bb
commit
dd39b68b26
6 changed files with 543 additions and 1 deletions
|
|
@ -103,7 +103,7 @@ extjs_root(http_connection_t *hc, const char *remain, void *opaque)
|
|||
*/
|
||||
extjs_load(hq, "static/app/extensions.js");
|
||||
extjs_load(hq, "static/livegrid/livegrid-all.js");
|
||||
|
||||
extjs_load(hq, "static/lovcombo/lovcombo-all.js");
|
||||
|
||||
/**
|
||||
* Create a namespace for our app
|
||||
|
|
|
|||
32
src/webui/static/lovcombo/css/Ext.ux.form.LovCombo.css
Normal file
32
src/webui/static/lovcombo/css/Ext.ux.form.LovCombo.css
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
/** vim: ts=4:sw=4:nu:fdc=4:nospell
|
||||
*
|
||||
* Ext.ux.form.LovCombo CSS File
|
||||
*
|
||||
* @author Ing.Jozef Sakáloš
|
||||
* @copyright (c) 2008, by Ing. Jozef Sakáloš
|
||||
* @date 5. April 2008
|
||||
* @version $Id: Ext.ux.form.LovCombo.css 189 2008-04-16 21:01:06Z jozo $
|
||||
*
|
||||
* @license Ext.ux.form.LovCombo.css is licensed under the terms of the Open Source
|
||||
* LGPL 3.0 license. Commercial use is permitted to the extent that the
|
||||
* code/component(s) do NOT become part of another Open Source or Commercially
|
||||
* licensed development library or toolkit without explicit permission.
|
||||
*
|
||||
* License details: http://www.gnu.org/licenses/lgpl.html
|
||||
*/
|
||||
|
||||
.ux-lovcombo-icon {
|
||||
width:16px;
|
||||
height:16px;
|
||||
float:left;
|
||||
background-position: -1px -1px ! important;
|
||||
background-repeat:no-repeat ! important;
|
||||
}
|
||||
.ux-lovcombo-icon-checked {
|
||||
background: transparent url(../ext/resources/images/default/menu/checked.gif);
|
||||
}
|
||||
.ux-lovcombo-icon-unchecked {
|
||||
background: transparent url(../ext/resources/images/default/menu/unchecked.gif);
|
||||
}
|
||||
|
||||
/* eof */
|
||||
0
src/webui/static/lovcombo/css/empty.css
Normal file
0
src/webui/static/lovcombo/css/empty.css
Normal file
74
src/webui/static/lovcombo/css/lovcombo.css
Normal file
74
src/webui/static/lovcombo/css/lovcombo.css
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
/** vim: ts=4:sw=4:nu:fdc=4:nospell
|
||||
*
|
||||
* Ext.ux.form.LovCombo Example Application CSS File
|
||||
*
|
||||
* @author Ing.Jozef Sakáloš
|
||||
* @copyright (c) 2008, by Ing. Jozef Sakáloš
|
||||
* @date 16. April 2008
|
||||
* @version $Id: lovcombo.css 194 2008-04-17 00:16:12Z jozo $
|
||||
*
|
||||
* @license Ext.ux.form.LovCombo.css is licensed under the terms of the Open Source
|
||||
* LGPL 3.0 license. Commercial use is permitted to the extent that the
|
||||
* code/component(s) do NOT become part of another Open Source or Commercially
|
||||
* licensed development library or toolkit without explicit permission.
|
||||
*
|
||||
* License details: http://www.gnu.org/licenses/lgpl.html
|
||||
*/
|
||||
|
||||
#west-content a {
|
||||
text-decoration:none;
|
||||
}
|
||||
#west-content a:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
#west {
|
||||
width:280px;
|
||||
}
|
||||
#center {
|
||||
width:640px;
|
||||
}
|
||||
#adsense-top {
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
#west-content {
|
||||
font-family:arial, sans-serif;
|
||||
}
|
||||
#center-content {
|
||||
font-family:arial, sans-serif;
|
||||
margin:0 0 0 10px;
|
||||
color:#777777;
|
||||
}
|
||||
#center-content h2 {
|
||||
font-size:16px;
|
||||
text-align:center;
|
||||
}
|
||||
#description {
|
||||
color:#777777;
|
||||
text-align:justify;
|
||||
}
|
||||
#description em {
|
||||
font-style:italic;
|
||||
font-weight:bold;
|
||||
}
|
||||
#description p {
|
||||
margin: 2px 0 8px 0;
|
||||
}
|
||||
.adsense {
|
||||
opacity:.55;
|
||||
filter:alpha(opacity=55);
|
||||
-moz-opacity:.55;
|
||||
}
|
||||
#change-log {
|
||||
padding:20px 0 0 20px;
|
||||
}
|
||||
#change-log ul {
|
||||
margin: 8px 0 0 1em;
|
||||
list-style:disc outside;
|
||||
text-align:justify;
|
||||
}
|
||||
#cts {
|
||||
margin: 20px;
|
||||
zoom:1;
|
||||
}
|
||||
|
||||
/* eof */
|
||||
154
src/webui/static/lovcombo/css/webpage.css
Normal file
154
src/webui/static/lovcombo/css/webpage.css
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
/** vim: ts=4:sw=4:nu:fdc=4:nospell
|
||||
*
|
||||
* css file for webpage layout
|
||||
*
|
||||
* @author Ing.Jozef Sakáloš
|
||||
* @copyright (c) 2008, by Ing. Jozef Sakáloš
|
||||
* @date 6. April 2008
|
||||
* @version $Id: webpage.css 15 2008-04-24 14:15:22Z jozo $
|
||||
*/
|
||||
|
||||
body {
|
||||
color:#222222;
|
||||
background:#ffffff;
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0;
|
||||
font-size:13px;
|
||||
}
|
||||
.cleaner {
|
||||
clear:both;
|
||||
height:0;
|
||||
width:0;
|
||||
line-height:0;
|
||||
font-size:0;
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0;
|
||||
}
|
||||
|
||||
/* {{{
|
||||
// layout */
|
||||
#ct-wrap {
|
||||
text-align:center;
|
||||
}
|
||||
#ct {
|
||||
margin:auto;
|
||||
width:920px;
|
||||
text-align:left;
|
||||
}
|
||||
#west {
|
||||
width:220px;
|
||||
float:left;
|
||||
clear:left;
|
||||
}
|
||||
#center {
|
||||
width:700px;
|
||||
float:left;
|
||||
}
|
||||
#east {
|
||||
float:right;
|
||||
clear:right;
|
||||
width:0px;
|
||||
}
|
||||
#north {
|
||||
float:none;
|
||||
clear:both;
|
||||
height:30px;
|
||||
padding:10px;
|
||||
color:white;
|
||||
background: #203d8e;
|
||||
}
|
||||
#north h1 {
|
||||
float:left;
|
||||
font-family:"Lucida Grande", Tahoma, Arial, sans-serif;
|
||||
font-size:24px;
|
||||
font-weight:bold;
|
||||
}
|
||||
#navlinks {
|
||||
float:none;
|
||||
clear:both;
|
||||
height:24px;
|
||||
background:#ffc800;
|
||||
vertical-align:middle;
|
||||
font-family:Verdana, Arial, Tahoma, sans-serif;
|
||||
font-size:12px;
|
||||
text-transform:lowercase;
|
||||
line-height:24px;
|
||||
}
|
||||
#navlinks li {
|
||||
display:inline;
|
||||
}
|
||||
#navlinks a {
|
||||
display:block;
|
||||
float:left;
|
||||
padding:0 15px;
|
||||
text-decoration:none;
|
||||
color:blue;
|
||||
}
|
||||
#navlinks a:hover {
|
||||
background-color:#ffff40;
|
||||
}
|
||||
#south {
|
||||
height:30px;
|
||||
float:none;
|
||||
clear:both;
|
||||
}
|
||||
/* }}} */
|
||||
/* {{{
|
||||
// containers */
|
||||
#themect {
|
||||
float:right;
|
||||
width:150px;
|
||||
margin:4px 0 0 0;
|
||||
}
|
||||
#langct {
|
||||
float:right;
|
||||
width:140px;
|
||||
margin:4px 10px 0 0;
|
||||
}
|
||||
#adrow {
|
||||
min-height:1em;
|
||||
clear:both;
|
||||
float:none;
|
||||
position:relative;
|
||||
}
|
||||
.adsense {
|
||||
opacity:.55;
|
||||
filter:alpha(opacity=55);
|
||||
-moz-opacity:.55;
|
||||
}
|
||||
#adsense-float {
|
||||
margin: 4px 4px 0 0;
|
||||
float:left;
|
||||
}
|
||||
#adsense-top {
|
||||
float:left;
|
||||
margin: 10px 0 10px 220px;
|
||||
opacity:.55;
|
||||
filter:alpha(opacity=55);
|
||||
-moz-opacity:.55;
|
||||
}
|
||||
#adsense-west {
|
||||
margin: 25px 0;
|
||||
opacity:.55;
|
||||
filter:alpha(opacity=55);
|
||||
-moz-opacity:.55;
|
||||
}
|
||||
#google-search {
|
||||
margin:20px 0;
|
||||
}
|
||||
#paypal {
|
||||
margin:20px 0;
|
||||
}
|
||||
#digg {
|
||||
margin:30px 0;
|
||||
}
|
||||
#addthis {
|
||||
float:left;
|
||||
clear:right;
|
||||
margin:10px 0 0 40px;
|
||||
}
|
||||
/* }}} */
|
||||
|
||||
/* eof */
|
||||
282
src/webui/static/lovcombo/lovcombo-all.js
Normal file
282
src/webui/static/lovcombo/lovcombo-all.js
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
/**
|
||||
* Ext.ux.form.LovCombo, List of Values Combo
|
||||
*
|
||||
* @author Ing. Jozef Sakáloš
|
||||
* @copyright (c) 2008, by Ing. Jozef Sakáloš
|
||||
* @date 16. April 2008
|
||||
* @version $Id: Ext.ux.form.LovCombo.js 285 2008-06-06 09:22:20Z jozo $
|
||||
*
|
||||
* @license Ext.ux.form.LovCombo.js is licensed under the terms of the Open Source
|
||||
* LGPL 3.0 license. Commercial use is permitted to the extent that the
|
||||
* code/component(s) do NOT become part of another Open Source or Commercially
|
||||
* licensed development library or toolkit without explicit permission.
|
||||
*
|
||||
* License details: http://www.gnu.org/licenses/lgpl.html
|
||||
*/
|
||||
|
||||
/*global Ext */
|
||||
|
||||
// add RegExp.escape if it has not been already added
|
||||
if('function' !== typeof RegExp.escape) {
|
||||
RegExp.escape = function(s) {
|
||||
if('string' !== typeof s) {
|
||||
return s;
|
||||
}
|
||||
// Note: if pasting from forum, precede ]/\ with backslash manually
|
||||
return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
|
||||
}; // eo function escape
|
||||
}
|
||||
|
||||
// create namespace
|
||||
Ext.ns('Ext.ux.form');
|
||||
|
||||
/**
|
||||
*
|
||||
* @class Ext.ux.form.LovCombo
|
||||
* @extends Ext.form.ComboBox
|
||||
*/
|
||||
Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, {
|
||||
|
||||
// {{{
|
||||
// configuration options
|
||||
/**
|
||||
* @cfg {String} checkField name of field used to store checked state.
|
||||
* It is automatically added to existing fields.
|
||||
* Change it only if it collides with your normal field.
|
||||
*/
|
||||
checkField:'checked'
|
||||
|
||||
/**
|
||||
* @cfg {String} separator separator to use between values and texts
|
||||
*/
|
||||
,separator:','
|
||||
|
||||
/**
|
||||
* @cfg {String/Array} tpl Template for items.
|
||||
* Change it only if you know what you are doing.
|
||||
*/
|
||||
// }}}
|
||||
// {{{
|
||||
,initComponent:function() {
|
||||
|
||||
// template with checkbox
|
||||
if(!this.tpl) {
|
||||
this.tpl =
|
||||
'<tpl for=".">'
|
||||
+'<div class="x-combo-list-item">'
|
||||
+'<img src="' + Ext.BLANK_IMAGE_URL + '" '
|
||||
+'class="ux-lovcombo-icon ux-lovcombo-icon-'
|
||||
+'{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">'
|
||||
+'<div class="ux-lovcombo-item-text">{' + (this.displayField || 'text' )+ '}</div>'
|
||||
+'</div>'
|
||||
+'</tpl>'
|
||||
;
|
||||
}
|
||||
|
||||
// call parent
|
||||
Ext.ux.form.LovCombo.superclass.initComponent.apply(this, arguments);
|
||||
|
||||
// install internal event handlers
|
||||
this.on({
|
||||
scope:this
|
||||
,beforequery:this.onBeforeQuery
|
||||
,blur:this.onRealBlur
|
||||
});
|
||||
|
||||
// remove selection from input field
|
||||
this.onLoad = this.onLoad.createSequence(function() {
|
||||
if(this.el) {
|
||||
var v = this.el.dom.value;
|
||||
this.el.dom.value = '';
|
||||
this.el.dom.value = v;
|
||||
}
|
||||
});
|
||||
|
||||
} // e/o function initComponent
|
||||
// }}}
|
||||
// {{{
|
||||
/**
|
||||
* Disables default tab key bahavior
|
||||
* @private
|
||||
*/
|
||||
,initEvents:function() {
|
||||
Ext.ux.form.LovCombo.superclass.initEvents.apply(this, arguments);
|
||||
|
||||
// disable default tab handling - does no good
|
||||
this.keyNav.tab = false;
|
||||
|
||||
} // eo function initEvents
|
||||
// }}}
|
||||
// {{{
|
||||
/**
|
||||
* clears value
|
||||
*/
|
||||
,clearValue:function() {
|
||||
this.value = '';
|
||||
this.setRawValue(this.value);
|
||||
this.store.clearFilter();
|
||||
this.store.each(function(r) {
|
||||
r.set(this.checkField, false);
|
||||
}, this);
|
||||
if(this.hiddenField) {
|
||||
this.hiddenField.value = '';
|
||||
}
|
||||
this.applyEmptyText();
|
||||
} // eo function clearValue
|
||||
// }}}
|
||||
// {{{
|
||||
/**
|
||||
* @return {String} separator (plus space) separated list of selected displayFields
|
||||
* @private
|
||||
*/
|
||||
,getCheckedDisplay:function() {
|
||||
var re = new RegExp(this.separator, "g");
|
||||
return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ');
|
||||
} // eo function getCheckedDisplay
|
||||
// }}}
|
||||
// {{{
|
||||
/**
|
||||
* @return {String} separator separated list of selected valueFields
|
||||
* @private
|
||||
*/
|
||||
,getCheckedValue:function(field) {
|
||||
field = field || this.valueField;
|
||||
var c = [];
|
||||
|
||||
// store may be filtered so get all records
|
||||
var snapshot = this.store.snapshot || this.store.data;
|
||||
|
||||
snapshot.each(function(r) {
|
||||
if(r.get(this.checkField)) {
|
||||
c.push(r.get(field));
|
||||
}
|
||||
}, this);
|
||||
|
||||
return c.join(this.separator);
|
||||
} // eo function getCheckedValue
|
||||
// }}}
|
||||
// {{{
|
||||
/**
|
||||
* beforequery event handler - handles multiple selections
|
||||
* @param {Object} qe query event
|
||||
* @private
|
||||
*/
|
||||
,onBeforeQuery:function(qe) {
|
||||
qe.query = qe.query.replace(new RegExp(this.getCheckedDisplay() + '[ ' + this.separator + ']*'), '');
|
||||
} // eo function onBeforeQuery
|
||||
// }}}
|
||||
// {{{
|
||||
/**
|
||||
* blur event handler - runs only when real blur event is fired
|
||||
*/
|
||||
,onRealBlur:function() {
|
||||
this.list.hide();
|
||||
var rv = this.getRawValue();
|
||||
var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *'));
|
||||
var va = [];
|
||||
var snapshot = this.store.snapshot || this.store.data;
|
||||
|
||||
// iterate through raw values and records and check/uncheck items
|
||||
Ext.each(rva, function(v) {
|
||||
snapshot.each(function(r) {
|
||||
if(v === r.get(this.displayField)) {
|
||||
va.push(r.get(this.valueField));
|
||||
}
|
||||
}, this);
|
||||
}, this);
|
||||
this.setValue(va.join(this.separator));
|
||||
this.store.clearFilter();
|
||||
} // eo function onRealBlur
|
||||
// }}}
|
||||
// {{{
|
||||
/**
|
||||
* Combo's onSelect override
|
||||
* @private
|
||||
* @param {Ext.data.Record} record record that has been selected in the list
|
||||
* @param {Number} index index of selected (clicked) record
|
||||
*/
|
||||
,onSelect:function(record, index) {
|
||||
if(this.fireEvent('beforeselect', this, record, index) !== false){
|
||||
|
||||
// toggle checked field
|
||||
record.set(this.checkField, !record.get(this.checkField));
|
||||
|
||||
// display full list
|
||||
if(this.store.isFiltered()) {
|
||||
this.doQuery(this.allQuery);
|
||||
}
|
||||
|
||||
// set (update) value and fire event
|
||||
this.setValue(this.getCheckedValue());
|
||||
this.fireEvent('select', this, record, index);
|
||||
}
|
||||
} // eo function onSelect
|
||||
// }}}
|
||||
// {{{
|
||||
/**
|
||||
* Sets the value of the LovCombo
|
||||
* @param {Mixed} v value
|
||||
*/
|
||||
,setValue:function(v) {
|
||||
if(v) {
|
||||
v = '' + v;
|
||||
if(this.valueField) {
|
||||
this.store.clearFilter();
|
||||
this.store.each(function(r) {
|
||||
var checked = !(!v.match(
|
||||
'(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))
|
||||
+'(' + this.separator + '|$)'))
|
||||
;
|
||||
|
||||
r.set(this.checkField, checked);
|
||||
}, this);
|
||||
this.value = this.getCheckedValue();
|
||||
this.setRawValue(this.getCheckedDisplay());
|
||||
if(this.hiddenField) {
|
||||
this.hiddenField.value = this.value;
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.value = v;
|
||||
this.setRawValue(v);
|
||||
if(this.hiddenField) {
|
||||
this.hiddenField.value = v;
|
||||
}
|
||||
}
|
||||
if(this.el) {
|
||||
this.el.removeClass(this.emptyClass);
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.clearValue();
|
||||
}
|
||||
} // eo function setValue
|
||||
// }}}
|
||||
// {{{
|
||||
/**
|
||||
* Selects all items
|
||||
*/
|
||||
,selectAll:function() {
|
||||
this.store.each(function(record){
|
||||
// toggle checked field
|
||||
record.set(this.checkField, true);
|
||||
}, this);
|
||||
|
||||
//display full list
|
||||
this.doQuery(this.allQuery);
|
||||
this.setValue(this.getCheckedValue());
|
||||
} // eo full selectAll
|
||||
// }}}
|
||||
// {{{
|
||||
/**
|
||||
* Deselects all items. Synonym for clearValue
|
||||
*/
|
||||
,deselectAll:function() {
|
||||
this.clearValue();
|
||||
} // eo full deselectAll
|
||||
// }}}
|
||||
|
||||
}); // eo extend
|
||||
|
||||
// register xtype
|
||||
Ext.reg('lovcombo', Ext.ux.form.LovCombo);
|
||||
Loading…
Add table
Reference in a new issue