diff options
Diffstat (limited to 'deluge/ui/web/js/extjs/ext-extensions/form')
6 files changed, 620 insertions, 0 deletions
diff --git a/deluge/ui/web/js/extjs/ext-extensions/form/FileUploadField.js b/deluge/ui/web/js/extjs/ext-extensions/form/FileUploadField.js new file mode 100644 index 0000000..ca15073 --- /dev/null +++ b/deluge/ui/web/js/extjs/ext-extensions/form/FileUploadField.js @@ -0,0 +1,208 @@ +/** + * Ext JS Library 3.4.0 + * Copyright(c) 2006-2011 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license + */ +Ext.ns('Ext.ux.form'); + +/** + * @class Ext.ux.form.FileUploadField + * @extends Ext.form.TextField + * Creates a file upload field. + * @xtype fileuploadfield + */ +Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, { + /** + * @cfg {String} buttonText The button text to display on the upload button (defaults to + * 'Browse...'). Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text + * value will be used instead if available. + */ + buttonText: 'Browse...', + /** + * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible + * text field (defaults to false). If true, all inherited TextField members will still be available. + */ + buttonOnly: false, + /** + * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field + * (defaults to 3). Note that this only applies if {@link #buttonOnly} = false. + */ + buttonOffset: 3, + + /** + * @cfg {Boolean} multiple True to select more than one file. (defaults to false). + * Note that this only applies if the HTML doc is using HTML5. + */ + multiple: false, + + /** + * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object. + */ + + // private + readOnly: true, + + /** + * @hide + * @method autoSize + */ + autoSize: Ext.emptyFn, + + // private + initComponent: function() { + Ext.ux.form.FileUploadField.superclass.initComponent.call(this); + + this.addEvents( + /** + * @event fileselected + * Fires when the underlying file input field's value has changed from the user + * selecting a new file from the system file selection dialog. + * @param {Ext.ux.form.FileUploadField} this + * @param {String} value The file value returned by the underlying file input field + */ + 'fileselected' + ); + }, + + // private + onRender: function(ct, position) { + Ext.ux.form.FileUploadField.superclass.onRender.call( + this, + ct, + position + ); + + this.wrap = this.el.wrap({ cls: 'x-form-field-wrap x-form-file-wrap' }); + this.el.addClass('x-form-file-text'); + this.el.dom.removeAttribute('name'); + this.createFileInput(); + + var btnCfg = Ext.applyIf(this.buttonCfg || {}, { + text: this.buttonText, + }); + this.button = new Ext.Button( + Ext.apply(btnCfg, { + renderTo: this.wrap, + cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : ''), + }) + ); + + if (this.buttonOnly) { + this.el.hide(); + this.wrap.setWidth(this.button.getEl().getWidth()); + } + + this.bindListeners(); + this.resizeEl = this.positionEl = this.wrap; + }, + + bindListeners: function() { + this.fileInput.on({ + scope: this, + mouseenter: function() { + this.button.addClass(['x-btn-over', 'x-btn-focus']); + }, + mouseleave: function() { + this.button.removeClass([ + 'x-btn-over', + 'x-btn-focus', + 'x-btn-click', + ]); + }, + mousedown: function() { + this.button.addClass('x-btn-click'); + }, + mouseup: function() { + this.button.removeClass([ + 'x-btn-over', + 'x-btn-focus', + 'x-btn-click', + ]); + }, + change: function() { + var value = this.fileInput.dom.files; + // Fallback to value. + if (!value) value = this.fileInput.dom.value; + this.setValue(value); + this.fireEvent('fileselected', this, value); + }, + }); + }, + + createFileInput: function() { + this.fileInput = this.wrap.createChild({ + id: this.getFileInputId(), + name: this.name || this.getId(), + cls: 'x-form-file', + tag: 'input', + type: 'file', + size: 1, + }); + this.fileInput.dom.multiple = this.multiple; + }, + + reset: function() { + if (this.rendered) { + this.fileInput.remove(); + this.createFileInput(); + this.bindListeners(); + } + Ext.ux.form.FileUploadField.superclass.reset.call(this); + }, + + // private + getFileInputId: function() { + return this.id + '-file'; + }, + + // private + onResize: function(w, h) { + Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h); + + this.wrap.setWidth(w); + + if (!this.buttonOnly) { + var w = + this.wrap.getWidth() - + this.button.getEl().getWidth() - + this.buttonOffset; + this.el.setWidth(w); + } + }, + + // private + onDestroy: function() { + Ext.ux.form.FileUploadField.superclass.onDestroy.call(this); + Ext.destroy(this.fileInput, this.button, this.wrap); + }, + + onDisable: function() { + Ext.ux.form.FileUploadField.superclass.onDisable.call(this); + this.doDisable(true); + }, + + onEnable: function() { + Ext.ux.form.FileUploadField.superclass.onEnable.call(this); + this.doDisable(false); + }, + + // private + doDisable: function(disabled) { + this.fileInput.dom.disabled = disabled; + this.button.setDisabled(disabled); + }, + + // private + preFocus: Ext.emptyFn, + + // private + alignErrorIcon: function() { + this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]); + }, +}); + +Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField); + +// backwards compat +Ext.form.FileUploadField = Ext.ux.form.FileUploadField; diff --git a/deluge/ui/web/js/extjs/ext-extensions/form/RadioGroupFix.js b/deluge/ui/web/js/extjs/ext-extensions/form/RadioGroupFix.js new file mode 100644 index 0000000..134e7a1 --- /dev/null +++ b/deluge/ui/web/js/extjs/ext-extensions/form/RadioGroupFix.js @@ -0,0 +1,50 @@ +/** + * Ext.ux.form.RadioGroup.js + * + * Copyright (c) Damien Churchill 2009-2010 <damoxc@gmail.com> + * + * This file is part of Deluge and is licensed under GNU General Public License 3.0, or later, with + * the additional special exception to link portions of this program with the OpenSSL library. + * See LICENSE for more details. + */ + +// Allow radiogroups to be treated as a single form element. +Ext.override(Ext.form.RadioGroup, { + afterRender: function() { + this.items.each(function(i) { + this.relayEvents(i, ['check']); + }, this); + if (this.lazyValue) { + this.setValue(this.value); + delete this.value; + delete this.lazyValue; + } + Ext.form.RadioGroup.superclass.afterRender.call(this); + }, + + getName: function() { + return this.items.first().getName(); + }, + + getValue: function() { + return this.items.first().getGroupValue(); + }, + + setValue: function(v) { + if (!this.items.each) { + this.value = v; + this.lazyValue = true; + return; + } + this.items.each(function(item) { + if (item.rendered) { + var checked = item.el.getValue() == String(v); + item.el.dom.checked = checked; + item.el.dom.defaultChecked = checked; + item.wrap[checked ? 'addClass' : 'removeClass']( + item.checkedCls + ); + } + }); + }, +}); diff --git a/deluge/ui/web/js/extjs/ext-extensions/form/SpinnerField.js b/deluge/ui/web/js/extjs/ext-extensions/form/SpinnerField.js new file mode 100644 index 0000000..d14f320 --- /dev/null +++ b/deluge/ui/web/js/extjs/ext-extensions/form/SpinnerField.js @@ -0,0 +1,68 @@ +/** + * Ext JS Library 3.4.0 + * Copyright(c) 2006-2011 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license + */ +Ext.ns('Ext.ux.form'); + +/** + * @class Ext.ux.form.SpinnerField + * @extends Ext.form.NumberField + * Creates a field utilizing Ext.ux.Spinner + * @xtype spinnerfield + */ +Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, { + actionMode: 'wrap', + deferHeight: true, + autoSize: Ext.emptyFn, + onBlur: Ext.emptyFn, + adjustSize: Ext.BoxComponent.prototype.adjustSize, + + constructor: function(config) { + var spinnerConfig = Ext.copyTo( + {}, + config, + 'incrementValue,alternateIncrementValue,accelerate,defaultValue,triggerClass,splitterClass' + ); + + var spl = (this.spinner = new Ext.ux.Spinner(spinnerConfig)); + + var plugins = config.plugins + ? Ext.isArray(config.plugins) + ? config.plugins.push(spl) + : [config.plugins, spl] + : spl; + + Ext.ux.form.SpinnerField.superclass.constructor.call( + this, + Ext.apply(config, { plugins: plugins }) + ); + }, + + // private + getResizeEl: function() { + return this.wrap; + }, + + // private + getPositionEl: function() { + return this.wrap; + }, + + // private + alignErrorIcon: function() { + if (this.wrap) { + this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]); + } + }, + + validateBlur: function() { + return true; + }, +}); + +Ext.reg('spinnerfield', Ext.ux.form.SpinnerField); + +//backwards compat +Ext.form.SpinnerField = Ext.ux.form.SpinnerField; diff --git a/deluge/ui/web/js/extjs/ext-extensions/form/SpinnerFieldFix.js b/deluge/ui/web/js/extjs/ext-extensions/form/SpinnerFieldFix.js new file mode 100644 index 0000000..6784ae0 --- /dev/null +++ b/deluge/ui/web/js/extjs/ext-extensions/form/SpinnerFieldFix.js @@ -0,0 +1,13 @@ +/** + * Ext.ux.form.SpinnerField.js + * + * Copyright (c) Damien Churchill 2010 <damoxc@gmail.com> + * + * This file is part of Deluge and is licensed under GNU General Public License 3.0, or later, with + * the additional special exception to link portions of this program with the OpenSSL library. + * See LICENSE for more details. + */ + +Ext.override(Ext.ux.form.SpinnerField, { + onBlur: Ext.form.Field.prototype.onBlur, +}); diff --git a/deluge/ui/web/js/extjs/ext-extensions/form/SpinnerGroup.js b/deluge/ui/web/js/extjs/ext-extensions/form/SpinnerGroup.js new file mode 100644 index 0000000..eafc4e1 --- /dev/null +++ b/deluge/ui/web/js/extjs/ext-extensions/form/SpinnerGroup.js @@ -0,0 +1,206 @@ +/** + * Ext.ux.form.SpinnerGroup.js + * + * Copyright (c) Damien Churchill 2009-2010 <damoxc@gmail.com> + * + * This file is part of Deluge and is licensed under GNU General Public License 3.0, or later, with + * the additional special exception to link portions of this program with the OpenSSL library. + * See LICENSE for more details. + */ +Ext.ns('Ext.ux.form'); + +/** + * + */ +Ext.ux.form.SpinnerGroup = Ext.extend(Ext.form.CheckboxGroup, { + // private + defaultType: 'spinnerfield', + anchor: '98%', + + // private + groupCls: 'x-form-spinner-group', + + colCfg: {}, + + // private + onRender: function(ct, position) { + if (!this.el) { + var panelCfg = { + cls: this.groupCls, + layout: 'column', + border: false, + renderTo: ct, + }; + var colCfg = Ext.apply( + { + defaultType: this.defaultType, + layout: 'form', + border: false, + labelWidth: 60, + defaults: { + hideLabel: true, + anchor: '60%', + }, + }, + this.colCfg + ); + + if (this.items[0].items) { + // The container has standard ColumnLayout configs, so pass them in directly + + Ext.apply(panelCfg, { + layoutConfig: { columns: this.items.length }, + defaults: this.defaults, + items: this.items, + }); + for (var i = 0, len = this.items.length; i < len; i++) { + Ext.applyIf(this.items[i], colCfg); + } + } else { + // The container has field item configs, so we have to generate the column + // panels first then move the items into the columns as needed. + + var numCols, + cols = []; + + if (typeof this.columns == 'string') { + // 'auto' so create a col per item + this.columns = this.items.length; + } + if (!Ext.isArray(this.columns)) { + var cs = []; + for (var i = 0; i < this.columns; i++) { + cs.push((100 / this.columns) * 0.01); // distribute by even % + } + this.columns = cs; + } + + numCols = this.columns.length; + + // Generate the column configs with the correct width setting + for (var i = 0; i < numCols; i++) { + var cc = Ext.apply({ items: [] }, colCfg); + cc[ + this.columns[i] <= 1 ? 'columnWidth' : 'width' + ] = this.columns[i]; + if (this.defaults) { + cc.defaults = Ext.apply( + cc.defaults || {}, + this.defaults + ); + } + cols.push(cc); + } + + // Distribute the original items into the columns + if (this.vertical) { + var rows = Math.ceil(this.items.length / numCols), + ri = 0; + for (var i = 0, len = this.items.length; i < len; i++) { + if (i > 0 && i % rows == 0) { + ri++; + } + if (this.items[i].fieldLabel) { + this.items[i].hideLabel = false; + } + cols[ri].items.push(this.items[i]); + } + } else { + for (var i = 0, len = this.items.length; i < len; i++) { + var ci = i % numCols; + if (this.items[i].fieldLabel) { + this.items[i].hideLabel = false; + } + cols[ci].items.push(this.items[i]); + } + } + + Ext.apply(panelCfg, { + layoutConfig: { columns: numCols }, + items: cols, + }); + } + + this.panel = new Ext.Panel(panelCfg); + this.el = this.panel.getEl(); + + if (this.forId && this.itemCls) { + var l = this.el.up(this.itemCls).child('label', true); + if (l) { + l.setAttribute('htmlFor', this.forId); + } + } + + var fields = this.panel.findBy(function(c) { + return c.isFormField; + }, this); + + this.items = new Ext.util.MixedCollection(); + this.items.addAll(fields); + + this.items.each(function(field) { + field.on('spin', this.onFieldChange, this); + field.on('change', this.onFieldChange, this); + }, this); + + if (this.lazyValueSet) { + this.setValue(this.value); + delete this.value; + delete this.lazyValueSet; + } + + if (this.lazyRawValueSet) { + this.setRawValue(this.rawValue); + delete this.rawValue; + delete this.lazyRawValueSet; + } + } + + Ext.ux.form.SpinnerGroup.superclass.onRender.call(this, ct, position); + }, + + onFieldChange: function(spinner) { + this.fireEvent('change', this, this.getValue()); + }, + + initValue: Ext.emptyFn, + + getValue: function() { + var value = [this.items.getCount()]; + this.items.each(function(item, i) { + value[i] = Number(item.getValue()); + }); + return value; + }, + + getRawValue: function() { + var value = [this.items.getCount()]; + this.items.each(function(item, i) { + value[i] = Number(item.getRawValue()); + }); + return value; + }, + + setValue: function(value) { + if (!this.rendered) { + this.value = value; + this.lazyValueSet = true; + } else { + this.items.each(function(item, i) { + item.setValue(value[i]); + }); + } + }, + + setRawValue: function(value) { + if (!this.rendered) { + this.rawValue = value; + this.lazyRawValueSet = true; + } else { + this.items.each(function(item, i) { + item.setRawValue(value[i]); + }); + } + }, +}); +Ext.reg('spinnergroup', Ext.ux.form.SpinnerGroup); diff --git a/deluge/ui/web/js/extjs/ext-extensions/form/ToggleField.js b/deluge/ui/web/js/extjs/ext-extensions/form/ToggleField.js new file mode 100644 index 0000000..27eebf3 --- /dev/null +++ b/deluge/ui/web/js/extjs/ext-extensions/form/ToggleField.js @@ -0,0 +1,75 @@ +/** + * Ext.ux.form.ToggleField.js + * + * Copyright (c) Damien Churchill 2009-2010 <damoxc@gmail.com> + * + * This file is part of Deluge and is licensed under GNU General Public License 3.0, or later, with + * the additional special exception to link portions of this program with the OpenSSL library. + * See LICENSE for more details. + */ +Ext.namespace('Ext.ux.form'); + +/** + * Ext.ux.form.ToggleField class + * + * @author Damien Churchill + * @version v0.1 + * + * @class Ext.ux.form.ToggleField + * @extends Ext.form.TriggerField + */ +Ext.ux.form.ToggleField = Ext.extend(Ext.form.Field, { + cls: 'x-toggle-field', + + initComponent: function() { + Ext.ux.form.ToggleField.superclass.initComponent.call(this); + + this.toggle = new Ext.form.Checkbox(); + this.toggle.on('check', this.onToggleCheck, this); + + this.input = new Ext.form.TextField({ + disabled: true, + }); + }, + + onRender: function(ct, position) { + if (!this.el) { + this.panel = new Ext.Panel({ + cls: this.groupCls, + layout: 'table', + layoutConfig: { + columns: 2, + }, + border: false, + renderTo: ct, + }); + this.panel.ownerCt = this; + this.el = this.panel.getEl(); + + this.panel.add(this.toggle); + this.panel.add(this.input); + this.panel.doLayout(); + + this.toggle + .getEl() + .parent() + .setStyle('padding-right', '10px'); + } + Ext.ux.form.ToggleField.superclass.onRender.call(this, ct, position); + }, + + // private + onResize: function(w, h) { + this.panel.setSize(w, h); + this.panel.doLayout(); + + // we substract 10 for the padding :-) + var inputWidth = w - this.toggle.getSize().width - 25; + this.input.setSize(inputWidth, h); + }, + + onToggleCheck: function(toggle, checked) { + this.input.setDisabled(!checked); + }, +}); +Ext.reg('togglefield', Ext.ux.form.ToggleField); |