中间件编程

开发平台：

JavaScript

ux-all-debug.js：源码内容

layoutConfig:{columns:3}
});
p.add(this.fromMultiselect);
var icons = new Ext.Panel({header:false});
p.add(icons);
p.add(this.toMultiselect);
p.render(this.el);
icons.el.down('.'+icons.bwrapCls).remove();
// ICON HELL!!!
if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
this.imagePath+="/";
this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
var el=icons.getEl();
this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
this.toTopIcon.on('click', this.toTop, this);
this.upIcon.on('click', this.up, this);
this.downIcon.on('click', this.down, this);
this.toBottomIcon.on('click', this.toBottom, this);
this.addIcon.on('click', this.fromTo, this);
this.removeIcon.on('click', this.toFrom, this);
if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }
var tb = p.body.first();
this.el.setWidth(p.body.first().getWidth());
p.body.removeClass();
this.hiddenName = this.name;
var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
this.hiddenField = this.el.createChild(hiddenTag);
},
doLayout: function(){
if(this.rendered){
this.fromMultiselect.fs.doLayout();
this.toMultiselect.fs.doLayout();
}
},
afterRender: function(){
Ext.ux.form.ItemSelector.superclass.afterRender.call(this);
this.toStore = this.toMultiselect.store;
this.toStore.on('add', this.valueChanged, this);
this.toStore.on('remove', this.valueChanged, this);
this.toStore.on('load', this.valueChanged, this);
this.valueChanged(this.toStore);
},
toTop : function() {
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
var records = [];
if (selectionsArray.length > 0) {
selectionsArray.sort();
for (var i=0; i<selectionsArray.length; i++) {
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
}
selectionsArray = [];
for (var i=records.length-1; i>-1; i--) {
record = records[i];
this.toMultiselect.view.store.remove(record);
this.toMultiselect.view.store.insert(0, record);
selectionsArray.push(((records.length - 1) - i));
}
}
this.toMultiselect.view.refresh();
this.toMultiselect.view.select(selectionsArray);
},
toBottom : function() {
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
var records = [];
if (selectionsArray.length > 0) {
selectionsArray.sort();
for (var i=0; i<selectionsArray.length; i++) {
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
}
selectionsArray = [];
for (var i=0; i<records.length; i++) {
record = records[i];
this.toMultiselect.view.store.remove(record);
this.toMultiselect.view.store.add(record);
selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));
}
}
this.toMultiselect.view.refresh();
this.toMultiselect.view.select(selectionsArray);
},
up : function() {
var record = null;
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
selectionsArray.sort();
var newSelectionsArray = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
if ((selectionsArray[i] - 1) >= 0) {
this.toMultiselect.view.store.remove(record);
this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
newSelectionsArray.push(selectionsArray[i] - 1);
}
}
this.toMultiselect.view.refresh();
this.toMultiselect.view.select(newSelectionsArray);
}
},
down : function() {
var record = null;
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
selectionsArray.sort();
selectionsArray.reverse();
var newSelectionsArray = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {
this.toMultiselect.view.store.remove(record);
this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);
newSelectionsArray.push(selectionsArray[i] + 1);
}
}
this.toMultiselect.view.refresh();
this.toMultiselect.view.select(newSelectionsArray);
}
},
fromTo : function() {
var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();
var records = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
}
if(!this.allowDup)selectionsArray = [];
for (var i=0; i<records.length; i++) {
record = records[i];
if(this.allowDup){
var x=new Ext.data.Record();
record.id=x.id;
delete x;
this.toMultiselect.view.store.add(record);
}else{
this.fromMultiselect.view.store.remove(record);
this.toMultiselect.view.store.add(record);
selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
}
}
}
this.toMultiselect.view.refresh();
this.fromMultiselect.view.refresh();
var si = this.toMultiselect.store.sortInfo;
if(si){
this.toMultiselect.store.sort(si.field, si.direction);
}
this.toMultiselect.view.select(selectionsArray);
},
toFrom : function() {
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
var records = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
}
selectionsArray = [];
for (var i=0; i<records.length; i++) {
record = records[i];
this.toMultiselect.view.store.remove(record);
if(!this.allowDup){
this.fromMultiselect.view.store.add(record);
selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
}
}
}
this.fromMultiselect.view.refresh();
this.toMultiselect.view.refresh();
var si = this.fromMultiselect.store.sortInfo;
if (si){
this.fromMultiselect.store.sort(si.field, si.direction);
}
this.fromMultiselect.view.select(selectionsArray);
},
valueChanged: function(store) {
var record = null;
var values = [];
for (var i=0; i<store.getCount(); i++) {
record = store.getAt(i);
values.push(record.get(this.toMultiselect.valueField));
}
this.hiddenField.dom.value = values.join(this.delimiter);
this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
},
getValue : function() {
return this.hiddenField.dom.value;
},
onRowDblClick : function(vw, index, node, e) {
if (vw == this.toMultiselect.view){
this.toFrom();
} else if (vw == this.fromMultiselect.view) {
this.fromTo();
}
return this.fireEvent('rowdblclick', vw, index, node, e);
},
reset: function(){
range = this.toMultiselect.store.getRange();
this.toMultiselect.store.removeAll();
this.fromMultiselect.store.add(range);
var si = this.fromMultiselect.store.sortInfo;
if (si){
this.fromMultiselect.store.sort(si.field, si.direction);
}
this.valueChanged(this.toMultiselect.store);
}
});
Ext.reg('itemselector', Ext.ux.form.ItemSelector);
//backwards compat
Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;
Ext.ns('Ext.ux.form');
/**
* @class Ext.ux.form.MultiSelect
* @extends Ext.form.Field
* A control that allows selection and form submission of multiple list items.
*
* @history
* 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
* 2008-06-19 bpm Docs and demo code clean up
*
* @constructor
* Create a new MultiSelect
* @param {Object} config Configuration options
* @xtype multiselect
*/
Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field, {
/**
* @cfg {String} legend Wraps the object with a fieldset and specified legend.
*/
/**
* @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.
*/
/**
* @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).
*/
/**
* @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).
*/
/**
* @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).
*/
ddReorder:false,
/**
* @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} 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 {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 False to require at least one item in the list to be selected, true to allow no
* selection (defaults to true).
*/
allowBlank:true,
/**
* @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).
*/
minSelections:0,
/**
* @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).
*/
maxSelections: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} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}
* item(s) required'). The {0} token will be replaced by the value of {@link #minSelections}.
*/
minSelectionsText:'Minimum {0} item(s) required',
/**
* @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}
* item(s) allowed'). The {0} token will be replaced by the value of {@link #maxSelections}.
*/
maxSelectionsText:'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:',',
/**
* @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect is bound (defaults to <tt>undefined</tt>).
* Acceptable values for this property are:
* <div class="mdetail-params"><ul>
* <li><b>any {@link Ext.data.Store Store} subclass</b></li>
* <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.
* <div class="mdetail-params"><ul>
* <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">
* A 1-dimensional array will automatically be expanded (each array item will be the combo
* {@link #valueField value} and {@link #displayField text})</div></li>
* <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">
* For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo
* {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.
* </div></li></ul></div></li></ul></div>
*/
// private
defaultAutoCreate : {tag: "div"},
// private
initComponent: function(){
Ext.ux.form.MultiSelect.superclass.initComponent.call(this);
if(Ext.isArray(this.store)){
if (Ext.isArray(this.store[0])){
this.store = new Ext.data.ArrayStore({
fields: ['value','text'],
data: this.store
});
this.valueField = 'value';
}else{
this.store = new Ext.data.ArrayStore({
fields: ['text'],
data: this.store,
expandData: true
});
this.valueField = 'text';
}
this.displayField = 'text';
} else {
this.store = Ext.StoreMgr.lookup(this.store);
}
this.addEvents({
'dblclick' : true,
'click' : true,
'change' : true,
'drop' : true
});
},
// private
onRender: function(ct, position){
Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);
var fs = this.fs = new Ext.form.FieldSet({
renderTo: this.el,
title: this.legend,
height: this.height,
width: this.width,
style: "padding:0;",
tbar: this.tbar,
bodyStyle: 'overflow: auto;'
});
this.view = new Ext.ListView({
multiSelect: true,
store: this.store,
columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],
hideHeaders: true
});
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.hiddenName = this.name || Ext.id();
var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };
this.hiddenField = this.el.createChild(hiddenTag);
this.hiddenField.dom.disabled = this.hiddenName != this.name;
fs.doLayout();
},
// private
afterRender: function(){
Ext.ux.form.MultiSelect.superclass.afterRender.call(this);
if (this.ddReorder && !this.dragGroup && !this.dropGroup){
this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();
}
if (this.draggable || this.dragGroup){
this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {
ddGroup: this.dragGroup
});
}
if (this.droppable || this.dropGroup){
this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {
ddGroup: this.dropGroup
});
}
},
// private
onViewClick: function(vw, index, node, e) {
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) {
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<selectionsArray.length; i++) {
returnArray.push(this.store.getAt(selectionsArray[i]).get((valueField != null) ? valueField : this.valueField));
}
return returnArray.join(this.delimiter);
},
/**
* Sets a delimited string (using {@link #delimiter}) or array of data values into the list.
* @param {String/Array} values The values to set
*/
setValue: function(values) {
var index;
var selections = [];
this.view.clearSelections();
this.hiddenField.dom.value = '';
if (!values || (values == '')) { return; }
if (!Ext.isArray(values)) { values = values.split(this.delimiter); }
for (var i=0; i<values.length; i++) {
index = this.view.store.indexOf(this.view.store.query(this.valueField,
new RegExp('^' + values[i] + '$', "i")).itemAt(0));
selections.push(index);
}
this.view.select(selections);
this.hiddenField.dom.value = this.getValue();
this.validate();
},
// inherit docs
reset : function() {
this.setValue('');
},
// inherit docs
getRawValue: function(valueField) {
var tmp = this.getValue(valueField);
if (tmp.length) {
tmp = tmp.split(this.delimiter);
}
else {
tmp = [];
}
return tmp;
},
// inherit docs
setRawValue: function(values){
setValue(values);
},
// inherit docs
validateValue : function(value){
if (value.length < 1) { // if it has no value
if (this.allowBlank) {
this.clearInvalid();
return true;
} else {
this.markInvalid(this.blankText);
return false;
}
}
if (value.length < this.minSelections) {
this.markInvalid(String.format(this.minSelectionsText, this.minSelections));
return false;
}
if (value.length > this.maxSelections) {
this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));
return false;
}
return true;
},
// inherit docs
disable: function(){
this.disabled = true;
this.hiddenField.dom.disabled = true;
this.fs.disable();
},
// inherit docs
enable: function(){
this.disabled = false;
this.hiddenField.dom.disabled = false;
this.fs.enable();
},
// inherit docs
destroy: function(){
Ext.destroy(this.fs, this.dragZone, this.dropZone);
Ext.ux.form.MultiSelect.superclass.destroy.call(this);
}
});
Ext.reg('multiselect', Ext.ux.form.MultiSelect);
//backwards compat
Ext.ux.Multiselect = Ext.ux.form.MultiSelect;
Ext.ux.form.MultiSelect.DragZone = function(ms, config){
this.ms = ms;
this.view = ms.view;
var ddGroup = config.ddGroup || 'MultiselectDD';
var dd;
if (Ext.isArray(ddGroup)){
dd = ddGroup.shift();
} else {
dd = ddGroup;
ddGroup = null;
}
Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
this.setDraggable(ddGroup);
};
Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {
onInitDrag : function(x, y){
var el = Ext.get(this.dragData.ddel.cloneNode(true));
this.proxy.update(el.dom);
el.setWidth(el.child('em').getWidth());
this.onStartDrag(x, y);
return true;
},
// private
collectSelection: function(data) {
data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();
var i = 0;
this.view.store.each(function(rec){
if (this.view.isSelected(i)) {
var n = this.view.getNode(i);
var dragNode = n.cloneNode(true);
dragNode.id = Ext.id();
data.ddel.appendChild(dragNode);
data.records.push(this.view.store.getAt(i));
data.viewNodes.push(n);
}
i++;
}, this);
},
// override
onEndDrag: function(data, e) {
var d = Ext.get(this.dragData.ddel);
if (d && d.hasClass("multi-proxy")) {
d.remove();
}
},
// override
getDragData: function(e){
var target = this.view.findItemFromChild(e.getTarget());
if(target) {
if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {
this.view.select(target);
this.ms.setValue(this.ms.getValue());
}
if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;
var dragData = {
sourceView: this.view,
viewNodes: [],
records: []
};
if (this.view.getSelectionCount() == 1) {
var i = this.view.getSelectedIndexes()[0];
var n = this.view.getNode(i);
dragData.viewNodes.push(dragData.ddel = n);
dragData.records.push(this.view.store.getAt(i));
dragData.repairXY = Ext.fly(n).getXY();
} else {
dragData.ddel = document.createElement('div');
dragData.ddel.className = 'multi-proxy';
this.collectSelection(dragData);
}
return dragData;
}
return false;
},
// override the default repairXY.
getRepairXY : function(e){
return this.dragData.repairXY;
},
// private
setDraggable: function(ddGroup){
if (!ddGroup) return;
if (Ext.isArray(ddGroup)) {
Ext.each(ddGroup, this.setDraggable, this);
return;
}
this.addToGroup(ddGroup);
}
});
Ext.ux.form.MultiSelect.DropZone = function(ms, config){
this.ms = ms;
this.view = ms.view;
var ddGroup = config.ddGroup || 'MultiselectDD';
var dd;
if (Ext.isArray(ddGroup)){
dd = ddGroup.shift();
} else {
dd = ddGroup;
ddGroup = null;
}
Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
this.setDroppable(ddGroup);
};
Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {
/**
* Part of the Ext.dd.DropZone interface. If no target node is found, the
* whole Element becomes the target, and this causes the drop gesture to append.
*/
getTargetFromEvent : function(e) {
var target = e.getTarget();
return target;
},
// private
getDropPoint : function(e, n, dd){
if (n == this.ms.fs.body.dom) { return "below"; }
var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;
var c = t + (b - t) / 2;
var y = Ext.lib.Event.getPageY(e);
if(y <= c) {
return "above";
}else{
return "below";
}
},
// private
isValidDropPoint: function(pt, n, data) {
if (!data.viewNodes || (data.viewNodes.length != 1)) {
return true;
}
var d = data.viewNodes[0];
if (d == n) {
return false;
}
if ((pt == "below") && (n.nextSibling == d)) {
return false;
}
if ((pt == "above") && (n.previousSibling == d)) {
return false;
}
return true;
},
// override
onNodeEnter : function(n, dd, e, data){
return false;
},
// override
onNodeOver : function(n, dd, e, data){
var dragElClass = this.dropNotAllowed;
var pt = this.getDropPoint(e, n, dd);
if (this.isValidDropPoint(pt, n, data)) {
if (this.ms.appendOnly) {
return "x-tree-drop-ok-below";
}
// set the insert point style on the target node
if (pt) {
var targetElClass;
if (pt == "above"){
dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
targetElClass = "x-view-drag-insert-above";
} else {
dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
targetElClass = "x-view-drag-insert-below";
}
if (this.lastInsertClass != targetElClass){
Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);
this.lastInsertClass = targetElClass;
}
}
}
return dragElClass;
},
// private
onNodeOut : function(n, dd, e, data){
this.removeDropIndicators(n);
},
// private
onNodeDrop : function(n, dd, e, data){
if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {
return false;
}
var pt = this.getDropPoint(e, n, dd);
if (n != this.ms.fs.body.dom)
n = this.view.findItemFromChild(n);
var insertAt = (this.ms.appendOnly || (n == this.ms.fs.body.dom)) ? this.view.store.getCount() : this.view.indexOf(n);
if (pt == "below") {
insertAt++;
}
var dir = false;
// Validate if dragging within the same MultiSelect
if (data.sourceView == this.view) {
// If the first element to be inserted below is the target node, remove it
if (pt == "below") {
if (data.viewNodes[0] == n) {
data.viewNodes.shift();
}
} else { // If the last element to be inserted above is the target node, remove it
if (data.viewNodes[data.viewNodes.length - 1] == n) {
data.viewNodes.pop();
}
}
// Nothing to drop...
if (!data.viewNodes.length) {
return false;
}
// If we are moving DOWN, then because a store.remove() takes place first,
// the insertAt must be decremented.
if (insertAt > this.view.store.indexOf(data.records[0])) {
dir = 'down';
insertAt--;
}
}
for (var i = 0; i < data.records.length; i++) {
var r = data.records[i];
if (data.sourceView) {
data.sourceView.store.remove(r);
}
this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);
var si = this.view.store.sortInfo;
if(si){
this.view.store.sort(si.field, si.direction);
}
}
return true;
},
// private
removeDropIndicators : function(n){
if(n){
Ext.fly(n).removeClass([
"x-view-drag-insert-above",
"x-view-drag-insert-left",
"x-view-drag-insert-right",
"x-view-drag-insert-below"]);
this.lastInsertClass = "_noclass";
}
},
// private
setDroppable: function(ddGroup){
if (!ddGroup) return;
if (Ext.isArray(ddGroup)) {
Ext.each(ddGroup, this.setDroppable, this);
return;
}
this.addToGroup(ddGroup);
}
});
/* Fix for Opera, which does not seem to include the map function on Array's */ if (!Array.prototype.map) { Array.prototype.map = function(fun){ var len = this.length; if (typeof fun != 'function') { throw new TypeError(); } var res = new Array(len); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) { res[i] = fun.call(thisp, this[i], i, this); } } return res; }; } Ext.ns('Ext.ux.data'); /** * @class Ext.ux.data.PagingMemoryProxy * @extends Ext.data.MemoryProxy * <p>Paging Memory Proxy, allows to use paging grid with in memory dataset</p> */ Ext.ux.data.PagingMemoryProxy = Ext.extend(Ext.data.MemoryProxy, { constructor : function(data){ Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this); this.data = data; }, doRequest : function(action, rs, params, reader, callback, scope, options){ params = params || {}; var result; try { result = reader.readRecords(this.data); } catch (e) { this.fireEvent('loadexception', this, options, null, e); callback.call(scope, null, options, false); return; } // filtering if (params.filter !== undefined) { result.records = result.records.filter(function(el){ if (typeof(el) == 'object') { var att = params.filterCol || 0; return String(el.data[att]).match(params.filter) ? true : false; } else { return String(el).match(params.filter) ? true : false; } }); result.totalRecords = result.records.length; } // sorting if (params.sort !== undefined) { // use integer as params.sort to specify column, since arrays are not named // params.sort=0; would also match a array without columns var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1; var fn = function(r1, r2){ return r1 < r2; }; result.records.sort(function(a, b){ var v = 0; if (typeof(a) == 'object') { v = fn(a.data[params.sort], b.data[params.sort]) * dir; } else { v = fn(a, b) * dir; } if (v == 0) { v = (a.index < b.index ? -1 : 1); } return v; }); } // paging (use undefined cause start can also be 0 (thus false)) if (params.start !== undefined && params.limit !== undefined) { result.records = result.records.slice(params.start, params.start + params.limit); } callback.call(scope, result, options, true); } }); //backwards compat. Ext.data.PagingMemoryProxy = Ext.ux.data.PagingMemoryProxy; Ext.ux.PanelResizer = Ext.extend(Ext.util.Observable, {
minHeight: 0,
maxHeight:10000000,
constructor: function(config){
Ext.apply(this, config);
this.events = {};
Ext.ux.PanelResizer.superclass.constructor.call(this, config);
},
init : function(p){
this.panel = p;
if(this.panel.elements.indexOf('footer')==-1){
p.elements += ',footer';
}
p.on('render', this.onRender, this);
},
onRender : function(p){
this.handle = p.footer.createChild({cls:'x-panel-resize'});
this.tracker = new Ext.dd.DragTracker({
onStart: this.onDragStart.createDelegate(this),
onDrag: this.onDrag.createDelegate(this),
onEnd: this.onDragEnd.createDelegate(this),
tolerance: 3,
autoStart: 300
});
this.tracker.initEl(this.handle);
p.on('beforedestroy', this.tracker.destroy, this.tracker);
},
// private
onDragStart: function(e){
this.dragging = true;
this.startHeight = this.panel.el.getHeight();
this.fireEvent('dragstart', this, e);
},
// private
onDrag: function(e){
this.panel.setHeight((this.startHeight-this.tracker.getOffset()[1]).constrain(this.minHeight, this.maxHeight));
this.fireEvent('drag', this, e);
},
// private
onDragEnd: function(e){
this.dragging = false;
this.fireEvent('dragend', this, e);
}
});
Ext.preg('panelresizer', Ext.ux.PanelResizer);Ext.ux.Portal = Ext.extend(Ext.Panel, {
layout : 'column',
autoScroll : true,
cls : 'x-portal',
defaultType : 'portalcolumn',
initComponent : function(){
Ext.ux.Portal.superclass.initComponent.call(this);
this.addEvents({
validatedrop:true,
beforedragover:true,
dragover:true,
beforedrop:true,
drop:true
});
},
initEvents : function(){
Ext.ux.Portal.superclass.initEvents.call(this);
this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);
},
beforeDestroy : function() {
if(this.dd){
this.dd.unreg();
}
Ext.ux.Portal.superclass.beforeDestroy.call(this);
}
});
Ext.reg('portal', Ext.ux.Portal);
Ext.ux.Portal.DropZone = function(portal, cfg){
this.portal = portal;
Ext.dd.ScrollManager.register(portal.body);
Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
portal.body.ddScrollConfig = this.ddScrollConfig;
};
Ext.extend(Ext.ux.Portal.DropZone, Ext.dd.DropTarget, {
ddScrollConfig : {
vthresh: 50,
hthresh: -1,
animate: true,
increment: 200
},
createEvent : function(dd, e, data, col, c, pos){
return {
portal: this.portal,
panel: data.panel,
columnIndex: col,
column: c,
position: pos,
data: data,
source: dd,
rawEvent: e,
status: this.dropAllowed
};
},
notifyOver : function(dd, e, data){
var xy = e.getXY(), portal = this.portal, px = dd.proxy;
// case column widths
if(!this.grid){
this.grid = this.getGrid();
}
// handle case scroll where scrollbars appear during drag
var cw = portal.body.dom.clientWidth;
if(!this.lastCW){
this.lastCW = cw;
}else if(this.lastCW != cw){
this.lastCW = cw;
portal.doLayout();
this.grid = this.getGrid();
}
// determine column
var col = 0, xs = this.grid.columnX, cmatch = false;
for(var len = xs.length; col < len; col++){
if(xy[0] < (xs[col].x + xs[col].w)){
cmatch = true;
break;
}
}
// no match, fix last index
if(!cmatch){
col--;
}
// find insert position
var p, match = false, pos = 0,
c = portal.items.itemAt(col),
items = c.items.items, overSelf = false;
for(var len = items.length; pos < len; pos++){
p = items[pos];
var h = p.el.getHeight();
if(h === 0){
overSelf = true;
}
else if((p.el.getY()+(h/2)) > xy[1]){
match = true;
break;
}
}
pos = (match && p ? pos : c.items.getCount()) + (overSelf ? -1 : 0);
var overEvent = this.createEvent(dd, e, data, col, c, pos);
if(portal.fireEvent('validatedrop', overEvent) !== false &&
portal.fireEvent('beforedragover', overEvent) !== false){
// make sure proxy width is fluid
px.getProxy().setWidth('auto');
if(p){
px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);
}else{
px.moveProxy(c.el.dom, null);
}
this.lastPos = {c: c, col: col, p: overSelf || (match && p) ? pos : false};
this.scrollPos = portal.body.getScroll();
portal.fireEvent('dragover', overEvent);
return overEvent.status;
}else{
return overEvent.status;
}
},
notifyOut : function(){
delete this.grid;
},
notifyDrop : function(dd, e, data){
delete this.grid;
if(!this.lastPos){
return;
}
var c = this.lastPos.c, col = this.lastPos.col, pos = this.lastPos.p;
var dropEvent = this.createEvent(dd, e, data, col, c,
pos !== false ? pos : c.items.getCount());
if(this.portal.fireEvent('validatedrop', dropEvent) !== false &&
this.portal.fireEvent('beforedrop', dropEvent) !== false){
dd.proxy.getProxy().remove();
dd.panel.el.dom.parentNode.removeChild(dd.panel.el.dom);
if(pos !== false){
if(c == dd.panel.ownerCt && (c.items.items.indexOf(dd.panel) <= pos)){
pos++;
}
c.insert(pos, dd.panel);
}else{
c.add(dd.panel);
}
c.doLayout();
this.portal.fireEvent('drop', dropEvent);
// scroll position is lost on drop, fix it
var st = this.scrollPos.top;
if(st){
var d = this.portal.body.dom;
setTimeout(function(){
d.scrollTop = st;
}, 10);
}
}
delete this.lastPos;
},
// internal cache of body and column coords
getGrid : function(){
var box = this.portal.bwrap.getBox();
box.columnX = [];
this.portal.items.each(function(c){
box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
});
return box;
},
// unregister the dropzone from ScrollManager
unreg: function() {
//Ext.dd.ScrollManager.unregister(this.portal.body);
Ext.ux.Portal.DropZone.superclass.unreg.call(this);
}
});
Ext.ux.PortalColumn = Ext.extend(Ext.Container, {
layout : 'anchor',
//autoEl : 'div',//already defined by Ext.Component
defaultType : 'portlet',
cls : 'x-portal-column'
});
Ext.reg('portalcolumn', Ext.ux.PortalColumn);
Ext.ux.Portlet = Ext.extend(Ext.Panel, {
anchor : '100%',
frame : true,
collapsible : true,
draggable : true,
cls : 'x-portlet'
});
Ext.reg('portlet', Ext.ux.Portlet);
/** * @class Ext.ux.ProgressBarPager * @extends Object * Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text * * @ptype progressbarpager * @constructor * Create a new ItemSelector * @param {Object} config Configuration options * @xtype itemselector */ Ext.ux.ProgressBarPager = Ext.extend(Object, { /** * @cfg {Integer} progBarWidth * <p>The default progress bar width. Default is 225.</p> */ progBarWidth : 225, /** * @cfg {String} defaultText * <p>The text to display while the store is loading. Default is 'Loading...'</p> */ defaultText : 'Loading...', /** * @cfg {Object} defaultAnimCfg * <p>A {@link Ext.Fx Ext.Fx} configuration object. Default is { duration : 1, easing : 'bounceOut' }.</p> */ defaultAnimCfg : { duration : 1, easing : 'bounceOut' }, constructor : function(config) { if (config) { Ext.apply(this, config); } }, //public init : function (parent) { if(parent.displayInfo){ this.parent = parent; var ind = parent.items.indexOf(parent.displayItem); parent.remove(parent.displayItem, true); this.progressBar = new Ext.ProgressBar({ text : this.defaultText, width : this.progBarWidth, animate : this.defaultAnimCfg }); parent.displayItem = this.progressBar; parent.add(parent.displayItem); parent.doLayout(); Ext.apply(parent, this.parentOverrides); this.progressBar.on('render', function(pb) { pb.el.applyStyles('cursor:pointer'); pb.el.on('click', this.handleProgressBarClick, this); }, this); // Remove the click handler from the this.progressBar.on({ scope : this, beforeDestroy : function() { this.progressBar.el.un('click', this.handleProgressBarClick, this); } }); } }, // private // This method handles the click for the progress bar handleProgressBarClick : function(e){ var parent = this.parent; var displayItem = parent.displayItem; var box = this.progressBar.getBox(); var xy = e.getXY(); var position = xy[0]-box.x; var pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize); var newpage = Math.ceil(position/(displayItem.width/pages)); parent.changePage(newpage); }, // private, overriddes parentOverrides : { // private // This method updates the information via the progress bar. updateInfo : function(){ if(this.displayItem){ var count = this.store.getCount(); var pgData = this.getPageData(); var pageNum = this.readPage(pgData); var msg = count == 0 ? this.emptyMsg : String.format( this.displayMsg, this.cursor+1, this.cursor+count, this.store.getTotalCount() ); pageNum = pgData.activePage; ; var pct = pageNum / pgData.pages; this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig); } } } }); Ext.preg('progressbarpager', Ext.ux.ProgressBarPager); Ext.ns('Ext.ux.grid'); /** * @class Ext.ux.grid.RowEditor * @extends Ext.Panel * Plugin (ptype = 'roweditor') that adds the ability to rapidly edit full rows in a grid. * A validation mode may be enabled which uses AnchorTips to notify the user of all * validation errors at once. * * @ptype roweditor */ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, { floating: true, shadow: false, layout: 'hbox', cls: 'x-small-editor', buttonAlign: 'center', baseCls: 'x-row-editor', elements: 'header,footer,body', frameWidth: 5, buttonPad: 3, clicksToEdit: 'auto', monitorValid: true, focusDelay: 250, errorSummary: true, defaults: { normalWidth: true }, initComponent: function(){ Ext.ux.grid.RowEditor.superclass.initComponent.call(this); this.addEvents( /** * @event beforeedit * Fired before the row editor is activated. * If the listener returns <tt>false</tt> the editor will not be activated. * @param {Ext.ux.grid.RowEditor} roweditor This object * @param {Number} rowIndex The rowIndex of the row just edited */ 'beforeedit', /** * @event validateedit * Fired after a row is edited and passes validation. * If the listener returns <tt>false</tt> changes to the record will not be set. * @param {Ext.ux.grid.RowEditor} roweditor This object * @param {Object} changes Object with changes made to the record. * @param {Ext.data.Record} r The Record that was edited. * @param {Number} rowIndex The rowIndex of the row just edited */ 'validateedit', /** * @event afteredit * Fired after a row is edited and passes validation. This event is fired * after the store's update event is fired with this edit. * @param {Ext.ux.grid.RowEditor} roweditor This object * @param {Object} changes Object with changes made to the record. * @param {Ext.data.Record} r The Record that was edited. * @param {Number} rowIndex The rowIndex of the row just edited */ 'afteredit' ); }, init: function(grid){ this.grid = grid; this.ownerCt = grid; if(this.clicksToEdit === 2){ grid.on('rowdblclick', this.onRowDblClick, this); }else{ grid.on('rowclick', this.onRowClick, this); if(Ext.isIE){ grid.on('rowdblclick', this.onRowDblClick, this); } } // stopEditing without saving when a record is removed from Store. grid.getStore().on('remove', function() { this.stopEditing(false); },this); grid.on({ scope: this, keydown: this.onGridKey, columnresize: this.verifyLayout, columnmove: this.refreshFields, reconfigure: this.refreshFields, destroy : this.destroy, bodyscroll: { buffer: 250, fn: this.positionButtons } }); grid.getColumnModel().on('hiddenchange', this.verifyLayout, this, {delay:1}); grid.getView().on('refresh', this.stopEditing.createDelegate(this, [])); }, refreshFields: function(){ this.initFields(); this.verifyLayout(); }, isDirty: function(){ var dirty; this.items.each(function(f){ if(String(this.values[f.id]) !== String(f.getValue())){ dirty = true; return false; } }, this); return dirty; }, startEditing: function(rowIndex, doFocus){ if(this.editing && this.isDirty()){ this.showTooltip('You need to commit or cancel your changes'); return; } this.editing = true; if(typeof rowIndex == 'object'){ rowIndex = this.grid.getStore().indexOf(rowIndex); } if(this.fireEvent('beforeedit', this, rowIndex) !== false){ var g = this.grid, view = g.getView(); var row = view.getRow(rowIndex); var record = g.store.getAt(rowIndex); this.record = record; this.rowIndex = rowIndex; this.values = {}; if(!this.rendered){ this.render(view.getEditorParent()); } var w = Ext.fly(row).getWidth(); this.setSize(w); if(!this.initialized){ this.initFields(); } var cm = g.getColumnModel(), fields = this.items.items, f, val; for(var i = 0, len = cm.getColumnCount(); i < len; i++){ val = this.preEditValue(record, cm.getDataIndex(i)); f = fields[i]; f.setValue(val); this.values[f.id] = val || ''; } this.verifyLayout(true); if(!this.isVisible()){ this.setPagePosition(Ext.fly(row).getXY()); } else{ this.el.setXY(Ext.fly(row).getXY(), {duration:0.15}); } if(!this.isVisible()){ this.show().doLayout(); } if(doFocus !== false){ this.doFocus.defer(this.focusDelay, this); } } }, stopEditing : function(saveChanges){ this.editing = false; if(!this.isVisible()){ return; } if(saveChanges === false || !this.isValid()){ this.hide(); return; } var changes = {}, r = this.record, hasChange = false; var cm = this.grid.colModel, fields = this.items.items; for(var i = 0, len = cm.getColumnCount(); i < len; i++){ if(!cm.isHidden(i)){ var dindex = cm.getDataIndex(i); if(!Ext.isEmpty(dindex)){ var oldValue = r.data[dindex]; var value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex); if(String(oldValue) !== String(value)){ changes[dindex] = value; hasChange = true; } } } } if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){ r.beginEdit(); for(var k in changes){ if(changes.hasOwnProperty(k)){ r.set(k, changes[k]); } } r.endEdit(); this.fireEvent('afteredit', this, changes, r, this.rowIndex); } this.hide(); }, verifyLayout: function(force){ if(this.el && (this.isVisible() || force === true)){ var row = this.grid.getView().getRow(this.rowIndex); this.setSize(Ext.fly(row).getWidth(), Ext.isIE ? Ext.fly(row).getHeight() + (Ext.isBorderBox ? 9 : 0) : undefined); var cm = this.grid.colModel, fields = this.items.items; for(var i = 0, len = cm.getColumnCount(); i < len; i++){ if(!cm.isHidden(i)){ var adjust = 0; if(i === 0){ adjust += 0; // outer padding } if(i === (len - 1)){ adjust += 3; // outer padding } else{ adjust += 1; } fields[i].show(); fields[i].setWidth(cm.getColumnWidth(i) - adjust); } else{ fields[i].hide(); } } this.doLayout(); this.positionButtons(); } }, slideHide : function(){ this.hide(); }, initFields: function(){ var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins; this.removeAll(false); for(var i = 0, len = cm.getColumnCount(); i < len; i++){ var c = cm.getColumnAt(i); var ed = c.getEditor(); if(!ed){ ed = c.displayEditor || new Ext.form.DisplayField(); } if(i == 0){ ed.margins = pm('0 1 2 1'); } else if(i == len - 1){ ed.margins = pm('0 0 2 1'); } else{ ed.margins = pm('0 1 2'); } ed.setWidth(cm.getColumnWidth(i)); ed.column = c; if(ed.ownerCt !== this){ ed.on('focus', this.ensureVisible, this); ed.on('specialkey', this.onKey, this); } this.insert(i, ed); } this.initialized = true; }, onKey: function(f, e){ if(e.getKey() === e.ENTER){ this.stopEditing(true); e.stopPropagation(); } }, onGridKey: function(e){ if(e.getKey() === e.ENTER && !this.isVisible()){ var r = this.grid.getSelectionModel().getSelected(); if(r){ var index = this.grid.store.indexOf(r); this.startEditing(index); e.stopPropagation(); } } }, ensureVisible: function(editor){ if(this.isVisible()){ this.grid.getView().ensureVisible(this.rowIndex, this.grid.colModel.getIndexById(editor.column.id), true); } }, onRowClick: function(g, rowIndex, e){ if(this.clicksToEdit == 'auto'){ var li = this.lastClickIndex; this.lastClickIndex = rowIndex; if(li != rowIndex && !this.isVisible()){ return; } } this.startEditing(rowIndex, false); this.doFocus.defer(this.focusDelay, this, [e.getPoint()]); }, onRowDblClick: function(g, rowIndex, e){ this.startEditing(rowIndex, false); this.doFocus.defer(this.focusDelay, this, [e.getPoint()]); }, onRender: function(){ Ext.ux.grid.RowEditor.superclass.onRender.apply(this, arguments); this.el.swallowEvent(['keydown', 'keyup', 'keypress']); this.btns = new Ext.Panel({ baseCls: 'x-plain', cls: 'x-btns', elements:'body', layout: 'table', width: (this.minButtonWidth * 2) + (this.frameWidth * 2) + (this.buttonPad * 4), // width must be specified for IE items: [{ ref: 'saveBtn', itemId: 'saveBtn', xtype: 'button', text: this.saveText || 'Save', width: this.minButtonWidth, handler: this.stopEditing.createDelegate(this, [true]) }, { xtype: 'button', text: this.cancelText || 'Cancel', width: this.minButtonWidth, handler: this.stopEditing.createDelegate(this, [false]) }] }); this.btns.render(this.bwrap); }, afterRender: function(){ Ext.ux.grid.RowEditor.superclass.afterRender.apply(this, arguments); this.positionButtons(); if(this.monitorValid){ this.startMonitoring(); } }, onShow: function(){ if(this.monitorValid){ this.startMonitoring(); } Ext.ux.grid.RowEditor.superclass.onShow.apply(this, arguments); }, onHide: function(){ Ext.ux.grid.RowEditor.superclass.onHide.apply(this, arguments); this.stopMonitoring(); this.grid.getView().focusRow(this.rowIndex); }, positionButtons: function(){ if(this.btns){ var h = this.el.dom.clientHeight; var view = this.grid.getView(); var scroll = view.scroller.dom.scrollLeft; var width = view.mainBody.getWidth(); var bw = this.btns.getWidth(); this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2}); } }, // private preEditValue : function(r, field){ var value = r.data[field]; return this.autoEncode && typeof value === 'string' ? Ext.util.Format.htmlDecode(value) : value; }, // private postEditValue : function(value, originalValue, r, field){ return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value; }, doFocus: function(pt){ if(this.isVisible()){ var index = 0; if(pt){ index = this.getTargetColumnIndex(pt); } var cm = this.grid.getColumnModel(); for(var i = index||0, len = cm.getColumnCount(); i < len; i++){ var c = cm.getColumnAt(i); if(!c.hidden && c.getEditor()){ c.getEditor().focus(); break; } } } }, getTargetColumnIndex: function(pt){ var grid = this.grid, v = grid.view; var x = pt.left; var cms = grid.colModel.config; var i = 0, match = false; for(var len = cms.length, c; c = cms[i]; i++){ if(!c.hidden){ if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){ match = i; break; } } } return match; }, startMonitoring : function(){ if(!this.bound && this.monitorValid){ this.bound = true; Ext.TaskMgr.start({ run : this.bindHandler, interval : this.monitorPoll || 200, scope: this }); } }, stopMonitoring : function(){ this.bound = false; if(this.tooltip){ this.tooltip.hide(); } }, isValid: function(){ var valid = true; this.items.each(function(f){ if(!f.isValid(true)){ valid = false; return false; } }); return valid; }, // private bindHandler : function(){ if(!this.bound){ return false; // stops binding } var valid = this.isValid(); if(!valid && this.errorSummary){ this.showTooltip(this.getErrorText().join('')); } this.btns.saveBtn.setDisabled(!valid); this.fireEvent('validation', this, valid); }, showTooltip: function(msg){ var t = this.tooltip; if(!t){ t = this.tooltip = new Ext.ToolTip({ maxWidth: 600, cls: 'errorTip', width: 300, title: 'Errors', autoHide: false, anchor: 'left', anchorToTarget: true, mouseOffset: [40,0] }); } t.initTarget(this.items.last().getEl()); if(!t.rendered){ t.show(); t.hide(); } t.body.update(msg); t.doAutoWidth(); t.show(); }, getErrorText: function(){ var data = ['<ul>']; this.items.each(function(f){ if(!f.isValid(true)){ data.push('<li>', f.activeError, '</li>'); } }); data.push('</ul>'); return data; } }); Ext.preg('roweditor', Ext.ux.grid.RowEditor); Ext.override(Ext.form.Field, { markInvalid : function(msg){ if(!this.rendered || this.preventMark){ // not rendered return; } msg = msg || this.invalidText; var mt = this.getMessageHandler(); if(mt){ mt.mark(this, msg); }else if(this.msgTarget){ this.el.addClass(this.invalidClass); var t = Ext.getDom(this.msgTarget); if(t){ t.innerHTML = msg; t.style.display = this.msgDisplay; } } this.activeError = msg; this.fireEvent('invalid', this, msg); } }); Ext.override(Ext.ToolTip, { doAutoWidth : function(){ var bw = this.body.getTextWidth(); if(this.title){ bw = Math.max(bw, this.header.child('span').getTextWidth(this.title)); } bw += this.getFrameWidth() + (this.closable ? 20 : 0) + this.body.getPadding("lr") + 20; this.setWidth(bw.constrain(this.minWidth, this.maxWidth)); // IE7 repaint bug on initial show if(Ext.isIE7 && !this.repainted){ this.el.repaint(); this.repainted = true; } } }); Ext.ns('Ext.ux.grid');
/**
* @class Ext.ux.grid.RowExpander
* @extends Ext.util.Observable
* Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
* a second row body which expands/contracts. The expand/contract behavior is configurable to react
* on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
*
* @ptype rowexpander
*/
Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {
/**
* @cfg {Boolean} expandOnEnter
* <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
* key is pressed (defaults to <tt>true</tt>).
*/
expandOnEnter : true,
/**
* @cfg {Boolean} expandOnDblClick
* <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
* (defaults to <tt>true</tt>).
*/
expandOnDblClick : true,
header : '',
width : 20,
sortable : false,
fixed : true,
menuDisabled : true,
dataIndex : '',
id : 'expander',
lazyRender : true,
enableCaching : true,
constructor: function(config){
Ext.apply(this, config);
this.addEvents({
/**
* @event beforeexpand
* Fires before the row expands. Have the listener return false to prevent the row from expanding.
* @param {Object} this RowExpander object.
* @param {Object} Ext.data.Record Record for the selected row.
* @param {Object} body body element for the secondary row.
* @param {Number} rowIndex The current row index.
*/
beforeexpand: true,
/**
* @event expand
* Fires after the row expands.
* @param {Object} this RowExpander object.
* @param {Object} Ext.data.Record Record for the selected row.
* @param {Object} body body element for the secondary row.
* @param {Number} rowIndex The current row index.
*/
expand: true,
/**
* @event beforecollapse
* Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
* @param {Object} this RowExpander object.
* @param {Object} Ext.data.Record Record for the selected row.
* @param {Object} body body element for the secondary row.
* @param {Number} rowIndex The current row index.
*/
beforecollapse: true,
/**
* @event collapse
* Fires after the row collapses.
* @param {Object} this RowExpander object.
* @param {Object} Ext.data.Record Record for the selected row.
* @param {Object} body body element for the secondary row.
* @param {Number} rowIndex The current row index.
*/
collapse: true
});
Ext.ux.grid.RowExpander.superclass.constructor.call(this);
if(this.tpl){
if(typeof this.tpl == 'string'){
this.tpl = new Ext.Template(this.tpl);
}
this.tpl.compile();
}
this.state = {};
this.bodyContent = {};
},
getRowClass : function(record, rowIndex, p, ds){
p.cols = p.cols-1;
var content = this.bodyContent[record.id];
if(!content && !this.lazyRender){
content = this.getBodyContent(record, rowIndex);
}
if(content){
p.body = content;
}
return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
},
init : function(grid){
this.grid = grid;
var view = grid.getView();
view.getRowClass = this.getRowClass.createDelegate(this);
view.enableRowBody = true;
grid.on('render', this.onRender, this);
grid.on('destroy', this.onDestroy, this);
},
// @private
onRender: function() {
var grid = this.grid;
var mainBody = grid.getView().mainBody;
mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});
if (this.expandOnEnter) {
this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {
'enter' : this.onEnter,
scope: this
});
}
if (this.expandOnDblClick) {
grid.on('rowdblclick', this.onRowDblClick, this);
}
},
// @private
onDestroy: function() {
this.keyNav.disable();
delete this.keyNav;
var mainBody = this.grid.getView().mainBody;
mainBody.un('mousedown', this.onMouseDown, this);
},
// @private
onRowDblClick: function(grid, rowIdx, e) {
this.toggleRow(rowIdx);
},
onEnter: function(e) {
var g = this.grid;
var sm = g.getSelectionModel();
var sels = sm.getSelections();
for (var i = 0, len = sels.length; i < len; i++) {
var rowIdx = g.getStore().indexOf(sels[i]);
this.toggleRow(rowIdx);
}
},
getBodyContent : function(record, index){
if(!this.enableCaching){
return this.tpl.apply(record.data);
}
var content = this.bodyContent[record.id];
if(!content){
content = this.tpl.apply(record.data);
this.bodyContent[record.id] = content;
}
return content;
},
onMouseDown : function(e, t){
e.stopEvent();
var row = e.getTarget('.x-grid3-row');
this.toggleRow(row);
},
renderer : function(v, p, record){
p.cellAttr = 'rowspan="2"';
return '<div class="x-grid3-row-expander"> </div>';
},
beforeExpand : function(record, body, rowIndex){
if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
if(this.tpl && this.lazyRender){
body.innerHTML = this.getBodyContent(record, rowIndex);
}
return true;
}else{
return false;
}
},
toggleRow : function(row){
if(typeof row == 'number'){
row = this.grid.view.getRow(row);
}
this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
},
expandRow : function(row){
if(typeof row == 'number'){
row = this.grid.view.getRow(row);
}
var record = this.grid.store.getAt(row.rowIndex);
var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
if(this.beforeExpand(record, body, row.rowIndex)){
this.state[record.id] = true;
Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
this.fireEvent('expand', this, record, body, row.rowIndex);
}
},
collapseRow : function(row){
if(typeof row == 'number'){
row = this.grid.view.getRow(row);
}
var record = this.grid.store.getAt(row.rowIndex);
var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
this.state[record.id] = false;
Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
this.fireEvent('collapse', this, record, body, row.rowIndex);
}
}
});
Ext.preg('rowexpander', Ext.ux.grid.RowExpander);
//backwards compat
Ext.grid.RowExpander = Ext.ux.grid.RowExpander;// We are adding these custom layouts to a namespace that does not // exist by default in Ext, so we have to add the namespace first: Ext.ns('Ext.ux.layout'); /** * @class Ext.ux.layout.RowLayout * @extends Ext.layout.ContainerLayout * <p>This is the layout style of choice for creating structural layouts in a multi-row format where the height of * each row can be specified as a percentage or fixed height. Row widths can also be fixed, percentage or auto. * This class is intended to be extended or created via the layout:'ux.row' {@link Ext.Container#layout} config, * and should generally not need to be created directly via the new keyword.</p> * <p>RowLayout does not have any direct config options (other than inherited ones), but it does support a * specific config property of <b><tt>rowHeight</tt></b> that can be included in the config of any panel added to it. The * layout will use the rowHeight (if present) or height of each panel during layout to determine how to size each panel. * If height or rowHeight is not specified for a given panel, its height will default to the panel's height (or auto).</p> * <p>The height property is always evaluated as pixels, and must be a number greater than or equal to 1. * The rowHeight property is always evaluated as a percentage, and must be a decimal value greater than 0 and * less than 1 (e.g., .25).</p> * <p>The basic rules for specifying row heights are pretty simple. The logic makes two passes through the * set of contained panels. During the first layout pass, all panels that either have a fixed height or none * specified (auto) are skipped, but their heights are subtracted from the overall container height. During the second * pass, all panels with rowHeights are assigned pixel heights in proportion to their percentages based on * the total <b>remaining</b> container height. In other words, percentage height panels are designed to fill the space * left over by all the fixed-height and/or auto-height panels. Because of this, while you can specify any number of rows * with different percentages, the rowHeights must always add up to 1 (or 100%) when added together, otherwise your * layout may not render as expected. Example usage:</p> * <pre><code> // All rows are percentages -- they must add up to 1 var p = new Ext.Panel({ title: 'Row Layout - Percentage Only', layout:'ux.row', items: [{ title: 'Row 1', rowHeight: .25 },{ title: 'Row 2', rowHeight: .6 },{ title: 'Row 3', rowHeight: .15 }] }); // Mix of height and rowHeight -- all rowHeight values must add // up to 1. The first row will take up exactly 120px, and the last two // rows will fill the remaining container height. var p = new Ext.Panel({ title: 'Row Layout - Mixed', layout:'ux.row', items: [{ title: 'Row 1', height: 120, // standard panel widths are still supported too: width: '50%' // or 200 },{ title: 'Row 2', rowHeight: .8, width: 300 },{ title: 'Row 3', rowHeight: .2 }] }); </code></pre> */ Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, { // private monitorResize:true, // private isValidParent : function(c, target){ return c.getEl().dom.parentNode == this.innerCt.dom; }, // private onLayout : function(ct, target){ var rs = ct.items.items, len = rs.length, r, i; if(!this.innerCt){ target.addClass('ux-row-layout-ct'); this.innerCt = target.createChild({cls:'x-row-inner'}); } this.renderAll(ct, this.innerCt); var size = target.getViewSize(); if(size.width < 1 && size.height < 1){ // display none? return; } var h = size.height - target.getPadding('tb'), ph = h; this.innerCt.setSize({height:h}); // some rows can be percentages while others are fixed // so we need to make 2 passes for(i = 0; i < len; i++){ r = rs[i]; if(!r.rowHeight){ ph -= (r.getSize().height + r.getEl().getMargins('tb')); } } ph = ph < 0 ? 0 : ph; for(i = 0; i < len; i++){ r = rs[i]; if(r.rowHeight){ r.setSize({height: Math.floor(r.rowHeight*ph) - r.getEl().getMargins('tb')}); } } } /** * @property activeItem * @hide */ }); Ext.Container.LAYOUTS['ux.row'] = Ext.ux.layout.RowLayout; Ext.ns('Ext.ux.form');
Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
initComponent : function(){
Ext.ux.form.SearchField.superclass.initComponent.call(this);
this.on('specialkey', function(f, e){
if(e.getKey() == e.ENTER){
this.onTrigger2Click();
}
}, this);
},
validationEvent:false,
validateOnBlur:false,
trigger1Class:'x-form-clear-trigger',
trigger2Class:'x-form-search-trigger',
hideTrigger1:true,
width:180,
hasSearch : false,
paramName : 'query',
onTrigger1Click : function(){
if(this.hasSearch){
this.el.dom.value = '';
var o = {start: 0};
this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramName] = '';
this.store.reload({params:o});
this.triggers[0].hide();
this.hasSearch = false;
}
},
onTrigger2Click : function(){
var v = this.getRawValue();
if(v.length < 1){
this.onTrigger1Click();
return;
}
var o = {start: 0};
this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramName] = v;
this.store.reload({params:o});
this.hasSearch = true;
this.triggers[0].show();
}
});Ext.ns('Ext.ux.form');
/**
* @class Ext.ux.form.SelectBox
* @extends Ext.form.ComboBox
* <p>Makes a ComboBox more closely mimic an HTML SELECT. Supports clicking and dragging
* through the list, with item selection occurring when the mouse button is released.
* When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
* on inner elements. Re-enabling editable after calling this will NOT work.</p>
* @author Corey Gilmore http://extjs.com/forum/showthread.php?t=6392
* @history 2007-07-08 jvs
* Slight mods for Ext 2.0
* @xtype selectbox
*/
Ext.ux.form.SelectBox = Ext.extend(Ext.form.ComboBox, {
constructor: function(config){
this.searchResetDelay = 1000;
config = config || {};
config = Ext.apply(config || {}, {
editable: false,
forceSelection: true,
rowHeight: false,
lastSearchTerm: false,
triggerAction: 'all',
mode: 'local'
});
Ext.ux.form.SelectBox.superclass.constructor.apply(this, arguments);
this.lastSelectedIndex = this.selectedIndex || 0;
},
initEvents : function(){
Ext.ux.form.SelectBox.superclass.initEvents.apply(this, arguments);
// you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE
this.el.on('keydown', this.keySearch, this, true);
this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);
},
keySearch : function(e, target, options) {
var raw = e.getKey();
var key = String.fromCharCode(raw);
var startIndex = 0;
if( !this.store.getCount() ) {
return;
}
switch(raw) {
case Ext.EventObject.HOME:
e.stopEvent();
this.selectFirst();
return;
case Ext.EventObject.END:
e.stopEvent();
this.selectLast();
return;
case Ext.EventObject.PAGEDOWN:
this.selectNextPage();
e.stopEvent();
return;
case Ext.EventObject.PAGEUP:
this.selectPrevPage();
e.stopEvent();
return;
}
// skip special keys other than the shift key
if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
return;
}
if( this.lastSearchTerm == key ) {
startIndex = this.lastSelectedIndex;
}
this.search(this.displayField, key, startIndex);
this.cshTask.delay(this.searchResetDelay);
},
onRender : function(ct, position) {
this.store.on('load', this.calcRowsPerPage, this);
Ext.ux.form.SelectBox.superclass.onRender.apply(this, arguments);
if( this.mode == 'local' ) {
this.calcRowsPerPage();
}
},
onSelect : function(record, index, skipCollapse){
if(this.fireEvent('beforeselect', this, record, index) !== false){
this.setValue(record.data[this.valueField || this.displayField]);
if( !skipCollapse ) {
this.collapse();
}
this.lastSelectedIndex = index + 1;
this.fireEvent('select', this, record, index);
}
},
render : function(ct) {
Ext.ux.form.SelectBox.superclass.render.apply(this, arguments);
if( Ext.isSafari ) {
this.el.swallowEvent('mousedown', true);
}
this.el.unselectable();
this.innerList.unselectable();
this.trigger.unselectable();
this.innerList.on('mouseup', function(e, target, options) {
if( target.id && target.id == this.innerList.id ) {
return;
}
this.onViewClick();
}, this);
this.innerList.on('mouseover', function(e, target, options) {
if( target.id && target.id == this.innerList.id ) {
return;
}
this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
this.cshTask.delay(this.searchResetDelay);
}, this);
this.trigger.un('click', this.onTriggerClick, this);
this.trigger.on('mousedown', function(e, target, options) {
e.preventDefault();
this.onTriggerClick();
}, this);
this.on('collapse', function(e, target, options) {
Ext.getDoc().un('mouseup', this.collapseIf, this);
}, this, true);
this.on('expand', function(e, target, options) {
Ext.getDoc().on('mouseup', this.collapseIf, this);
}, this, true);
},
clearSearchHistory : function() {
this.lastSelectedIndex = 0;
this.lastSearchTerm = false;
},
selectFirst : function() {
this.focusAndSelect(this.store.data.first());
},
selectLast : function() {
this.focusAndSelect(this.store.data.last());
},
selectPrevPage : function() {
if( !this.rowHeight ) {
return;
}
var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
this.focusAndSelect(this.store.getAt(index));
},
selectNextPage : function() {
if( !this.rowHeight ) {
return;
}
var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
this.focusAndSelect(this.store.getAt(index));
},
search : function(field, value, startIndex) {
field = field || this.displayField;
this.lastSearchTerm = value;
var index = this.store.find.apply(this.store, arguments);
if( index !== -1 ) {
this.focusAndSelect(index);
}
},
focusAndSelect : function(record) {
var index = typeof record === 'number' ? record : this.store.indexOf(record);
this.select(index, this.isExpanded());
this.onSelect(this.store.getAt(record), index, this.isExpanded());
},
calcRowsPerPage : function() {
if( this.store.getCount() ) {
this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
this.rowsPerPage = this.maxHeight / this.rowHeight;
} else {
this.rowHeight = false;
}
}
});
Ext.reg('selectbox', Ext.ux.form.SelectBox);
//backwards compat
Ext.ux.SelectBox = Ext.ux.form.SelectBox;
/**
* @class Ext.ux.SliderTip
* @extends Ext.Tip
* Simple plugin for using an Ext.Tip with a slider to show the slider value
*/
Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
minWidth: 10,
offsets : [0, -10],
init : function(slider){
slider.on('dragstart', this.onSlide, this);
slider.on('drag', this.onSlide, this);
slider.on('dragend', this.hide, this);
slider.on('destroy', this.destroy, this);
},
onSlide : function(slider){
this.show();
this.body.update(this.getText(slider));
this.doAutoWidth();
this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
},
getText : function(slider){
return String(slider.getValue());
}
});
Ext.ux.SlidingPager = Ext.extend(Object, {
init : function(pbar){
Ext.each(pbar.items.getRange(2,6), function(c){
c.hide();
});
var slider = new Ext.Slider({
width: 114,
minValue: 1,
maxValue: 1,
plugins: new Ext.ux.SliderTip({
getText : function(s){
return String.format('Page <b>{0}</b> of <b>{1}</b>', s.value, s.maxValue);
}
}),
listeners: {
changecomplete: function(s, v){
pbar.changePage(v);
}
}
});
pbar.insert(5, slider);
pbar.on({
change: function(pb, data){
slider.maxValue = data.pages;
slider.setValue(data.activePage);
},
beforedestroy: function(){
slider.destroy();
}
});
}
});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, {
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}));
},
onShow: function(){
if (this.wrap) {
this.wrap.dom.style.display = '';
this.wrap.dom.style.visibility = 'visible';
}
},
onHide: function(){
this.wrap.dom.style.display = 'none';
},
// 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;
/**
* @class Ext.ux.Spinner
* @extends Ext.util.Observable
* Creates a Spinner control utilized by Ext.ux.form.SpinnerField
*/
Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
incrementValue: 1,
alternateIncrementValue: 5,
triggerClass: 'x-form-spinner-trigger',
splitterClass: 'x-form-spinner-splitter',
alternateKey: Ext.EventObject.shiftKey,
defaultValue: 0,
accelerate: false,
constructor: function(config){
Ext.ux.Spinner.superclass.constructor.call(this, config);
Ext.apply(this, config);
this.mimicing = false;
},
init: function(field){
this.field = field;
field.afterMethod('onRender', this.doRender, this);
field.afterMethod('onEnable', this.doEnable, this);
field.afterMethod('onDisable', this.doDisable, this);
field.afterMethod('afterRender', this.doAfterRender, this);
field.afterMethod('onResize', this.doResize, this);
field.afterMethod('onFocus', this.doFocus, this);
field.beforeMethod('onDestroy', this.doDestroy, this);
},
doRender: function(ct, position){
var el = this.el = this.field.getEl();
var f = this.field;
if (!f.wrap) {
f.wrap = this.wrap = el.wrap({
cls: "x-form-field-wrap"
});
}
else {
this.wrap = f.wrap.addClass('x-form-field-wrap');
}
this.trigger = this.wrap.createChild({
tag: "img",
src: Ext.BLANK_IMAGE_URL,
cls: "x-form-trigger " + this.triggerClass
});
if (!f.width) {
this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
}
this.splitter = this.wrap.createChild({
tag: 'div',
cls: this.splitterClass,
style: 'width:13px; height:2px;'
});
this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();
this.proxy = this.trigger.createProxy('', this.splitter, true);
this.proxy.addClass("x-form-spinner-proxy");
this.proxy.setStyle('left', '0px');
this.proxy.setSize(14, 1);
this.proxy.hide();
this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
dragElId: this.proxy.id
});
this.initTrigger();
this.initSpinner();
},
doAfterRender: function(){
var y;
if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
this.el.position();
this.el.setY(y);
}
},
doEnable: function(){
if (this.wrap) {
this.wrap.removeClass(this.field.disabledClass);
}
},
doDisable: function(){
if (this.wrap) {
this.wrap.addClass(this.field.disabledClass);
this.el.removeClass(this.field.disabledClass);
}
},
doResize: function(w, h){
if (typeof w == 'number') {
this.el.setWidth(this.field.adjustWidth('input', w - this.trigger.getWidth()));
}
this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
},
doFocus: function(){
if (!this.mimicing) {
this.wrap.addClass('x-trigger-wrap-focus');
this.mimicing = true;
Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
delay: 10
});
this.el.on('keydown', this.checkTab, this);
}
},
// private
checkTab: function(e){
if (e.getKey() == e.TAB) {
this.triggerBlur();
}
},
// private
mimicBlur: function(e){
if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
this.triggerBlur();
}
},
// private
triggerBlur: function(){
this.mimicing = false;
Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
this.el.un("keydown", this.checkTab, this);
this.field.beforeBlur();
this.wrap.removeClass('x-trigger-wrap-focus');
this.field.onBlur.call(this.field);
},
initTrigger: function(){
this.trigger.addClassOnOver('x-form-trigger-over');
this.trigger.addClassOnClick('x-form-trigger-click');
},
initSpinner: function(){
this.field.addEvents({
'spin': true,
'spinup': true,
'spindown': true
});
this.keyNav = new Ext.KeyNav(this.el, {
"up": function(e){
e.preventDefault();
this.onSpinUp();
},
"down": function(e){
e.preventDefault();
this.onSpinDown();
},
"pageUp": function(e){
e.preventDefault();
this.onSpinUpAlternate();
},
"pageDown": function(e){
e.preventDefault();
this.onSpinDownAlternate();
},
scope: this
});
this.repeater = new Ext.util.ClickRepeater(this.trigger, {
accelerate: this.accelerate
});
this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
preventDefault: true
});
this.field.mon(this.trigger, {
mouseover: this.onMouseOver,
mouseout: this.onMouseOut,
mousemove: this.onMouseMove,
mousedown: this.onMouseDown,
mouseup: this.onMouseUp,
scope: this,
preventDefault: true
});
this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);
this.dd.setXConstraint(0, 0, 10)
this.dd.setYConstraint(1500, 1500, 10);
this.dd.endDrag = this.endDrag.createDelegate(this);
this.dd.startDrag = this.startDrag.createDelegate(this);
this.dd.onDrag = this.onDrag.createDelegate(this);
},
onMouseOver: function(){
if (this.disabled) {
return;
}
var middle = this.getMiddle();
this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
this.trigger.addClass(this.tmpHoverClass);
},
//private
onMouseOut: function(){
this.trigger.removeClass(this.tmpHoverClass);
},
//private
onMouseMove: function(){
if (this.disabled) {
return;
}
var middle = this.getMiddle();
if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
}
},
//private
onMouseDown: function(){
if (this.disabled) {
return;
}
var middle = this.getMiddle();
this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
this.trigger.addClass(this.tmpClickClass);
},
//private
onMouseUp: function(){
this.trigger.removeClass(this.tmpClickClass);
},
//private
onTriggerClick: function(){
if (this.disabled || this.el.dom.readOnly) {
return;
}
var middle = this.getMiddle();
var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
this['onSpin' + ud]();
},
//private
getMiddle: function(){
var t = this.trigger.getTop();
var h = this.trigger.getHeight();
var middle = t + (h / 2);
return middle;
},
//private
//checks if control is allowed to spin
isSpinnable: function(){
if (this.disabled || this.el.dom.readOnly) {
Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
return false;
}
return true;
},
handleMouseWheel: function(e){
//disable scrolling when not focused
if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
return;
}
var delta = e.getWheelDelta();
if (delta > 0) {
this.onSpinUp();
e.stopEvent();
}
else
if (delta < 0) {
this.onSpinDown();
e.stopEvent();
}
},
//private
startDrag: function(){
this.proxy.show();
this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
},
//private
endDrag: function(){
this.proxy.hide();
},
//private
onDrag: function(){
if (this.disabled) {
return;
}
var y = Ext.fly(this.dd.getDragEl()).getTop();
var ud = '';
if (this._previousY > y) {
ud = 'Up';
} //up
if (this._previousY < y) {
ud = 'Down';
} //down
if (ud != '') {
this['onSpin' + ud]();
}
this._previousY = y;
},
//private
onSpinUp: function(){
if (this.isSpinnable() == false) {
return;
}
if (Ext.EventObject.shiftKey == true) {
this.onSpinUpAlternate();
return;
}
else {
this.spin(false, false);
}
this.field.fireEvent("spin", this);
this.field.fireEvent("spinup", this);
},
//private
onSpinDown: function(){
if (this.isSpinnable() == false) {
return;
}
if (Ext.EventObject.shiftKey == true) {
this.onSpinDownAlternate();
return;
}
else {
this.spin(true, false);
}
this.field.fireEvent("spin", this);
this.field.fireEvent("spindown", this);
},
//private
onSpinUpAlternate: function(){
if (this.isSpinnable() == false) {
return;
}
this.spin(false, true);
this.field.fireEvent("spin", this);
this.field.fireEvent("spinup", this);
},
//private
onSpinDownAlternate: function(){
if (this.isSpinnable() == false) {
return;
}
this.spin(true, true);
this.field.fireEvent("spin", this);
this.field.fireEvent("spindown", this);
},
spin: function(down, alternate){
var v = parseFloat(this.field.getValue());
var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
(down == true) ? v -= incr : v += incr;
v = (isNaN(v)) ? this.defaultValue : v;
v = this.fixBoundries(v);
this.field.setRawValue(v);
},
fixBoundries: function(value){
var v = value;
if (this.field.minValue != undefined && v < this.field.minValue) {
v = this.field.minValue;
}
if (this.field.maxValue != undefined && v > this.field.maxValue) {
v = this.field.maxValue;
}
return this.fixPrecision(v);
},
// private
fixPrecision: function(value){
var nan = isNaN(value);
if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
return nan ? '' : value;
}
return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
},
doDestroy: function(){
if (this.trigger) {
this.trigger.remove();
}
if (this.wrap) {
this.wrap.remove();
delete this.field.wrap;
}
if (this.splitter) {
this.splitter.remove();
}
if (this.dd) {
this.dd.unreg();
this.dd = null;
}
if (this.proxy) {
this.proxy.remove();
}
if (this.repeater) {
this.repeater.purgeListeners();
}
}
});
//backwards compat
Ext.form.Spinner = Ext.ux.Spinner;Ext.ux.Spotlight = function(config){
Ext.apply(this, config);
}
Ext.ux.Spotlight.prototype = {
active : false,
animate : true,
duration: .25,
easing:'easeNone',
// private
animated : false,
createElements : function(){
var bd = Ext.getBody();
this.right = bd.createChild({cls:'x-spotlight'});
this.left = bd.createChild({cls:'x-spotlight'});
this.top = bd.createChild({cls:'x-spotlight'});
this.bottom = bd.createChild({cls:'x-spotlight'});
this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
},
show : function(el, callback, scope){
if(this.animated){
this.show.defer(50, this, [el, callback, scope]);
return;
}
this.el = Ext.get(el);
if(!this.right){
this.createElements();
}
if(!this.active){
this.all.setDisplayed('');
this.applyBounds(true, false);
this.active = true;
Ext.EventManager.onWindowResize(this.syncSize, this);
this.applyBounds(false, this.animate, false, callback, scope);
}else{
this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous
}
},
hide : function(callback, scope){
if(this.animated){
this.hide.defer(50, this, [callback, scope]);
return;
}
Ext.EventManager.removeResizeListener(this.syncSize, this);
this.applyBounds(true, this.animate, true, callback, scope);
},
doHide : function(){
this.active = false;
this.all.setDisplayed(false);
},
syncSize : function(){
this.applyBounds(false, false);
},
applyBounds : function(basePts, anim, doHide, callback, scope){
var rg = this.el.getRegion();
var dw = Ext.lib.Dom.getViewWidth(true);
var dh = Ext.lib.Dom.getViewHeight(true);
var c = 0, cb = false;
if(anim){
cb = {
callback: function(){
c++;
if(c == 4){
this.animated = false;
if(doHide){
this.doHide();
}
Ext.callback(callback, scope, [this]);
}
},
scope: this,
duration: this.duration,
easing: this.easing
};
this.animated = true;
}
this.right.setBounds(
rg.right,
basePts ? dh : rg.top,
dw - rg.right,
basePts ? 0 : (dh - rg.top),
cb);
this.left.setBounds(
0,
0,
rg.left,
basePts ? 0 : rg.bottom,
cb);
this.top.setBounds(
basePts ? dw : rg.left,
0,
basePts ? 0 : dw - rg.left,
rg.top,
cb);
this.bottom.setBounds(
0,
rg.bottom,
basePts ? 0 : rg.right,
dh - rg.bottom,
cb);
if(!anim){
if(doHide){
this.doHide();
}
if(callback){
Ext.callback(callback, scope, [this]);
}
}
},
destroy : function(){
this.doHide();
Ext.destroy(
this.right,
this.left,
this.top,
this.bottom);
delete this.el;
delete this.all;
}
};
//backwards compat
Ext.Spotlight = Ext.ux.Spotlight;/**
* @class Ext.ux.TabCloseMenu
* @extends Object
* Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs.
*
* @ptype tabclosemenu
*/
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({
items: [{
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);
e.stopEvent();
menu.showAt(e.getPoint());
}
};
Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);
Ext.ns('Ext.ux.grid'); /** * @class Ext.ux.grid.TableGrid * @extends Ext.grid.GridPanel * A Grid which creates itself from an existing HTML table element. * @history * 2007-03-01 Original version by Nige "Animal" White * 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created - * The table MUST have some type of size defined for the grid to fill. The container will be * automatically set to position relative if it isn't already. * @param {Object} config A config object that sets properties on this grid and has two additional (optional) * properties: fields and columns which allow for customizing data fields and columns for this grid. */ Ext.ux.grid.TableGrid = function(table, config){ config = config || {}; Ext.apply(this, config); var cf = config.fields || [], ch = config.columns || []; table = Ext.get(table); var ct = table.insertSibling(); var fields = [], cols = []; var headers = table.query("thead th"); for (var i = 0, h; h = headers[i]; i++) { var text = h.innerHTML; var name = 'tcol-' + i; fields.push(Ext.applyIf(cf[i] || {}, { name: name, mapping: 'td:nth(' + (i + 1) + ')/@innerHTML' })); cols.push(Ext.applyIf(ch[i] || {}, { 'header': text, 'dataIndex': name, 'width': h.offsetWidth, 'tooltip': h.title, 'sortable': true })); } var ds = new Ext.data.Store({ reader: new Ext.data.XmlReader({ record: 'tbody tr' }, fields) }); ds.loadData(table.dom); var cm = new Ext.grid.ColumnModel(cols); if (config.width || config.height) { ct.setSize(config.width || 'auto', config.height || 'auto'); } else { ct.setWidth(table.getWidth()); } if (config.remove !== false) { table.remove(); } Ext.applyIf(this, { 'ds': ds, 'cm': cm, 'sm': new Ext.grid.RowSelectionModel(), autoHeight: true, autoWidth: false }); Ext.ux.grid.TableGrid.superclass.constructor.call(this, ct, {}); }; Ext.extend(Ext.ux.grid.TableGrid, Ext.grid.GridPanel); //backwards compat Ext.grid.TableGrid = Ext.ux.grid.TableGrid; Ext.ux.TabScrollerMenu = Ext.extend(Object, { pageSize : 10, maxText : 15, menuPrefixText : 'Items', constructor : function(config) { config = config || {}; Ext.apply(this, config); }, init : function(tabPanel) { Ext.apply(tabPanel, this.tabPanelMethods); tabPanel.tabScrollerMenu = this; var thisRef = this; tabPanel.on({ render : { scope : tabPanel, single : true, fn : function() { var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this); tabPanel.createScrollers = newFn; } } }); }, // private && sequeneced createPanelsMenu : function() { var h = this.stripWrap.dom.offsetHeight; //move the right menu item to the left 18px var rtScrBtn = this.header.dom.firstChild; Ext.fly(rtScrBtn).applyStyles({ right : '18px' }); var stripWrap = Ext.get(this.strip.dom.parentNode); stripWrap.applyStyles({ 'margin-right' : '36px' }); // Add the new righthand menu var scrollMenu = this.header.insertFirst({ cls:'x-tab-tabmenu-right' }); scrollMenu.setHeight(h); scrollMenu.addClassOnOver('x-tab-tabmenu-over'); scrollMenu.on('click', this.showTabsMenu, this); this.scrollLeft.show = this.scrollLeft.show.createSequence(function() { scrollMenu.show(); }); this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() { scrollMenu.hide(); }); }, // public getPageSize : function() { return this.pageSize; }, // public setPageSize : function(pageSize) { this.pageSize = pageSize; }, // public getMaxText : function() { return this.maxText; }, // public setMaxText : function(t) { this.maxText = t; }, getMenuPrefixText : function() { return this.menuPrefixText; }, setMenuPrefixText : function(t) { this.menuPrefixText = t; }, // private && applied to the tab panel itself. tabPanelMethods : { // all execute within the scope of the tab panel // private showTabsMenu : function(e) { if (! this.tabsMenu) { this.tabsMenu = new Ext.menu.Menu(); this.on('beforedestroy', this.tabsMenu.destroy, this.tabsMenu); } this.tabsMenu.removeAll(); this.generateTabMenuItems(); var target = Ext.get(e.getTarget()); var xy = target.getXY(); //Y param + 24 pixels xy[1] += 24; this.tabsMenu.showAt(xy); }, // private generateTabMenuItems : function() { var curActive = this.getActiveTab(); var totalItems = this.items.getCount(); var pageSize = this.tabScrollerMenu.getPageSize(); if (totalItems > pageSize) { var numSubMenus = Math.floor(totalItems / pageSize); var remainder = totalItems % pageSize; // Loop through all of the items and create submenus in chunks of 10 for (var i = 0 ; i < numSubMenus; i++) { var curPage = (i + 1) * pageSize; var menuItems = []; for (var x = 0; x < pageSize; x++) { index = x + curPage - pageSize; var item = this.items.get(index); menuItems.push(this.autoGenMenuItem(item)); } this.tabsMenu.add({ text : this.tabScrollerMenu.getMenuPrefixText() + ' ' + (curPage - pageSize + 1) + ' - ' + curPage, menu : menuItems }); } // remaining items if (remainder > 0) { var start = numSubMenus * pageSize; menuItems = []; for (var i = start ; i < totalItems; i ++ ) { var item = this.items.get(i); menuItems.push(this.autoGenMenuItem(item)); } this.tabsMenu.add({ text : this.tabScrollerMenu.menuPrefixText + ' ' + (start + 1) + ' - ' + (start + menuItems.length), menu : menuItems }); } } else { this.items.each(function(item) { if (item.id != curActive.id && ! item.hidden) { menuItems.push(this.autoGenMenuItem(item)); } }, this); } }, // private autoGenMenuItem : function(item) { var maxText = this.tabScrollerMenu.getMaxText(); var text = Ext.util.Format.ellipsis(item.title, maxText); return { text : text, handler : this.showTabFromMenu, scope : this, disabled : item.disabled, tabToShow : item, iconCls : item.iconCls } }, // private showTabFromMenu : function(menuItem) { this.setActiveTab(menuItem.tabToShow); } } }); Ext.ns('Ext.ux.tree'); /** * @class Ext.ux.tree.XmlTreeLoader * @extends Ext.tree.TreeLoader * <p>A TreeLoader that can convert an XML document into a hierarchy of {@link Ext.tree.TreeNode}s. * Any text value included as a text node in the XML will be added to the parent node as an attribute * called <tt>innerText</tt>. Also, the tag name of each XML node will be added to the tree node as * an attribute called <tt>tagName</tt>.</p> * <p>By default, this class expects that your source XML will provide the necessary attributes on each * node as expected by the {@link Ext.tree.TreePanel} to display and load properly. However, you can * provide your own custom processing of node attributes by overriding the {@link #processNode} method * and modifying the attributes as needed before they are used to create the associated TreeNode.</p> * @constructor * Creates a new XmlTreeloader. * @param {Object} config A config object containing config properties. */ Ext.ux.tree.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, { /** * @property XML_NODE_ELEMENT * XML element node (value 1, read-only) * @type Number */ XML_NODE_ELEMENT : 1, /** * @property XML_NODE_TEXT * XML text node (value 3, read-only) * @type Number */ XML_NODE_TEXT : 3, // private override processResponse : function(response, node, callback){ var xmlData = response.responseXML; var root = xmlData.documentElement || xmlData; try{ node.beginUpdate(); node.appendChild(this.parseXml(root)); node.endUpdate(); if(typeof callback == "function"){ callback(this, node); } }catch(e){ this.handleFailure(response); } }, // private parseXml : function(node) { var nodes = []; Ext.each(node.childNodes, function(n){ if(n.nodeType == this.XML_NODE_ELEMENT){ var treeNode = this.createNode(n); if(n.childNodes.length > 0){ var child = this.parseXml(n); if(typeof child == 'string'){ treeNode.attributes.innerText = child; }else{ treeNode.appendChild(child); } } nodes.push(treeNode); } else if(n.nodeType == this.XML_NODE_TEXT){ var text = n.nodeValue.trim(); if(text.length > 0){ return nodes = text; } } }, this); return nodes; }, // private override createNode : function(node){ var attr = { tagName: node.tagName }; Ext.each(node.attributes, function(a){ attr[a.nodeName] = a.nodeValue; }); this.processAttributes(attr); return Ext.ux.tree.XmlTreeLoader.superclass.createNode.call(this, attr); }, /* * Template method intended to be overridden by subclasses that need to provide * custom attribute processing prior to the creation of each TreeNode. This method * will be passed a config object containing existing TreeNode attribute name/value * pairs which can be modified as needed directly (no need to return the object). */ processAttributes: Ext.emptyFn }); //backwards compat Ext.ux.XmlTreeLoader = Ext.ux.tree.XmlTreeLoader;