From d90a4f499b577ff15d88fb2f3d7ed11cce24367f Mon Sep 17 00:00:00 2001 From: Andreas Brachold Date: Tue, 22 Sep 2009 18:55:36 +0000 Subject: * jason update search fields placement --- skins/jason/files.lst | 8 +- skins/jason/now.js | 21 +- skins/jason/program.js | 6 +- skins/jason/ux/Ext.ux.SlideZone.js | 637 ------------------------------------- skins/jason/ux/Multiselect.js | 323 +++++++++++++++++++ skins/jason/ux/Search.js | 204 ++++++++++++ skins/jason/ux/SlideZone.js | 637 +++++++++++++++++++++++++++++++++++++ skins/jason/ux/TabCloseMenu.js | 52 +++ skins/jason/ux/filter.js | 225 ------------- skins/jason/ux/multiselect.js | 323 ------------------- skins/jason/ux/tabclosemenu.js | 52 --- 11 files changed, 1232 insertions(+), 1256 deletions(-) delete mode 100644 skins/jason/ux/Ext.ux.SlideZone.js create mode 100644 skins/jason/ux/Multiselect.js create mode 100644 skins/jason/ux/Search.js create mode 100644 skins/jason/ux/SlideZone.js create mode 100644 skins/jason/ux/TabCloseMenu.js delete mode 100644 skins/jason/ux/filter.js delete mode 100644 skins/jason/ux/multiselect.js delete mode 100644 skins/jason/ux/tabclosemenu.js diff --git a/skins/jason/files.lst b/skins/jason/files.lst index e46a58f..73847c8 100644 --- a/skins/jason/files.lst +++ b/skins/jason/files.lst @@ -3,10 +3,10 @@ extjs/adapter/ext/ext-base.js \ extjs/ext-all.js \ fixes.js \ ux/DDView.js \ -ux/multiselect.js \ -ux/tabclosemenu.js \ -ux/filter.js \ -ux/Ext.ux.SlideZone.js \ +ux/Multiselect.js \ +ux/TabCloseMenu.js \ +ux/Search.js \ +ux/SlideZone.js \ common.js \ reader.js \ help.js \ diff --git a/skins/jason/now.js b/skins/jason/now.js index 40befbe..515dde9 100644 --- a/skins/jason/now.js +++ b/skins/jason/now.js @@ -58,7 +58,7 @@ Ext.xxv.NowGrid = function(viewer) { range.push([configuration.periods[i],configuration.periods[i]]); } - var timefield = new Ext.form.ComboBox({ + this.timefield = new Ext.form.ComboBox({ id:'timefield' ,width:75 ,store: new Ext.data.Store({ @@ -132,9 +132,13 @@ Ext.xxv.NowGrid = function(viewer) { pageSize: configuration.pageSize ,store: this.store ,displayInfo: true - ,items:['->', timefield ] }) - }); + }); + + var tbPosition = 15 + var tb = this.topToolbar; + tb.insert(tbPosition+0, '-'); + tb.insert(tbPosition+1, this.timefield); this.store.on({ 'load' : this.onLoad @@ -175,18 +179,11 @@ Ext.extend(Ext.xxv.NowGrid, Ext.grid.GridPanel, { new Ext.xxv.MessageBox().msgFailure(this.szLoadException, e); } ,onBeforeLoad : function( store, opt ) { - var tf = Ext.getCmp('timefield'); - if(!tf) return; - if(this.getTopToolbar().displayEl) { - var size = tf.getSize(); - this.getTopToolbar().displayEl.setRight(30+size.width); - } delete(this.store.baseParams['data']); - - var time = tf.lastQuery; - if(!time || time == '') time = tf.getValue(); + var time = this.timefield.lastQuery; + if(!time || time == '') time = this.timefield.getValue(); if(!time || time == this.szPresent) { store.baseParams.cmd = 'n'; } else if(time == this.szFollowing) { diff --git a/skins/jason/program.js b/skins/jason/program.js index 4fdc5f1..b3523cf 100644 --- a/skins/jason/program.js +++ b/skins/jason/program.js @@ -97,9 +97,9 @@ Ext.xxv.programGrid = function(viewer, record) { ,showGroupName: false }) ,tbar:new Ext.PagingToolbar({ - pageSize: configuration.pageSize, - store: this.store, - displayInfo: true + pageSize: configuration.pageSize + ,store: this.store + ,displayInfo: true }) ,plugins:[this.filter] }); diff --git a/skins/jason/ux/Ext.ux.SlideZone.js b/skins/jason/ux/Ext.ux.SlideZone.js deleted file mode 100644 index df657dc..0000000 --- a/skins/jason/ux/Ext.ux.SlideZone.js +++ /dev/null @@ -1,637 +0,0 @@ -/** - * Class Ext.ux.SlideZone - * @author Jared Gisin - * @version $Id: Ext.ux.SlideZone.js 93 2007-12-12 04:41:40Z jaredgisin $ - * @license http://www.opensource.org/licenses/mit-license.php - * - * TODO: make sure slider limits work when snap = 1 or snap < slider width/height - * TODO: API to dynamically modify the snap - * TODO: zone with slider zone responds to click and keypress - * TODO: API to programatically set slider value with animation - * - */ - -Ext.ux.SlideZone = function(id, config) { - if(id) { - Ext.apply(this, config); - this.init(id, config || {}); - } else { - return false; - } -} - -Ext.extend(Ext.ux.SlideZone, Ext.BoxComponent, { - size: 100, - sliderSnap: [0], - type: 'horizontal', - sliderWidth: 20, - sliderHeight: 20, - cls: null, - minValue: 0, - maxValue: 100, - allowSliderCrossing: true, - value: null, - - init: function(id, config) { - this.size = this.size instanceof Array ? this.size : [this.size]; - this.minValue = this.minValue instanceof Array ? this.minValue : [this.minValue]; - this.maxValue = this.maxValue instanceof Array ? this.maxValue : [this.maxValue]; - this.sliderSnap = this.sliderSnap instanceof Array ? this.sliderSnap : [this.sliderSnap]; - - this.el = Ext.DomHelper.append(Ext.get(id), { tag: 'div', - id: Ext.id(), - style: 'position: relative; ' - }, true); - this.el.addClass('x-slide-zone-' + this.type); - this.el.addClass(this.cls); - - switch(this.type) { - case 'horizontal': - this.sliderSize = [this.sliderWidth]; - this.el.applyStyles({width:this.size[0] + 'px'}); - this.el.lowLimit = [this.el.getX()]; - this.el.highLimit = [this.el.getRight()]; - break; - - case 'vertical': - this.sliderSize = [this.sliderHeight] - this.el.applyStyles({height:this.size[0] + 'px'}); - this.el.lowLimit = [this.el.getY()]; - this.el.highLimit = [this.el.getBottom()]; - break; - - case 'area': - this.sliderSize = [this.sliderWidth, this.sliderHeight]; - this.el.applyStyles({width:this.size[0] + 'px'}); - this.el.applyStyles({height:this.size[1] + 'px'}); - this.el.lowLimit = this.el.getXY(); - this.el.highLimit = [this.el.getRight(), this.el.getBottom()]; - break - } - - //normalize width/height for slider centering calculations - var l = this.sliderSize.length; - for(var i = 0; i < l; i++) { - this.sliderSize[i] = this.sliderSize[i] % 2 ? this.sliderSize[i] + 1: this.sliderSize[i] - } - - - var s = this.sliders; - this.sliders = new Ext.util.MixedCollection(); - if(s){ - this.add.apply(this, s); - } - - }, - - add: function(){ - var a = arguments, l = a.length - for(var i = 0; i < l; i++){ - var el = a[i]; - if (el instanceof Ext.ux.Slider) { - this.initSlider(el); - this.sliders.add(el) - } else if (typeof el == 'object') { - //initalize new slider and add to the items list - var s = new Ext.ux.ThumbSlider(el); - this.initSlider(s); - this.sliders.add(s) - } - } - this.updateValues(); - this.updateConstraints(); - }, - - enableCrossing: function() { - this.allowSliderCrossing = true; - this.updateConstraints(); - }, - - disableCrossing: function() { - this.allowSliderCrossing = false; - this.updateConstraints(); - }, - - getSlider: function(selector) { - /* Given a slider index or name, returns a slider object - * @selector slider index|name - */ - switch (typeof selector) { - case 'number': - return this.sliders.items[selector]; - break; - - case 'string': - var l = this.sliders.length; - for(var i = 0; i < l; i++){ - if(this.sliders.items[i].name == selector) return this.sliders.items[i]; - } - break; - } - }, - - - updateConstraints: function() { - if(!this.allowSliderCrossing && this.sliders.length > 1 && this.type != 'area') { - // multiple sliders exists and sliders can't cross, - // so we have to take into account the - // positions of all sliders - sortFN = function(a,b){ - var v1 = a.value instanceof Array ? a.value[0] : a.value; - var v2 = b.value instanceof Array ? b.value[0] : b.value; - return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0); - } - this.sliders.sort('asc',sortFN);//put in order by their value - - var l = this.sliders.length; - for (var i=0; i< l; i++) { //forloop required, as we have to get -1 and +1 slider positions - var leftTravel = 0, rightTravel = 0; - var sliderL = this.sliders.get(i-1); - var slider = this.sliders.get(i); - var sliderR = this.sliders.get(i+1); - - - if (sliderL && sliderR) { - if (sliderL instanceof Ext.ux.ThumbSlider) { - var leftTravel = slider.getTL()[0] - sliderL.getTL()[0] - this.sliderSnap[0]; - } - if (sliderL instanceof Ext.ux.RangeSlider) { - var leftTravel = slider.getTL()[0] - sliderL.getBR()[0] - this.sliderSnap[0]; - } - if (sliderR instanceof Ext.ux.ThumbSlider) { - var rightTravel = sliderR.getTL()[0] - slider.getTL()[0] - this.sliderSnap[0]; - } - if (sliderR instanceof Ext.ux.RangeSlider) { - var rightTravel = sliderR.getTL()[0] - slider.getBR()[0] - this.sliderSnap[0] ; - } - } else if(sliderL) { - if (sliderL instanceof Ext.ux.ThumbSlider) { - var rightTravel = this.el.highLimit[0] - slider.getTL()[0] - ( 0.5 * this.sliderSize[0]) ; - var leftTravel = slider.getTL()[0] - sliderL.getTL()[0] - this.sliderSnap[0]; - } - if (sliderL instanceof Ext.ux.RangeSlider) { - var rightTravel = this.el.highLimit[0] - slider.getBR()[0]; - var leftTravel = slider.getTL()[0] - sliderL.getBR()[0] - this.sliderSnap[0]; - } - } else if(sliderR) { - if (sliderR instanceof Ext.ux.ThumbSlider) { - var leftTravel = slider.getTL()[0] - this.el.lowLimit[0] + ( 0.5 * this.sliderSize[0]); - var rightTravel = sliderR.getTL()[0] - slider.getTL()[0] - this.sliderSnap[0] ; - } - if (sliderR instanceof Ext.ux.RangeSlider) { - var leftTravel = slider.getTL()[0] - this.el.lowLimit[0]; - var rightTravel = sliderR.getTL()[0] - slider.getBR()[0] - this.sliderSnap[0] ; - } - } - if(slider instanceof Ext.ux.RangeSlider) { - slider.resizable.leftTravel = [leftTravel]; - slider.resizable.rightTravel = [rightTravel]; - } - slider.setConstraint([leftTravel], [rightTravel], this.sliderSnap); - } - } else { - var l = this.sliders.length; - for (var i=0; i< l; i++) { - var slider = this.sliders.get(i); - if (slider instanceof Ext.ux.ThumbSlider ) { - slider.setConstraint([slider.getTL()[0]-this.el.lowLimit[0] + ( 1/2 * this.sliderSize[0]), - slider.getTL()[1]-this.el.lowLimit[1] + ( 1/2 * this.sliderSize[1])], - [this.el.highLimit[0]- (slider.getTL()[0] + this.sliderSize[0]) + ( 1/2 * this.sliderSize[0]), - this.el.highLimit[1]- (slider.getTL()[1] + this.sliderSize[1]) + ( 1/2 * this.sliderSize[1]) ], - this.sliderSnap) - } - if (slider instanceof Ext.ux.RangeSlider) { - slider.setConstraint([slider.getTL()[0] - this.el.lowLimit[0], - slider.getTL()[1] - this.el.lowLimit[1]], - [this.el.highLimit[0] - slider.getBR()[0], - this.el.highLimit[1] - slider.getBR()[1] ], - this.sliderSnap) - } - } - } - }, - - updateValues: function() { - var that = this; - var vals = {}; - this.sliders.each(function(i) { - - if(this.type == 'area') { - if (i instanceof Ext.ux.ThumbSlider) { - i.value = [(i.getTL()[0] + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0], - (i.getTL()[1] + 1/2 * that.sliderSize[1] - that.el.lowLimit[1]) / (that.size[1]) * (that.maxValue[1] - that.minValue[1]) + that.minValue[1]]; - i.percent = [parseFloat((i.getTL()[0] + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * 100), - parseFloat((i.getTL()[1] + 1/2 * that.sliderSize[1] - that.el.lowLimit[1]) / (that.size[1]) * 100)]; - } - if (i instanceof Ext.ux.RangeSlider) { - i.value = [[ - (i.getTL()[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0], - (i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0] - - - ],[ - (i.getTL()[1] - that.el.lowLimit[1]) / (that.size[1]) * (that.maxValue[1] - that.minValue[1]) + that.minValue[1], - (i.getBR()[1] - that.el.lowLimit[1]) / (that.size[1]) * (that.maxValue[1] - that.minValue[1]) + that.minValue[1] - ]]; - i.percent = [[ - parseFloat((i.getTL()[0] - that.el.lowLimit[0]) / (that.size[0]) * 100).toFixed(2), - parseFloat((i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * 100).toFixed(2) - ],[ - parseFloat((i.getTL()[1] - that.el.lowLimit[1]) / (that.size[1]) * 100).toFixed(2), - parseFloat((i.getBR()[1] - that.el.lowLimit[1]) / (that.size[1]) * 100).toFixed(2) - ]]; - } - } else { - if (i instanceof Ext.ux.ThumbSlider) { - i.value = (i.getTL()[0] + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0]; - i.percent = parseFloat((i.getTL()[0] + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * 100); - } - if (i instanceof Ext.ux.RangeSlider) { - i.value = [(i.getTL()[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0], - (i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0]]; - i.percent = [ parseFloat((i.getTL()[0] - that.el.lowLimit[0]) / (that.size[0]) * 100), - parseFloat((i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * 100)]; - } - } - vals[this.name] = this.value; - }); - - this.value = vals; - }, - - initSliderPosition: function(slider) { - /* Sets a sliders's initial position within the slide zone. - * If slideZone has a sliderSnap set, the slider - * is positioned at a multiple of the sliderSnap value that is - * closest where the slider's value would otherwise position it. - * After positioning, the slider's actual value will be modified - * in Ext.ux.SlideZone.updateValues() - * to jibe with the actual position in the slide zone given the - * sliderSnap constraint. - */ - var initialPosition = [0,0]; - slider.repositionDelta = [0,0]; - var l = this.type == 'area' ? 2 : 1; - for(var i=0; i < l; i++ ) { - /* Make sure initial value is in slider bar range, - if it's outside, set to closest limit. - The slider value is modified if it's out of range. */ - if(slider.value instanceof Array) { - if (slider instanceof Ext.ux.ThumbSlider) { - - slider.value[i] = Number(slider.value[i]).constrain(this.minValue[i], this.maxValue[i]); - initialPosition[i] = parseInt((slider.value[i] - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]); - } - if (slider instanceof Ext.ux.RangeSlider) { - switch (this.type) { - case 'horizontal': - case 'vertical': - slider.value[i] = Number(slider.value[i]).constrain(this.minValue[i], this.maxValue[i]); - initialPosition[i] = parseInt((slider.value[i] - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]); - break; - - case 'area': - slider.value[i][0] = Number(slider.value[i][0]).constrain(this.minValue[i], this.maxValue[i]); - slider.value[i][1] = Number(slider.value[i][1]).constrain(this.minValue[i], this.maxValue[i]); - - initialPosition[i] = parseInt((slider.value[i][0] - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]); - - break; - } - } - } else { - slider.value = Number(slider.value).constrain(this.minValue[i], this.maxValue[i]); - initialPosition[i] = parseInt((slider.value - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]); - } - - /* Calculate slider value versus closest snap-to location, - and calculate an offset value to apply when positioning it. */ - if (this.sliderSnap[i] > 1) { - var positionToSnapDiff = [0,0]; - positionToSnapDiff[i] = (initialPosition[i] - this.el.lowLimit[i]) % this.sliderSnap[i]; - if (positionToSnapDiff[i]) { - if(positionToSnapDiff[i] < 1/2 * this.sliderSnap[i]) { - slider.repositionDelta[i] = -positionToSnapDiff[i]; - } else { - slider.repositionDelta[i] = this.sliderSnap[i] - positionToSnapDiff[i]; - } - } - } - } - - if (slider instanceof Ext.ux.ThumbSlider) { - slider.setPosition([initialPosition[0] + slider.repositionDelta[0] - (0.5 * this.sliderSize[0]), - initialPosition[1] + slider.repositionDelta[1] - (0.5 * this.sliderSize[1])]); - } - if (slider instanceof Ext.ux.RangeSlider) { - - slider.setPosition([initialPosition[0] + slider.repositionDelta[0], - initialPosition[1] + slider.repositionDelta[1]]); - } - }, - - initSlider: function(slider) { - slider.init(this); - this.initSliderPosition(slider); - } - -}); - - -Ext.ux.Slider = function(config) { - - Ext.apply(this, config); - - this.addEvents( { - "dragstart" : true, - "dragend" : true, - "drag" : true, - "mouseover":true, - "mouseout":true - }); -} - -Ext.extend(Ext.ux.Slider, Ext.BoxComponent, { - value: 0, - ddEl: null, - name: null, - cls: null, - allowMove:true, - - init: function() { - //Do nothing - }, - - getTL: function() { - switch(this.type) { - case 'horizontal': - return [this.el.getX()]; - break; - - case 'vertical': - return [this.el.getY()]; - break; - - case 'area': - return this.el.getXY(); - break; - } - }, - - getBR: function() { - switch(this.type) { - case 'horizontal': - return [this.el.getRight()]; - break; - - case 'vertical': - return [this.el.getBottom()]; - break; - - case 'area': - return [this.el.getRight(), this.el.getBottom()]; - break; - } - - }, - - setPosition: function(position) { - var l = position.length; - for (i=0; i 0 ? box.right - this.startBox.right + this.startPoint[0] : tgt[0], - tgt[1] - box.top < 0 ? box.top - this.startBox.y + this.startPoint[1] : tgt[1] - box.bottom > 0 ? box.bottom - this.startBox.bottom + this.startPoint[1] : tgt[1] - ]; - - Ext.Resizable.prototype.onMouseMove.call(this, e); - slideZoneInstance.updateValues(); - sliderInstance.fireEvent('drag', sliderInstance); - }; - - this.resizable.on('resize', function(width, height) { - slideZoneInstance.updateConstraints(); - slideZoneInstance.updateValues(); - sliderInstance.fireEvent('dragend', sliderInstance); - }) - - this.el.on('mouseover', function() { - sliderInstance.fireEvent('mouseover', sliderInstance); - sliderInstance.el.setStyle('cursor', sliderInstance.pointer); - }); - this.el.on('mouseout', function() { - sliderInstance.fireEvent('mouseout', sliderInstance); - sliderInstance.el.setStyle('cursor', 'default'); - }); - this.ddEl.onMouseDown = function(x, y) { - sliderInstance.fireEvent('dragstart', sliderInstance); - }; - this.ddEl.onMouseUp = function(x, y) { - slideZoneInstance.updateConstraints(); - slideZoneInstance.updateValues(); - sliderInstance.fireEvent('dragend', sliderInstance) - }; - this.ddEl.onDrag = function(e) { - slideZoneInstance.updateValues(); - sliderInstance.fireEvent('drag', sliderInstance); - }; - } - Ext.ux.ThumbSlider.superclass.init.call(parentSlideZone); - - } -}); diff --git a/skins/jason/ux/Multiselect.js b/skins/jason/ux/Multiselect.js new file mode 100644 index 0000000..d52dbe8 --- /dev/null +++ b/skins/jason/ux/Multiselect.js @@ -0,0 +1,323 @@ +/* + * Ext JS Library 2.2 + * Copyright(c) 2006-2008, Ext JS, LLC. + * licensing@extjs.com + * + * http://extjs.com/license + */ + +/* + * Note that this control should still be treated as an example and that the API will most likely + * change once it is ported into the Ext core as a standard form control. This is still planned + * for a future release, so this should not yet be treated as a final, stable API at this time. + */ + +/** + * @class Ext.ux.MultiSelect + * @extends Ext.form.Field + * A control that allows selection and form submission of multiple list items. The MultiSelect control + * depends on the Ext.ux.DDView class to provide drag/drop capability both within the list and also + * between multiple MultiSelect controls (see the Ext.ux.ItemSelector). + * + * @history + * 2008-06-19 bpm Original code contributed by Toby Stuart + * 2008-06-19 bpm Docs and demo code clean up + * + * @constructor + * Create a new MultiSelect + * @param {Object} config Configuration options + */ +Ext.ux.Multiselect = Ext.extend(Ext.form.Field, { + /** + * @cfg {String} legend Wraps the object with a fieldset and specified legend. + */ + /** + * @cfg {Store} store The {@link Ext.data.Store} used by the underlying Ext.ux.DDView. + */ + /** + * @cfg {Ext.ux.DDView} view The Ext.ux.DDView used to render the multiselect list. + */ + /** + * @cfg {String/Array} dragGroup The ddgroup name(s) for the DDView's DragZone (defaults to undefined). + */ + /** + * @cfg {String/Array} dropGroup The ddgroup name(s) for the DDView's DropZone (defaults to undefined). + */ + /** + * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a + * toolbar config, or an array of buttons/button configs to be added to the toolbar. + */ + /** + * @cfg {String} fieldName The name of the field to sort by when sorting is enabled. + */ + /** + * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled + * (use for lists which are sorted, defaults to false). + */ + appendOnly:false, + /** + * @cfg {Array} dataFields Inline data definition when not using a pre-initialised store. Known to cause problems + * in some browswers for very long lists. Use store for large datasets. + */ + dataFields:[], + /** + * @cfg {Array} data Inline data when not using a pre-initialised store. Known to cause problems in some + * browswers for very long lists. Use store for large datasets. + */ + data:[], + /** + * @cfg {Number} width Width in pixels of the control (defaults to 100). + */ + width:100, + /** + * @cfg {Number} height Height in pixels of the control (defaults to 100). + */ + height:100, + /** + * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0). + */ + displayField:0, + /** + * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1). + */ + valueField:1, + /** + * @cfg {Boolean} allowBlank True to require at least one item in the list to be selected, false to allow no + * selection (defaults to true). + */ + allowBlank:true, + /** + * @cfg {Number} minLength Minimum number of selections allowed (defaults to 0). + */ + minLength:0, + /** + * @cfg {Number} maxLength Maximum number of selections allowed (defaults to Number.MAX_VALUE). + */ + maxLength:Number.MAX_VALUE, + /** + * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as + * {@link Ext.form.TextField#blankText}. + */ + blankText:Ext.form.TextField.prototype.blankText, + /** + * @cfg {String} minLengthText Validation message displayed when {@link #minLength} is not met (defaults to 'Minimum {0} + * item(s) required'). The {0} token will be replaced by the value of {@link #minLength}. + */ + minLengthText:'Minimum {0} item(s) required', + /** + * @cfg {String} maxLengthText Validation message displayed when {@link #maxLength} is not met (defaults to 'Maximum {0} + * item(s) allowed'). The {0} token will be replaced by the value of {@link #maxLength}. + */ + maxLengthText:'Maximum {0} item(s) allowed', + /** + * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values + * (defaults to ','). + */ + delimiter:',', + + // DDView settings + copy:false, + allowDup:false, + allowTrash:false, + focusClass:undefined, + sortDir:'ASC', + + // private + defaultAutoCreate : {tag: "div"}, + + // private + initComponent: function(){ + Ext.ux.Multiselect.superclass.initComponent.call(this); + this.addEvents({ + 'dblclick' : true, + 'click' : true, + 'change' : true, + 'drop' : true + }); + }, + + // private + onRender: function(ct, position){ + Ext.ux.Multiselect.superclass.onRender.call(this, ct, position); + + var cls = 'ux-mselect'; + var fs = new Ext.form.FieldSet({ + renderTo:this.el, + title:this.legend, + height:this.height, + width:this.width, + style:"padding:0;", + tbar:this.tbar + }); + //if(!this.legend)fs.el.down('.'+fs.headerCls).remove(); + fs.body.addClass(cls); + + if(!this.tpl){ /*** add by anbr - allow overwrite template external ***/ + this.tpl = '
'; + } + if(!this.store){ + this.store = new Ext.data.SimpleStore({ + fields: this.dataFields, + data : this.data + }); + } + + this.view = new Ext.ux.DDView({ + multiSelect: true, + store: this.store, + selectedClass: cls+"-selected", + tpl:this.tpl, + allowDup:this.allowDup, + copy: this.copy, + allowTrash: this.allowTrash, + dragGroup: this.dragGroup, + dropGroup: this.dropGroup, + itemSelector:"."+cls+"-item", + isFormField:false, + applyTo:fs.body, + appendOnly:this.appendOnly, + sortField:this.sortField, + sortDir:this.sortDir + }); + + fs.add(this.view); + + this.view.on('click', this.onViewClick, this); + this.view.on('beforeClick', this.onViewBeforeClick, this); + this.view.on('dblclick', this.onViewDblClick, this); + this.view.on('drop', function(ddView, n, dd, e, data){ + return this.fireEvent("drop", ddView, n, dd, e, data); + }, this); + + this.hiddenName = this.name; + var hiddenTag={tag: "input", type: "hidden", value: "", name:this.name}; + if (this.isFormField) { + this.hiddenField = this.el.createChild(hiddenTag); + } else { + this.hiddenField = Ext.get(document.body).createChild(hiddenTag); + } + if(this.value) { /*** add by anbr - allow create initial data ***/ + this.setValue(this.value); + } + fs.doLayout(); + }, + + // private + initValue:Ext.emptyFn, + + // private + onViewClick: function(vw, index, node, e) { + var arrayIndex = this.preClickSelections.indexOf(index); + if (arrayIndex != -1) + { + this.preClickSelections.splice(arrayIndex, 1); + this.view.clearSelections(true); + this.view.select(this.preClickSelections); + } + this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value); + this.hiddenField.dom.value = this.getValue(); + this.fireEvent('click', this, e); + this.validate(); + }, + + // private + onViewBeforeClick: function(vw, index, node, e) { + this.preClickSelections = this.view.getSelectedIndexes(); + if (this.disabled) {return false;} + }, + + // private + onViewDblClick : function(vw, index, node, e) { + return this.fireEvent('dblclick', vw, index, node, e); + }, + + /** + * Returns an array of data values for the selected items in the list. The values will be separated + * by {@link #delimiter}. + * @return {Array} value An array of string data values + */ + getValue: function(valueField){ + var returnArray = []; + var selectionsArray = this.view.getSelectedIndexes(); + if (selectionsArray.length == 0) {return '';} + for (var i=0; i this.maxLength) { + this.markInvalid(String.format(this.maxLengthText, this.maxLength)); + return false; + } + return true; + } +}); + +Ext.reg("multiselect", Ext.ux.Multiselect); diff --git a/skins/jason/ux/Search.js b/skins/jason/ux/Search.js new file mode 100644 index 0000000..1a22b3d --- /dev/null +++ b/skins/jason/ux/Search.js @@ -0,0 +1,204 @@ +// vim: ts=4:sw=4:nu:fdc=4:nospell +/** + * Search plugin for Ext.grid.GridPanel, Ext.grid.EditorGrid ver. 2.x or subclasses of them + * + * @author Ing. Jozef Sakalos + * @copyright (c) 2008, by Ing. Jozef Sakalos + * @date 17. January 2008 + * @version $Id$ + * + * @license Ext.ux.grid.Search 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 + */ + +Ext.namespace('Ext.ux', 'Ext.ux.grid'); + +/** + * @class Ext.ux.grid.Search + * @extends Ext.util.Observable + * @param {Object} config configuration object + * @constructor + */ +Ext.ux.grid.Search = function(config) { + Ext.apply(this, config); + Ext.ux.grid.Search.superclass.constructor.call(this); +}; // eo constructor + +Ext.extend(Ext.ux.grid.Search, Ext.util.Observable, { + /** + * @cfg {String} searchTipText Text to display as input tooltip. Set to '' for no tooltip + */ + searchTipText:'Type a text to search and press Enter' + /** + * @cfg {String} position Where to display the search controls. Valid values are top and bottom (defaults to bottom) + * Corresponding toolbar has to exist at least with mimimum configuration tbar:[] for position:top or bbar:[] + * for position bottom. Plugin does NOT create any toolbar. + */ + ,position:'top' + /** + * @cfg {Number} width Width of input field in pixels (defaults to 100) + */ + ,width:100 + /** + * @cfg {String} xtype xtype is usually not used to instantiate this plugin but you have a chance to identify it + */ + ,xtype:'gridsearch' + /** + * @cfg {Object} paramNames Params name map (defaults to {fields:'fields', query:'query'} + */ + ,paramNames: { + fields:'fields' + ,query:'query' + ,all:'search' + ,cmd:'search' + } + /** + * @cfg {int} position + * The starting position inside the toolbar + */ + ,tbPosition: 15 + /** + * @cfg {Number} minLength force user to type this many character before he can make a search + */ + ,minLength:2 + // {{{ + /** + * private + * @param {Ext.grid.GridPanel/Ext.grid.EditorGrid} grid reference to grid this plugin is used for + */ + ,init:function(grid) { + this.grid = grid; + + // do our processing after grid render + grid.onRender = grid.onRender.createSequence(this.onRender, this); + } // eo function init + // }}} + // {{{ + /** + * private add plugin controls to existing toolbar + */ + ,onRender:function() { + var grid = this.grid; + var tb; + if('bottom' == this.position) { + tb = grid.bottomToolbar; + } else if ('owner' == this.position) { + tb = grid.ownerCt.topToolbar; + } else { + tb = grid.topToolbar; + } + + tb.insert(this.tbPosition, '-'); + this.tbPosition++; + + // add input field (TwinTriggerField in fact) + this.field = new Ext.form.TwinTriggerField({ + width:this.width + ,selectOnFocus:undefined === this.selectOnFocus ? true : this.selectOnFocus + ,trigger1Class:'x-form-clear-trigger' + ,trigger2Class:'x-form-search-trigger' + ,onTrigger1Click:this.onTriggerClear.createDelegate(this) + ,onTrigger2Click:this.onTriggerSearch.createDelegate(this) + ,minLength:this.minLength + }); + + // install event handlers on input field + this.field.on('render', function() { + this.field.el.dom.qtip = this.searchTipText; + + // install key map + var map = new Ext.KeyMap(this.field.el, [{ + key:Ext.EventObject.ENTER + ,scope:this + ,fn:this.onTriggerSearch + },{ + key:Ext.EventObject.ESC + ,scope:this + ,fn:this.onTriggerClear + }]); + map.stopEvent = true; + }, this, {single:true}); + + tb.insert(this.tbPosition, this.field); + + } // eo function onRender + // }}} + // {{{ + /** + * private Clear Trigger click handler + */ + ,onTriggerClear:function() { + this.field.setValue(''); + this.field.focus(); + this.onTriggerSearch(); + } // eo function onTriggerClear + // }}} + // {{{ + /** + * private Search Trigger click handler (executes the search, local or remote) + */ + ,onTriggerSearch:function() { + if(!this.field.isValid()) { + return; + } + var val = this.field.getValue(); + var store = this.grid.store; + + // ask server to filter records + + // clear start (necessary if we have paging) + if(store.lastOptions && store.lastOptions.params) { + store.lastOptions.params[store.paramNames.start] = 0; + } + + // add fields and query to baseParams of store + delete(store.baseParams[this.paramNames.fields]); + delete(store.baseParams[this.paramNames.query]); + if (store.lastOptions && store.lastOptions.params) { + delete(store.lastOptions.params[this.paramNames.fields]); + delete(store.lastOptions.params[this.paramNames.query]); + } + if(val && val.length) { + store.baseParams[this.paramNames.fields] = this.paramNames.cmd; + store.baseParams[this.paramNames.query] = val; + } else { + store.baseParams[this.paramNames.fields] = this.paramNames.all; + } + + // reload store + store.reload(); + + } // eo function onTriggerSearch + // }}} + // {{{ + /** + * @param {Boolean} true to disable search (TwinTriggerField), false to enable + */ + ,setDisabled:function() { + this.field.setDisabled.apply(this.field, arguments); + } // eo function setDisabled + // }}} + // {{{ + /** + * Enable search (TwinTriggerField) + */ + ,enable:function() { + this.setDisabled(false); + } // eo function enable + // }}} + // {{{ + /** + * Enable search (TwinTriggerField) + */ + ,disable:function() { + this.setDisabled(true); + } // eo function disable + // }}} + +}); // eo extend + +// eof diff --git a/skins/jason/ux/SlideZone.js b/skins/jason/ux/SlideZone.js new file mode 100644 index 0000000..520797b --- /dev/null +++ b/skins/jason/ux/SlideZone.js @@ -0,0 +1,637 @@ +/** + * Class Ext.ux.SlideZone + * @author Jared Gisin + * @version $Id$ + * @license http://www.opensource.org/licenses/mit-license.php + * + * TODO: make sure slider limits work when snap = 1 or snap < slider width/height + * TODO: API to dynamically modify the snap + * TODO: zone with slider zone responds to click and keypress + * TODO: API to programatically set slider value with animation + * + */ + +Ext.ux.SlideZone = function(id, config) { + if(id) { + Ext.apply(this, config); + this.init(id, config || {}); + } else { + return false; + } +} + +Ext.extend(Ext.ux.SlideZone, Ext.BoxComponent, { + size: 100, + sliderSnap: [0], + type: 'horizontal', + sliderWidth: 20, + sliderHeight: 20, + cls: null, + minValue: 0, + maxValue: 100, + allowSliderCrossing: true, + value: null, + + init: function(id, config) { + this.size = this.size instanceof Array ? this.size : [this.size]; + this.minValue = this.minValue instanceof Array ? this.minValue : [this.minValue]; + this.maxValue = this.maxValue instanceof Array ? this.maxValue : [this.maxValue]; + this.sliderSnap = this.sliderSnap instanceof Array ? this.sliderSnap : [this.sliderSnap]; + + this.el = Ext.DomHelper.append(Ext.get(id), { tag: 'div', + id: Ext.id(), + style: 'position: relative; ' + }, true); + this.el.addClass('x-slide-zone-' + this.type); + this.el.addClass(this.cls); + + switch(this.type) { + case 'horizontal': + this.sliderSize = [this.sliderWidth]; + this.el.applyStyles({width:this.size[0] + 'px'}); + this.el.lowLimit = [this.el.getX()]; + this.el.highLimit = [this.el.getRight()]; + break; + + case 'vertical': + this.sliderSize = [this.sliderHeight] + this.el.applyStyles({height:this.size[0] + 'px'}); + this.el.lowLimit = [this.el.getY()]; + this.el.highLimit = [this.el.getBottom()]; + break; + + case 'area': + this.sliderSize = [this.sliderWidth, this.sliderHeight]; + this.el.applyStyles({width:this.size[0] + 'px'}); + this.el.applyStyles({height:this.size[1] + 'px'}); + this.el.lowLimit = this.el.getXY(); + this.el.highLimit = [this.el.getRight(), this.el.getBottom()]; + break + } + + //normalize width/height for slider centering calculations + var l = this.sliderSize.length; + for(var i = 0; i < l; i++) { + this.sliderSize[i] = this.sliderSize[i] % 2 ? this.sliderSize[i] + 1: this.sliderSize[i] + } + + + var s = this.sliders; + this.sliders = new Ext.util.MixedCollection(); + if(s){ + this.add.apply(this, s); + } + + }, + + add: function(){ + var a = arguments, l = a.length + for(var i = 0; i < l; i++){ + var el = a[i]; + if (el instanceof Ext.ux.Slider) { + this.initSlider(el); + this.sliders.add(el) + } else if (typeof el == 'object') { + //initalize new slider and add to the items list + var s = new Ext.ux.ThumbSlider(el); + this.initSlider(s); + this.sliders.add(s) + } + } + this.updateValues(); + this.updateConstraints(); + }, + + enableCrossing: function() { + this.allowSliderCrossing = true; + this.updateConstraints(); + }, + + disableCrossing: function() { + this.allowSliderCrossing = false; + this.updateConstraints(); + }, + + getSlider: function(selector) { + /* Given a slider index or name, returns a slider object + * @selector slider index|name + */ + switch (typeof selector) { + case 'number': + return this.sliders.items[selector]; + break; + + case 'string': + var l = this.sliders.length; + for(var i = 0; i < l; i++){ + if(this.sliders.items[i].name == selector) return this.sliders.items[i]; + } + break; + } + }, + + + updateConstraints: function() { + if(!this.allowSliderCrossing && this.sliders.length > 1 && this.type != 'area') { + // multiple sliders exists and sliders can't cross, + // so we have to take into account the + // positions of all sliders + sortFN = function(a,b){ + var v1 = a.value instanceof Array ? a.value[0] : a.value; + var v2 = b.value instanceof Array ? b.value[0] : b.value; + return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0); + } + this.sliders.sort('asc',sortFN);//put in order by their value + + var l = this.sliders.length; + for (var i=0; i< l; i++) { //forloop required, as we have to get -1 and +1 slider positions + var leftTravel = 0, rightTravel = 0; + var sliderL = this.sliders.get(i-1); + var slider = this.sliders.get(i); + var sliderR = this.sliders.get(i+1); + + + if (sliderL && sliderR) { + if (sliderL instanceof Ext.ux.ThumbSlider) { + var leftTravel = slider.getTL()[0] - sliderL.getTL()[0] - this.sliderSnap[0]; + } + if (sliderL instanceof Ext.ux.RangeSlider) { + var leftTravel = slider.getTL()[0] - sliderL.getBR()[0] - this.sliderSnap[0]; + } + if (sliderR instanceof Ext.ux.ThumbSlider) { + var rightTravel = sliderR.getTL()[0] - slider.getTL()[0] - this.sliderSnap[0]; + } + if (sliderR instanceof Ext.ux.RangeSlider) { + var rightTravel = sliderR.getTL()[0] - slider.getBR()[0] - this.sliderSnap[0] ; + } + } else if(sliderL) { + if (sliderL instanceof Ext.ux.ThumbSlider) { + var rightTravel = this.el.highLimit[0] - slider.getTL()[0] - ( 0.5 * this.sliderSize[0]) ; + var leftTravel = slider.getTL()[0] - sliderL.getTL()[0] - this.sliderSnap[0]; + } + if (sliderL instanceof Ext.ux.RangeSlider) { + var rightTravel = this.el.highLimit[0] - slider.getBR()[0]; + var leftTravel = slider.getTL()[0] - sliderL.getBR()[0] - this.sliderSnap[0]; + } + } else if(sliderR) { + if (sliderR instanceof Ext.ux.ThumbSlider) { + var leftTravel = slider.getTL()[0] - this.el.lowLimit[0] + ( 0.5 * this.sliderSize[0]); + var rightTravel = sliderR.getTL()[0] - slider.getTL()[0] - this.sliderSnap[0] ; + } + if (sliderR instanceof Ext.ux.RangeSlider) { + var leftTravel = slider.getTL()[0] - this.el.lowLimit[0]; + var rightTravel = sliderR.getTL()[0] - slider.getBR()[0] - this.sliderSnap[0] ; + } + } + if(slider instanceof Ext.ux.RangeSlider) { + slider.resizable.leftTravel = [leftTravel]; + slider.resizable.rightTravel = [rightTravel]; + } + slider.setConstraint([leftTravel], [rightTravel], this.sliderSnap); + } + } else { + var l = this.sliders.length; + for (var i=0; i< l; i++) { + var slider = this.sliders.get(i); + if (slider instanceof Ext.ux.ThumbSlider ) { + slider.setConstraint([slider.getTL()[0]-this.el.lowLimit[0] + ( 1/2 * this.sliderSize[0]), + slider.getTL()[1]-this.el.lowLimit[1] + ( 1/2 * this.sliderSize[1])], + [this.el.highLimit[0]- (slider.getTL()[0] + this.sliderSize[0]) + ( 1/2 * this.sliderSize[0]), + this.el.highLimit[1]- (slider.getTL()[1] + this.sliderSize[1]) + ( 1/2 * this.sliderSize[1]) ], + this.sliderSnap) + } + if (slider instanceof Ext.ux.RangeSlider) { + slider.setConstraint([slider.getTL()[0] - this.el.lowLimit[0], + slider.getTL()[1] - this.el.lowLimit[1]], + [this.el.highLimit[0] - slider.getBR()[0], + this.el.highLimit[1] - slider.getBR()[1] ], + this.sliderSnap) + } + } + } + }, + + updateValues: function() { + var that = this; + var vals = {}; + this.sliders.each(function(i) { + + if(this.type == 'area') { + if (i instanceof Ext.ux.ThumbSlider) { + i.value = [(i.getTL()[0] + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0], + (i.getTL()[1] + 1/2 * that.sliderSize[1] - that.el.lowLimit[1]) / (that.size[1]) * (that.maxValue[1] - that.minValue[1]) + that.minValue[1]]; + i.percent = [parseFloat((i.getTL()[0] + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * 100), + parseFloat((i.getTL()[1] + 1/2 * that.sliderSize[1] - that.el.lowLimit[1]) / (that.size[1]) * 100)]; + } + if (i instanceof Ext.ux.RangeSlider) { + i.value = [[ + (i.getTL()[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0], + (i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0] + + + ],[ + (i.getTL()[1] - that.el.lowLimit[1]) / (that.size[1]) * (that.maxValue[1] - that.minValue[1]) + that.minValue[1], + (i.getBR()[1] - that.el.lowLimit[1]) / (that.size[1]) * (that.maxValue[1] - that.minValue[1]) + that.minValue[1] + ]]; + i.percent = [[ + parseFloat((i.getTL()[0] - that.el.lowLimit[0]) / (that.size[0]) * 100).toFixed(2), + parseFloat((i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * 100).toFixed(2) + ],[ + parseFloat((i.getTL()[1] - that.el.lowLimit[1]) / (that.size[1]) * 100).toFixed(2), + parseFloat((i.getBR()[1] - that.el.lowLimit[1]) / (that.size[1]) * 100).toFixed(2) + ]]; + } + } else { + if (i instanceof Ext.ux.ThumbSlider) { + i.value = (i.getTL()[0] + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0]; + i.percent = parseFloat((i.getTL()[0] + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * 100); + } + if (i instanceof Ext.ux.RangeSlider) { + i.value = [(i.getTL()[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0], + (i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0]]; + i.percent = [ parseFloat((i.getTL()[0] - that.el.lowLimit[0]) / (that.size[0]) * 100), + parseFloat((i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * 100)]; + } + } + vals[this.name] = this.value; + }); + + this.value = vals; + }, + + initSliderPosition: function(slider) { + /* Sets a sliders's initial position within the slide zone. + * If slideZone has a sliderSnap set, the slider + * is positioned at a multiple of the sliderSnap value that is + * closest where the slider's value would otherwise position it. + * After positioning, the slider's actual value will be modified + * in Ext.ux.SlideZone.updateValues() + * to jibe with the actual position in the slide zone given the + * sliderSnap constraint. + */ + var initialPosition = [0,0]; + slider.repositionDelta = [0,0]; + var l = this.type == 'area' ? 2 : 1; + for(var i=0; i < l; i++ ) { + /* Make sure initial value is in slider bar range, + if it's outside, set to closest limit. + The slider value is modified if it's out of range. */ + if(slider.value instanceof Array) { + if (slider instanceof Ext.ux.ThumbSlider) { + + slider.value[i] = Number(slider.value[i]).constrain(this.minValue[i], this.maxValue[i]); + initialPosition[i] = parseInt((slider.value[i] - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]); + } + if (slider instanceof Ext.ux.RangeSlider) { + switch (this.type) { + case 'horizontal': + case 'vertical': + slider.value[i] = Number(slider.value[i]).constrain(this.minValue[i], this.maxValue[i]); + initialPosition[i] = parseInt((slider.value[i] - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]); + break; + + case 'area': + slider.value[i][0] = Number(slider.value[i][0]).constrain(this.minValue[i], this.maxValue[i]); + slider.value[i][1] = Number(slider.value[i][1]).constrain(this.minValue[i], this.maxValue[i]); + + initialPosition[i] = parseInt((slider.value[i][0] - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]); + + break; + } + } + } else { + slider.value = Number(slider.value).constrain(this.minValue[i], this.maxValue[i]); + initialPosition[i] = parseInt((slider.value - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]); + } + + /* Calculate slider value versus closest snap-to location, + and calculate an offset value to apply when positioning it. */ + if (this.sliderSnap[i] > 1) { + var positionToSnapDiff = [0,0]; + positionToSnapDiff[i] = (initialPosition[i] - this.el.lowLimit[i]) % this.sliderSnap[i]; + if (positionToSnapDiff[i]) { + if(positionToSnapDiff[i] < 1/2 * this.sliderSnap[i]) { + slider.repositionDelta[i] = -positionToSnapDiff[i]; + } else { + slider.repositionDelta[i] = this.sliderSnap[i] - positionToSnapDiff[i]; + } + } + } + } + + if (slider instanceof Ext.ux.ThumbSlider) { + slider.setPosition([initialPosition[0] + slider.repositionDelta[0] - (0.5 * this.sliderSize[0]), + initialPosition[1] + slider.repositionDelta[1] - (0.5 * this.sliderSize[1])]); + } + if (slider instanceof Ext.ux.RangeSlider) { + + slider.setPosition([initialPosition[0] + slider.repositionDelta[0], + initialPosition[1] + slider.repositionDelta[1]]); + } + }, + + initSlider: function(slider) { + slider.init(this); + this.initSliderPosition(slider); + } + +}); + + +Ext.ux.Slider = function(config) { + + Ext.apply(this, config); + + this.addEvents( { + "dragstart" : true, + "dragend" : true, + "drag" : true, + "mouseover":true, + "mouseout":true + }); +} + +Ext.extend(Ext.ux.Slider, Ext.BoxComponent, { + value: 0, + ddEl: null, + name: null, + cls: null, + allowMove:true, + + init: function() { + //Do nothing + }, + + getTL: function() { + switch(this.type) { + case 'horizontal': + return [this.el.getX()]; + break; + + case 'vertical': + return [this.el.getY()]; + break; + + case 'area': + return this.el.getXY(); + break; + } + }, + + getBR: function() { + switch(this.type) { + case 'horizontal': + return [this.el.getRight()]; + break; + + case 'vertical': + return [this.el.getBottom()]; + break; + + case 'area': + return [this.el.getRight(), this.el.getBottom()]; + break; + } + + }, + + setPosition: function(position) { + var l = position.length; + for (i=0; i 0 ? box.right - this.startBox.right + this.startPoint[0] : tgt[0], + tgt[1] - box.top < 0 ? box.top - this.startBox.y + this.startPoint[1] : tgt[1] - box.bottom > 0 ? box.bottom - this.startBox.bottom + this.startPoint[1] : tgt[1] + ]; + + Ext.Resizable.prototype.onMouseMove.call(this, e); + slideZoneInstance.updateValues(); + sliderInstance.fireEvent('drag', sliderInstance); + }; + + this.resizable.on('resize', function(width, height) { + slideZoneInstance.updateConstraints(); + slideZoneInstance.updateValues(); + sliderInstance.fireEvent('dragend', sliderInstance); + }) + + this.el.on('mouseover', function() { + sliderInstance.fireEvent('mouseover', sliderInstance); + sliderInstance.el.setStyle('cursor', sliderInstance.pointer); + }); + this.el.on('mouseout', function() { + sliderInstance.fireEvent('mouseout', sliderInstance); + sliderInstance.el.setStyle('cursor', 'default'); + }); + this.ddEl.onMouseDown = function(x, y) { + sliderInstance.fireEvent('dragstart', sliderInstance); + }; + this.ddEl.onMouseUp = function(x, y) { + slideZoneInstance.updateConstraints(); + slideZoneInstance.updateValues(); + sliderInstance.fireEvent('dragend', sliderInstance) + }; + this.ddEl.onDrag = function(e) { + slideZoneInstance.updateValues(); + sliderInstance.fireEvent('drag', sliderInstance); + }; + } + Ext.ux.ThumbSlider.superclass.init.call(parentSlideZone); + + } +}); diff --git a/skins/jason/ux/TabCloseMenu.js b/skins/jason/ux/TabCloseMenu.js new file mode 100644 index 0000000..09d3678 --- /dev/null +++ b/skins/jason/ux/TabCloseMenu.js @@ -0,0 +1,52 @@ +/* + * Ext JS Library 2.2 + * Copyright(c) 2006-2008, Ext JS, LLC. + * licensing@extjs.com + * + * http://extjs.com/license + */ + + +// Very simple plugin for adding a close context menu to tabs + +Ext.ux.TabCloseMenu = function(){ + var tabs, menu, ctxItem; + this.init = function(tp){ + tabs = tp; + tabs.on('contextmenu', onContextMenu); + } + + function onContextMenu(ts, item, e){ + if(!menu){ // create context menu on first right click + menu = new Ext.menu.Menu([{ + id: tabs.id + '-close', + text: 'Close Tab', + handler : function(){ + tabs.remove(ctxItem); + } + },{ + id: tabs.id + '-close-others', + text: 'Close Other Tabs', + handler : function(){ + tabs.items.each(function(item){ + if(item.closable && item != ctxItem){ + tabs.remove(item); + } + }); + } + }]); + } + ctxItem = item; + var items = menu.items; + items.get(tabs.id + '-close').setDisabled(!item.closable); + var disableOthers = true; + tabs.items.each(function(){ + if(this != item && this.closable){ + disableOthers = false; + return false; + } + }); + items.get(tabs.id + '-close-others').setDisabled(disableOthers); + menu.showAt(e.getPoint()); + } +}; diff --git a/skins/jason/ux/filter.js b/skins/jason/ux/filter.js deleted file mode 100644 index 402ca0e..0000000 --- a/skins/jason/ux/filter.js +++ /dev/null @@ -1,225 +0,0 @@ -// vim: ts=4:sw=4:nu:fdc=4:nospell -/** - * Search plugin for Ext.grid.GridPanel, Ext.grid.EditorGrid ver. 2.x or subclasses of them - * - * @author Ing. Jozef Sakalos - * @copyright (c) 2008, by Ing. Jozef Sakalos - * @date 17. January 2008 - * @version $Id: Ext.ux.grid.Search.js 11 2008-02-22 17:13:52Z jozo $ - * - * @license Ext.ux.grid.Search 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 - */ - -Ext.namespace('Ext.ux', 'Ext.ux.grid'); - -/** - * @class Ext.ux.grid.Search - * @extends Ext.util.Observable - * @param {Object} config configuration object - * @constructor - */ -Ext.ux.grid.Search = function(config) { - Ext.apply(this, config); - Ext.ux.grid.Search.superclass.constructor.call(this); -}; // eo constructor - -Ext.extend(Ext.ux.grid.Search, Ext.util.Observable, { - /** - * @cfg {String} searchTipText Text to display as input tooltip. Set to '' for no tooltip - */ - searchTipText:'Type a text to search and press Enter' - /** - * @cfg {String} position Where to display the search controls. Valid values are top and bottom (defaults to bottom) - * Corresponding toolbar has to exist at least with mimimum configuration tbar:[] for position:top or bbar:[] - * for position bottom. Plugin does NOT create any toolbar. - */ - ,position:'top' - /** - * @cfg {Number} width Width of input field in pixels (defaults to 100) - */ - ,width:150 - /** - * @cfg {String} xtype xtype is usually not used to instantiate this plugin but you have a chance to identify it - */ - ,xtype:'gridsearch' - /** - * @cfg {Object} paramNames Params name map (defaults to {fields:'fields', query:'query'} - */ - ,paramNames: { - fields:'fields' - ,all:'search' - ,cmd:'search' - ,query:'query' - } - /** - * @cfg {String} shortcutKey Key to fucus the input field (defaults to r = Sea_r_ch). Empty string disables shortcut - */ - ,shortcutKey:'r' - /** - * @cfg {String} shortcutModifier Modifier for shortcutKey. Valid values: alt, ctrl, shift (defaults to alt) - */ - ,shortcutModifier:'alt' - /** - * @cfg {String} align 'left' or 'right' (defaults to 'right') - */ - ,align:'right' - /** - * @cfg {Number} minLength force user to type this many character before he can make a search - */ - ,minLength:2 - // {{{ - /** - * private - * @param {Ext.grid.GridPanel/Ext.grid.EditorGrid} grid reference to grid this plugin is used for - */ - ,init:function(grid) { - this.grid = grid; - - // do our processing after grid render - grid.onRender = grid.onRender.createSequence(this.onRender, this); - } // eo function init - // }}} - // {{{ - /** - * private add plugin controls to existing toolbar and calls reconfigure - */ - ,onRender:function() { - var grid = this.grid; - var tb = 'owner' == this.position ? grid.ownerCt.topToolbar : grid.topToolbar; - - // handle position - if('right' === this.align) { - tb.addFill(); - } - else { - tb.addSeparator(); - } - - // add input field (TwinTriggerField in fact) - this.field = new Ext.form.TwinTriggerField({ - width:this.width - ,selectOnFocus:undefined === this.selectOnFocus ? true : this.selectOnFocus - ,trigger1Class:'x-form-clear-trigger' - ,trigger2Class:'x-form-search-trigger' - ,onTrigger1Click:this.onTriggerClear.createDelegate(this) - ,onTrigger2Click:this.onTriggerSearch.createDelegate(this) - ,minLength:this.minLength - }); - - // install event handlers on input field - this.field.on('render', function() { - this.field.el.dom.qtip = this.searchTipText; - - // install key map - var map = new Ext.KeyMap(this.field.el, [{ - key:Ext.EventObject.ENTER - ,scope:this - ,fn:this.onTriggerSearch - },{ - key:Ext.EventObject.ESC - ,scope:this - ,fn:this.onTriggerClear - }]); - map.stopEvent = true; - }, this, {single:true}); - - tb.add(this.field); - - if(tb.displayEl) { - var size = this.field.getSize(); - tb.displayEl.setRight(10+this.width); - } - // keyMap - if(this.shortcutKey && this.shortcutModifier) { - var shortcutEl = this.grid.getEl(); - var shortcutCfg = [{ - key:this.shortcutKey - ,scope:this - ,stopEvent:true - ,fn:function() { - this.field.focus(); - } - }]; - shortcutCfg[this.shortcutModifier] = true; - this.keymap = new Ext.KeyMap(shortcutEl, shortcutCfg); - } - } // eo function onRender - // }}} - // {{{ - /** - * private Clear Trigger click handler - */ - ,onTriggerClear:function() { - this.field.setValue(''); - this.field.focus(); - this.onTriggerSearch(); - } // eo function onTriggerClear - // }}} - // {{{ - /** - * private Search Trigger click handler (executes the search, local or remote) - */ - ,onTriggerSearch:function() { - if(!this.field.isValid()) { - return; - } - var val = this.field.getValue(); - var store = this.grid.store; - - // ask server to filter records - // clear start (necessary if we have paging) - if(store.lastOptions && store.lastOptions.params) { - store.lastOptions.params[store.paramNames.start] = 0; - } - - // add fields and query to baseParams of store - delete(store.baseParams[this.paramNames.fields]); - delete(store.baseParams[this.paramNames.query]); - if (store.lastOptions && store.lastOptions.params) { - delete(store.lastOptions.params[this.paramNames.fields]); - delete(store.lastOptions.params[this.paramNames.query]); - } - if(val && val.length) { - store.baseParams[this.paramNames.fields] = this.paramNames.cmd; - store.baseParams[this.paramNames.query] = val; - } else { - store.baseParams[this.paramNames.fields] = this.paramNames.all; - } - - // reload store - store.reload(); - - } // eo function onTriggerSearch - // }}} - // {{{ - /** - * @param {Boolean} true to disable search (TwinTriggerField), false to enable - */ - ,setDisabled:function() { - this.field.setDisabled.apply(this.field, arguments); - } // eo function setDisabled - // }}} - // {{{ - /** - * Enable search (TwinTriggerField) - */ - ,enable:function() { - this.setDisabled(false); - } // eo function enable - // }}} - // {{{ - /** - * Enable search (TwinTriggerField) - */ - ,disable:function() { - this.setDisabled(true); - } // eo function disable - -}); // eo extend - -// eof diff --git a/skins/jason/ux/multiselect.js b/skins/jason/ux/multiselect.js deleted file mode 100644 index d52dbe8..0000000 --- a/skins/jason/ux/multiselect.js +++ /dev/null @@ -1,323 +0,0 @@ -/* - * Ext JS Library 2.2 - * Copyright(c) 2006-2008, Ext JS, LLC. - * licensing@extjs.com - * - * http://extjs.com/license - */ - -/* - * Note that this control should still be treated as an example and that the API will most likely - * change once it is ported into the Ext core as a standard form control. This is still planned - * for a future release, so this should not yet be treated as a final, stable API at this time. - */ - -/** - * @class Ext.ux.MultiSelect - * @extends Ext.form.Field - * A control that allows selection and form submission of multiple list items. The MultiSelect control - * depends on the Ext.ux.DDView class to provide drag/drop capability both within the list and also - * between multiple MultiSelect controls (see the Ext.ux.ItemSelector). - * - * @history - * 2008-06-19 bpm Original code contributed by Toby Stuart - * 2008-06-19 bpm Docs and demo code clean up - * - * @constructor - * Create a new MultiSelect - * @param {Object} config Configuration options - */ -Ext.ux.Multiselect = Ext.extend(Ext.form.Field, { - /** - * @cfg {String} legend Wraps the object with a fieldset and specified legend. - */ - /** - * @cfg {Store} store The {@link Ext.data.Store} used by the underlying Ext.ux.DDView. - */ - /** - * @cfg {Ext.ux.DDView} view The Ext.ux.DDView used to render the multiselect list. - */ - /** - * @cfg {String/Array} dragGroup The ddgroup name(s) for the DDView's DragZone (defaults to undefined). - */ - /** - * @cfg {String/Array} dropGroup The ddgroup name(s) for the DDView's DropZone (defaults to undefined). - */ - /** - * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a - * toolbar config, or an array of buttons/button configs to be added to the toolbar. - */ - /** - * @cfg {String} fieldName The name of the field to sort by when sorting is enabled. - */ - /** - * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled - * (use for lists which are sorted, defaults to false). - */ - appendOnly:false, - /** - * @cfg {Array} dataFields Inline data definition when not using a pre-initialised store. Known to cause problems - * in some browswers for very long lists. Use store for large datasets. - */ - dataFields:[], - /** - * @cfg {Array} data Inline data when not using a pre-initialised store. Known to cause problems in some - * browswers for very long lists. Use store for large datasets. - */ - data:[], - /** - * @cfg {Number} width Width in pixels of the control (defaults to 100). - */ - width:100, - /** - * @cfg {Number} height Height in pixels of the control (defaults to 100). - */ - height:100, - /** - * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0). - */ - displayField:0, - /** - * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1). - */ - valueField:1, - /** - * @cfg {Boolean} allowBlank True to require at least one item in the list to be selected, false to allow no - * selection (defaults to true). - */ - allowBlank:true, - /** - * @cfg {Number} minLength Minimum number of selections allowed (defaults to 0). - */ - minLength:0, - /** - * @cfg {Number} maxLength Maximum number of selections allowed (defaults to Number.MAX_VALUE). - */ - maxLength:Number.MAX_VALUE, - /** - * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as - * {@link Ext.form.TextField#blankText}. - */ - blankText:Ext.form.TextField.prototype.blankText, - /** - * @cfg {String} minLengthText Validation message displayed when {@link #minLength} is not met (defaults to 'Minimum {0} - * item(s) required'). The {0} token will be replaced by the value of {@link #minLength}. - */ - minLengthText:'Minimum {0} item(s) required', - /** - * @cfg {String} maxLengthText Validation message displayed when {@link #maxLength} is not met (defaults to 'Maximum {0} - * item(s) allowed'). The {0} token will be replaced by the value of {@link #maxLength}. - */ - maxLengthText:'Maximum {0} item(s) allowed', - /** - * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values - * (defaults to ','). - */ - delimiter:',', - - // DDView settings - copy:false, - allowDup:false, - allowTrash:false, - focusClass:undefined, - sortDir:'ASC', - - // private - defaultAutoCreate : {tag: "div"}, - - // private - initComponent: function(){ - Ext.ux.Multiselect.superclass.initComponent.call(this); - this.addEvents({ - 'dblclick' : true, - 'click' : true, - 'change' : true, - 'drop' : true - }); - }, - - // private - onRender: function(ct, position){ - Ext.ux.Multiselect.superclass.onRender.call(this, ct, position); - - var cls = 'ux-mselect'; - var fs = new Ext.form.FieldSet({ - renderTo:this.el, - title:this.legend, - height:this.height, - width:this.width, - style:"padding:0;", - tbar:this.tbar - }); - //if(!this.legend)fs.el.down('.'+fs.headerCls).remove(); - fs.body.addClass(cls); - - if(!this.tpl){ /*** add by anbr - allow overwrite template external ***/ - this.tpl = '
'; - } - if(!this.store){ - this.store = new Ext.data.SimpleStore({ - fields: this.dataFields, - data : this.data - }); - } - - this.view = new Ext.ux.DDView({ - multiSelect: true, - store: this.store, - selectedClass: cls+"-selected", - tpl:this.tpl, - allowDup:this.allowDup, - copy: this.copy, - allowTrash: this.allowTrash, - dragGroup: this.dragGroup, - dropGroup: this.dropGroup, - itemSelector:"."+cls+"-item", - isFormField:false, - applyTo:fs.body, - appendOnly:this.appendOnly, - sortField:this.sortField, - sortDir:this.sortDir - }); - - fs.add(this.view); - - this.view.on('click', this.onViewClick, this); - this.view.on('beforeClick', this.onViewBeforeClick, this); - this.view.on('dblclick', this.onViewDblClick, this); - this.view.on('drop', function(ddView, n, dd, e, data){ - return this.fireEvent("drop", ddView, n, dd, e, data); - }, this); - - this.hiddenName = this.name; - var hiddenTag={tag: "input", type: "hidden", value: "", name:this.name}; - if (this.isFormField) { - this.hiddenField = this.el.createChild(hiddenTag); - } else { - this.hiddenField = Ext.get(document.body).createChild(hiddenTag); - } - if(this.value) { /*** add by anbr - allow create initial data ***/ - this.setValue(this.value); - } - fs.doLayout(); - }, - - // private - initValue:Ext.emptyFn, - - // private - onViewClick: function(vw, index, node, e) { - var arrayIndex = this.preClickSelections.indexOf(index); - if (arrayIndex != -1) - { - this.preClickSelections.splice(arrayIndex, 1); - this.view.clearSelections(true); - this.view.select(this.preClickSelections); - } - this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value); - this.hiddenField.dom.value = this.getValue(); - this.fireEvent('click', this, e); - this.validate(); - }, - - // private - onViewBeforeClick: function(vw, index, node, e) { - this.preClickSelections = this.view.getSelectedIndexes(); - if (this.disabled) {return false;} - }, - - // private - onViewDblClick : function(vw, index, node, e) { - return this.fireEvent('dblclick', vw, index, node, e); - }, - - /** - * Returns an array of data values for the selected items in the list. The values will be separated - * by {@link #delimiter}. - * @return {Array} value An array of string data values - */ - getValue: function(valueField){ - var returnArray = []; - var selectionsArray = this.view.getSelectedIndexes(); - if (selectionsArray.length == 0) {return '';} - for (var i=0; i this.maxLength) { - this.markInvalid(String.format(this.maxLengthText, this.maxLength)); - return false; - } - return true; - } -}); - -Ext.reg("multiselect", Ext.ux.Multiselect); diff --git a/skins/jason/ux/tabclosemenu.js b/skins/jason/ux/tabclosemenu.js deleted file mode 100644 index 09d3678..0000000 --- a/skins/jason/ux/tabclosemenu.js +++ /dev/null @@ -1,52 +0,0 @@ -/* - * Ext JS Library 2.2 - * Copyright(c) 2006-2008, Ext JS, LLC. - * licensing@extjs.com - * - * http://extjs.com/license - */ - - -// Very simple plugin for adding a close context menu to tabs - -Ext.ux.TabCloseMenu = function(){ - var tabs, menu, ctxItem; - this.init = function(tp){ - tabs = tp; - tabs.on('contextmenu', onContextMenu); - } - - function onContextMenu(ts, item, e){ - if(!menu){ // create context menu on first right click - menu = new Ext.menu.Menu([{ - id: tabs.id + '-close', - text: 'Close Tab', - handler : function(){ - tabs.remove(ctxItem); - } - },{ - id: tabs.id + '-close-others', - text: 'Close Other Tabs', - handler : function(){ - tabs.items.each(function(item){ - if(item.closable && item != ctxItem){ - tabs.remove(item); - } - }); - } - }]); - } - ctxItem = item; - var items = menu.items; - items.get(tabs.id + '-close').setDisabled(!item.closable); - var disableOthers = true; - tabs.items.each(function(){ - if(this != item && this.closable){ - disableOthers = false; - return false; - } - }); - items.get(tabs.id + '-close-others').setDisabled(disableOthers); - menu.showAt(e.getPoint()); - } -}; -- cgit v1.2.3