中间件编程

开发平台：

JavaScript

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

},
doForm : function(c, m, form, callback, scope){
var t = new Ext.Direct.Transaction({
provider: this,
action: c,
method: m.name,
args:[form, callback, scope],
cb: scope && Ext.isFunction(callback) ? callback.createDelegate(scope) : callback,
isForm: true
});
if(this.fireEvent('beforecall', this, t) !== false){
Ext.Direct.addTransaction(t);
var isUpload = String(form.getAttribute("enctype")).toLowerCase() == 'multipart/form-data',
params = {
extTID: t.tid,
extAction: c,
extMethod: m.name,
extType: 'rpc',
extUpload: String(isUpload)
};
// change made from typeof callback check to callback.params
// to support addl param passing in DirectSubmit EAC 6/2
Ext.apply(t, {
form: Ext.getDom(form),
isUpload: isUpload,
params: callback && Ext.isObject(callback.params) ? Ext.apply(params, callback.params) : params
});
this.fireEvent('call', this, t);
this.processForm(t);
}
},
processForm: function(t){
Ext.Ajax.request({
url: this.url,
params: t.params,
callback: this.onData,
scope: this,
form: t.form,
isUpload: t.isUpload,
ts: t
});
},
createMethod : function(c, m){
var f;
if(!m.formHandler){
f = function(){
this.doCall(c, m, Array.prototype.slice.call(arguments, 0));
}.createDelegate(this);
}else{
f = function(form, callback, scope){
this.doForm(c, m, form, callback, scope);
}.createDelegate(this);
}
f.directCfg = {
action: c,
method: m
};
return f;
},
getTransaction: function(opt){
return opt && opt.tid ? Ext.Direct.getTransaction(opt.tid) : null;
},
doCallback: function(t, e){
var fn = e.status ? 'success' : 'failure';
if(t && t.cb){
var hs = t.cb;
var result = e.result || e.data;
if(Ext.isFunction(hs)){
hs(result, e);
} else{
Ext.callback(hs[fn], hs.scope, [result, e]);
Ext.callback(hs.callback, hs.scope, [result, e]);
}
}
}
});
Ext.Direct.PROVIDERS['remoting'] = Ext.direct.RemotingProvider;/**
* @class Ext.Resizable
* @extends Ext.util.Observable
* <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
* and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
* the textarea in a div and set 'resizeChild' to true (or to the id of the element), <b>or</b> set wrap:true in your config and
* the element will be wrapped for you automatically.</p>
* <p>Here is the list of valid resize handles:</p>
* <pre>
Value Description
------ -------------------
'n' north
's' south
'e' east
'w' west
'nw' northwest
'sw' southwest
'se' southeast
'ne' northeast
'all' all
</pre>
* <p>Here's an example showing the creation of a typical Resizable:</p>
* <pre><code>
var resizer = new Ext.Resizable('element-id', {
handles: 'all',
minWidth: 200,
minHeight: 100,
maxWidth: 500,
maxHeight: 400,
pinned: true
});
resizer.on('resize', myHandler);
</code></pre>
* <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
* resizer.east.setDisplayed(false);</p>
* @constructor
* Create a new resizable component
* @param {Mixed} el The id or element to resize
* @param {Object} config configuration options
*/
Ext.Resizable = function(el, config){
this.el = Ext.get(el);
if(config && config.wrap){
config.resizeChild = this.el;
this.el = this.el.wrap(typeof config.wrap == 'object' ? config.wrap : {cls:'xresizable-wrap'});
this.el.id = this.el.dom.id = config.resizeChild.id + '-rzwrap';
this.el.setStyle('overflow', 'hidden');
this.el.setPositioning(config.resizeChild.getPositioning());
config.resizeChild.clearPositioning();
if(!config.width || !config.height){
var csize = config.resizeChild.getSize();
this.el.setSize(csize.width, csize.height);
}
if(config.pinned && !config.adjustments){
config.adjustments = 'auto';
}
}
/**
* The proxy Element that is resized in place of the real Element during the resize operation.
* This may be queried using {@link Ext.Element#getBox} to provide the new area to resize to.
* Read only.
* @type Ext.Element.
* @property proxy
*/
this.proxy = this.el.createProxy({tag: 'div', cls: 'x-resizable-proxy', id: this.el.id + '-rzproxy'}, Ext.getBody());
this.proxy.unselectable();
this.proxy.enableDisplayMode('block');
Ext.apply(this, config);
if(this.pinned){
this.disableTrackOver = true;
this.el.addClass('x-resizable-pinned');
}
// if the element isn't positioned, make it relative
var position = this.el.getStyle('position');
if(position != 'absolute' && position != 'fixed'){
this.el.setStyle('position', 'relative');
}
if(!this.handles){ // no handles passed, must be legacy style
this.handles = 's,e,se';
if(this.multiDirectional){
this.handles += ',n,w';
}
}
if(this.handles == 'all'){
this.handles = 'n s e w ne nw se sw';
}
var hs = this.handles.split(/s*?[,;]s*?| /);
var ps = Ext.Resizable.positions;
for(var i = 0, len = hs.length; i < len; i++){
if(hs[i] && ps[hs[i]]){
var pos = ps[hs[i]];
this[pos] = new Ext.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
}
}
// legacy
this.corner = this.southeast;
if(this.handles.indexOf('n') != -1 || this.handles.indexOf('w') != -1){
this.updateBox = true;
}
this.activeHandle = null;
if(this.resizeChild){
if(typeof this.resizeChild == 'boolean'){
this.resizeChild = Ext.get(this.el.dom.firstChild, true);
}else{
this.resizeChild = Ext.get(this.resizeChild, true);
}
}
if(this.adjustments == 'auto'){
var rc = this.resizeChild;
var hw = this.west, he = this.east, hn = this.north, hs = this.south;
if(rc && (hw || hn)){
rc.position('relative');
rc.setLeft(hw ? hw.el.getWidth() : 0);
rc.setTop(hn ? hn.el.getHeight() : 0);
}
this.adjustments = [
(he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
(hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
];
}
if(this.draggable){
this.dd = this.dynamic ?
this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
}
this.addEvents(
/**
* @event beforeresize
* Fired before resize is allowed. Set {@link #enabled} to false to cancel resize.
* @param {Ext.Resizable} this
* @param {Ext.EventObject} e The mousedown event
*/
'beforeresize',
/**
* @event resize
* Fired after a resize.
* @param {Ext.Resizable} this
* @param {Number} width The new width
* @param {Number} height The new height
* @param {Ext.EventObject} e The mouseup event
*/
'resize'
);
if(this.width !== null && this.height !== null){
this.resizeTo(this.width, this.height);
}else{
this.updateChildSize();
}
if(Ext.isIE){
this.el.dom.style.zoom = 1;
}
Ext.Resizable.superclass.constructor.call(this);
};
Ext.extend(Ext.Resizable, Ext.util.Observable, {
/**
* @cfg {Array/String} adjustments String 'auto' or an array [width, height] with values to be <b>added</b> to the
* resize operation's new size (defaults to <tt>[0, 0]</tt>)
*/
adjustments : [0, 0],
/**
* @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
*/
animate : false,
/**
* @cfg {Mixed} constrainTo Constrain the resize to a particular element
*/
/**
* @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
*/
disableTrackOver : false,
/**
* @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
*/
draggable: false,
/**
* @cfg {Number} duration Animation duration if animate = true (defaults to 0.35)
*/
duration : 0.35,
/**
* @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
*/
dynamic : false,
/**
* @cfg {String} easing Animation easing if animate = true (defaults to <tt>'easingOutStrong'</tt>)
*/
easing : 'easeOutStrong',
/**
* @cfg {Boolean} enabled False to disable resizing (defaults to true)
*/
enabled : true,
/**
* @property enabled Writable. False if resizing is disabled.
* @type Boolean
*/
/**
* @cfg {String} handles String consisting of the resize handles to display (defaults to undefined).
* Specify either <tt>'all'</tt> or any of <tt>'n s e w ne nw se sw'</tt>.
*/
handles : false,
/**
* @cfg {Boolean} multiDirectional <b>Deprecated</b>. Deprecated style of adding multi-direction resize handles.
*/
multiDirectional : false,
/**
* @cfg {Number} height The height of the element in pixels (defaults to null)
*/
height : null,
/**
* @cfg {Number} width The width of the element in pixels (defaults to null)
*/
width : null,
/**
* @cfg {Number} heightIncrement The increment to snap the height resize in pixels
* (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
*/
heightIncrement : 0,
/**
* @cfg {Number} widthIncrement The increment to snap the width resize in pixels
* (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
*/
widthIncrement : 0,
/**
* @cfg {Number} minHeight The minimum height for the element (defaults to 5)
*/
minHeight : 5,
/**
* @cfg {Number} minWidth The minimum width for the element (defaults to 5)
*/
minWidth : 5,
/**
* @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
*/
maxHeight : 10000,
/**
* @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
*/
maxWidth : 10000,
/**
* @cfg {Number} minX The minimum x for the element (defaults to 0)
*/
minX: 0,
/**
* @cfg {Number} minY The minimum x for the element (defaults to 0)
*/
minY: 0,
/**
* @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
* user mouses over the resizable borders. This is only applied at config time. (defaults to false)
*/
pinned : false,
/**
* @cfg {Boolean} preserveRatio True to preserve the original ratio between height
* and width during resize (defaults to false)
*/
preserveRatio : false,
/**
* @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
*/
resizeChild : false,
/**
* @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
*/
transparent: false,
/**
* @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region
*/
/**
* @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
* in favor of the handles config option (defaults to false)
*/
/**
* Perform a manual resize and fires the 'resize' event.
* @param {Number} width
* @param {Number} height
*/
resizeTo : function(width, height){
this.el.setSize(width, height);
this.updateChildSize();
this.fireEvent('resize', this, width, height, null);
},
// private
startSizing : function(e, handle){
this.fireEvent('beforeresize', this, e);
if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
if(!this.overlay){
this.overlay = this.el.createProxy({tag: 'div', cls: 'x-resizable-overlay', html: ' '}, Ext.getBody());
this.overlay.unselectable();
this.overlay.enableDisplayMode('block');
this.overlay.on({
scope: this,
mousemove: this.onMouseMove,
mouseup: this.onMouseUp
});
}
this.overlay.setStyle('cursor', handle.el.getStyle('cursor'));
this.resizing = true;
this.startBox = this.el.getBox();
this.startPoint = e.getXY();
this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
(this.startBox.y + this.startBox.height) - this.startPoint[1]];
this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
this.overlay.show();
if(this.constrainTo) {
var ct = Ext.get(this.constrainTo);
this.resizeRegion = ct.getRegion().adjust(
ct.getFrameWidth('t'),
ct.getFrameWidth('l'),
-ct.getFrameWidth('b'),
-ct.getFrameWidth('r')
);
}
this.proxy.setStyle('visibility', 'hidden'); // workaround display none
this.proxy.show();
this.proxy.setBox(this.startBox);
if(!this.dynamic){
this.proxy.setStyle('visibility', 'visible');
}
}
},
// private
onMouseDown : function(handle, e){
if(this.enabled){
e.stopEvent();
this.activeHandle = handle;
this.startSizing(e, handle);
}
},
// private
onMouseUp : function(e){
this.activeHandle = null;
var size = this.resizeElement();
this.resizing = false;
this.handleOut();
this.overlay.hide();
this.proxy.hide();
this.fireEvent('resize', this, size.width, size.height, e);
},
// private
updateChildSize : function(){
if(this.resizeChild){
var el = this.el;
var child = this.resizeChild;
var adj = this.adjustments;
if(el.dom.offsetWidth){
var b = el.getSize(true);
child.setSize(b.width+adj[0], b.height+adj[1]);
}
// Second call here for IE
// The first call enables instant resizing and
// the second call corrects scroll bars if they
// exist
if(Ext.isIE){
setTimeout(function(){
if(el.dom.offsetWidth){
var b = el.getSize(true);
child.setSize(b.width+adj[0], b.height+adj[1]);
}
}, 10);
}
}
},
// private
snap : function(value, inc, min){
if(!inc || !value){
return value;
}
var newValue = value;
var m = value % inc;
if(m > 0){
if(m > (inc/2)){
newValue = value + (inc-m);
}else{
newValue = value - m;
}
}
return Math.max(min, newValue);
},
/**
* <p>Performs resizing of the associated Element. This method is called internally by this
* class, and should not be called by user code.</p>
* <p>If a Resizable is being used to resize an Element which encapsulates a more complex UI
* component such as a Panel, this method may be overridden by specifying an implementation
* as a config option to provide appropriate behaviour at the end of the resize operation on
* mouseup, for example resizing the Panel, and relaying the Panel's content.</p>
* <p>The new area to be resized to is available by examining the state of the {@link #proxy}
* Element. Example:
<pre><code>
new Ext.Panel({
title: 'Resize me',
x: 100,
y: 100,
renderTo: Ext.getBody(),
floating: true,
frame: true,
width: 400,
height: 200,
listeners: {
render: function(p) {
new Ext.Resizable(p.getEl(), {
handles: 'all',
pinned: true,
transparent: true,
resizeElement: function() {
var box = this.proxy.getBox();
p.updateBox(box);
if (p.layout) {
p.doLayout();
}
return box;
}
});
}
}
}).show();
</code></pre>
*/
resizeElement : function(){
var box = this.proxy.getBox();
if(this.updateBox){
this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
}else{
this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
}
this.updateChildSize();
if(!this.dynamic){
this.proxy.hide();
}
return box;
},
// private
constrain : function(v, diff, m, mx){
if(v - diff < m){
diff = v - m;
}else if(v - diff > mx){
diff = v - mx;
}
return diff;
},
// private
onMouseMove : function(e){
if(this.enabled && this.activeHandle){
try{// try catch so if something goes wrong the user doesn't get hung
if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
return;
}
//var curXY = this.startPoint;
var curSize = this.curSize || this.startBox,
x = this.startBox.x, y = this.startBox.y,
ox = x,
oy = y,
w = curSize.width,
h = curSize.height,
ow = w,
oh = h,
mw = this.minWidth,
mh = this.minHeight,
mxw = this.maxWidth,
mxh = this.maxHeight,
wi = this.widthIncrement,
hi = this.heightIncrement,
eventXY = e.getXY(),
diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0])),
diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1])),
pos = this.activeHandle.position,
tw,
th;
switch(pos){
case 'east':
w += diffX;
w = Math.min(Math.max(mw, w), mxw);
break;
case 'south':
h += diffY;
h = Math.min(Math.max(mh, h), mxh);
break;
case 'southeast':
w += diffX;
h += diffY;
w = Math.min(Math.max(mw, w), mxw);
h = Math.min(Math.max(mh, h), mxh);
break;
case 'north':
diffY = this.constrain(h, diffY, mh, mxh);
y += diffY;
h -= diffY;
break;
case 'west':
diffX = this.constrain(w, diffX, mw, mxw);
x += diffX;
w -= diffX;
break;
case 'northeast':
w += diffX;
w = Math.min(Math.max(mw, w), mxw);
diffY = this.constrain(h, diffY, mh, mxh);
y += diffY;
h -= diffY;
break;
case 'northwest':
diffX = this.constrain(w, diffX, mw, mxw);
diffY = this.constrain(h, diffY, mh, mxh);
y += diffY;
h -= diffY;
x += diffX;
w -= diffX;
break;
case 'southwest':
diffX = this.constrain(w, diffX, mw, mxw);
h += diffY;
h = Math.min(Math.max(mh, h), mxh);
x += diffX;
w -= diffX;
break;
}
var sw = this.snap(w, wi, mw);
var sh = this.snap(h, hi, mh);
if(sw != w || sh != h){
switch(pos){
case 'northeast':
y -= sh - h;
break;
case 'north':
y -= sh - h;
break;
case 'southwest':
x -= sw - w;
break;
case 'west':
x -= sw - w;
break;
case 'northwest':
x -= sw - w;
y -= sh - h;
break;
}
w = sw;
h = sh;
}
if(this.preserveRatio){
switch(pos){
case 'southeast':
case 'east':
h = oh * (w/ow);
h = Math.min(Math.max(mh, h), mxh);
w = ow * (h/oh);
break;
case 'south':
w = ow * (h/oh);
w = Math.min(Math.max(mw, w), mxw);
h = oh * (w/ow);
break;
case 'northeast':
w = ow * (h/oh);
w = Math.min(Math.max(mw, w), mxw);
h = oh * (w/ow);
break;
case 'north':
tw = w;
w = ow * (h/oh);
w = Math.min(Math.max(mw, w), mxw);
h = oh * (w/ow);
x += (tw - w) / 2;
break;
case 'southwest':
h = oh * (w/ow);
h = Math.min(Math.max(mh, h), mxh);
tw = w;
w = ow * (h/oh);
x += tw - w;
break;
case 'west':
th = h;
h = oh * (w/ow);
h = Math.min(Math.max(mh, h), mxh);
y += (th - h) / 2;
tw = w;
w = ow * (h/oh);
x += tw - w;
break;
case 'northwest':
tw = w;
th = h;
h = oh * (w/ow);
h = Math.min(Math.max(mh, h), mxh);
w = ow * (h/oh);
y += th - h;
x += tw - w;
break;
}
}
this.proxy.setBounds(x, y, w, h);
if(this.dynamic){
this.resizeElement();
}
}catch(ex){}
}
},
// private
handleOver : function(){
if(this.enabled){
this.el.addClass('x-resizable-over');
}
},
// private
handleOut : function(){
if(!this.resizing){
this.el.removeClass('x-resizable-over');
}
},
/**
* Returns the element this component is bound to.
* @return {Ext.Element}
*/
getEl : function(){
return this.el;
},
/**
* Returns the resizeChild element (or null).
* @return {Ext.Element}
*/
getResizeChild : function(){
return this.resizeChild;
},
/**
* Destroys this resizable. If the element was wrapped and
* removeEl is not true then the element remains.
* @param {Boolean} removeEl (optional) true to remove the element from the DOM
*/
destroy : function(removeEl){
Ext.destroy(this.dd, this.overlay, this.proxy);
this.overlay = null;
this.proxy = null;
var ps = Ext.Resizable.positions;
for(var k in ps){
if(typeof ps[k] != 'function' && this[ps[k]]){
this[ps[k]].destroy();
}
}
if(removeEl){
this.el.update('');
Ext.destroy(this.el);
this.el = null;
}
this.purgeListeners();
},
syncHandleHeight : function(){
var h = this.el.getHeight(true);
if(this.west){
this.west.el.setHeight(h);
}
if(this.east){
this.east.el.setHeight(h);
}
}
});
// private
// hash to map config positions to true positions
Ext.Resizable.positions = {
n: 'north', s: 'south', e: 'east', w: 'west', se: 'southeast', sw: 'southwest', nw: 'northwest', ne: 'northeast'
};
// private
Ext.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
if(!this.tpl){
// only initialize the template if resizable is used
var tpl = Ext.DomHelper.createTemplate(
{tag: 'div', cls: 'x-resizable-handle x-resizable-handle-{0}'}
);
tpl.compile();
Ext.Resizable.Handle.prototype.tpl = tpl;
}
this.position = pos;
this.rz = rz;
this.el = this.tpl.append(rz.el.dom, [this.position], true);
this.el.unselectable();
if(transparent){
this.el.setOpacity(0);
}
this.el.on('mousedown', this.onMouseDown, this);
if(!disableTrackOver){
this.el.on({
scope: this,
mouseover: this.onMouseOver,
mouseout: this.onMouseOut
});
}
};
// private
Ext.Resizable.Handle.prototype = {
// private
afterResize : function(rz){
// do nothing
},
// private
onMouseDown : function(e){
this.rz.onMouseDown(this, e);
},
// private
onMouseOver : function(e){
this.rz.handleOver(this, e);
},
// private
onMouseOut : function(e){
this.rz.handleOut(this, e);
},
// private
destroy : function(){
Ext.destroy(this.el);
this.el = null;
}
};
/** * @class Ext.Window * @extends Ext.Panel * <p>A specialized panel intended for use as an application window. Windows are floated, {@link #resizable}, and * {@link #draggable} by default. Windows can be {@link #maximizable maximized} to fill the viewport, * restored to their prior size, and can be {@link #minimize}d.</p> * <p>Windows can also be linked to a {@link Ext.WindowGroup} or managed by the {@link Ext.WindowMgr} to provide * grouping, activation, to front, to back and other application-specific behavior.</p> * <p>By default, Windows will be rendered to document.body. To {@link #constrain} a Window to another element * specify {@link Ext.Component#renderTo renderTo}.</p> * <p><b>Note:</b> By default, the <code>{@link #closable close}</code> header tool <i>destroys</i> the Window resulting in * destruction of any child Components. This makes the Window object, and all its descendants <b>unusable</b>. To enable * re-use of a Window, use <b><code>{@link #closeAction closeAction: 'hide'}</code></b>.</p> * @constructor * @param {Object} config The config object * @xtype window */ Ext.Window = Ext.extend(Ext.Panel, { /** * @cfg {Number} x * The X position of the left edge of the window on initial showing. Defaults to centering the Window within * the width of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to). */ /** * @cfg {Number} y * The Y position of the top edge of the window on initial showing. Defaults to centering the Window within * the height of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to). */ /** * @cfg {Boolean} modal * True to make the window modal and mask everything behind it when displayed, false to display it without * restricting access to other UI elements (defaults to false). */ /** * @cfg {String/Element} animateTarget * Id or element from which the window should animate while opening (defaults to null with no animation). */ /** * @cfg {String} resizeHandles * A valid {@link Ext.Resizable} handles config string (defaults to 'all'). Only applies when resizable = true. */ /** * @cfg {Ext.WindowGroup} manager * A reference to the WindowGroup that should manage this window (defaults to {@link Ext.WindowMgr}). */ /** * @cfg {String/Number/Button} defaultButton * The id / index of a button or a button instance to focus when this window received the focus. */ /** * @cfg {Function} onEsc * Allows override of the built-in processing for the escape key. Default action * is to close the Window (performing whatever action is specified in {@link #closeAction}. * To prevent the Window closing when the escape key is pressed, specify this as * Ext.emptyFn (See {@link Ext#emptyFn}). */ /** * @cfg {Boolean} collapsed * True to render the window collapsed, false to render it expanded (defaults to false). Note that if * {@link #expandOnShow} is true (the default) it will override the <tt>collapsed</tt> config and the window * will always be expanded when shown. */ /** * @cfg {Boolean} maximized * True to initially display the window in a maximized state. (Defaults to false). */ /** * @cfg {String} baseCls * The base CSS class to apply to this panel's element (defaults to 'x-window'). */ baseCls : 'x-window', /** * @cfg {Boolean} resizable * True to allow user resizing at each edge and corner of the window, false to disable resizing (defaults to true). */ resizable : true, /** * @cfg {Boolean} draggable * True to allow the window to be dragged by the header bar, false to disable dragging (defaults to true). Note * that by default the window will be centered in the viewport, so if dragging is disabled the window may need * to be positioned programmatically after render (e.g., myWindow.setPosition(100, 100);). */ draggable : true, /** * @cfg {Boolean} closable * <p>True to display the 'close' tool button and allow the user to close the window, false to * hide the button and disallow closing the window (defaults to true).</p> * <p>By default, when close is requested by either clicking the close button in the header * or pressing ESC when the Window has focus, the {@link #close} method will be called. This * will <i>{@link Ext.Component#destroy destroy}</i> the Window and its content meaning that * it may not be reused.</p> * <p>To make closing a Window <i>hide</i> the Window so that it may be reused, set * {@link #closeAction} to 'hide'. */ closable : true, /** * @cfg {String} closeAction * <p>The action to take when the close header tool is clicked: * <div class="mdetail-params"><ul> * <li><b><code>'{@link #close}'</code></b> : <b>Default</b><div class="sub-desc"> * {@link #close remove} the window from the DOM and {@link Ext.Component#destroy destroy} * it and all descendant Components. The window will <b>not</b> be available to be * redisplayed via the {@link #show} method. * </div></li> * <li><b><code>'{@link #hide}'</code></b> : <div class="sub-desc"> * {@link #hide} the window by setting visibility to hidden and applying negative offsets. * The window will be available to be redisplayed via the {@link #show} method. * </div></li> * </ul></div> * <p><b>Note:</b> This setting does not affect the {@link #close} method * which will always {@link Ext.Component#destroy destroy} the window. To * programatically <i>hide</i> a window, call {@link #hide}.</p> */ closeAction : 'close', /** * @cfg {Boolean} constrain * True to constrain the window within its containing element, false to allow it to fall outside of its * containing element. By default the window will be rendered to document.body. To render and constrain the * window within another element specify {@link #renderTo}. * (defaults to false). Optionally the header only can be constrained using {@link #constrainHeader}. */ constrain : false, /** * @cfg {Boolean} constrainHeader * True to constrain the window header within its containing element (allowing the window body to fall outside * of its containing element) or false to allow the header to fall outside its containing element (defaults to * false). Optionally the entire window can be constrained using {@link #constrain}. */ constrainHeader : false, /** * @cfg {Boolean} plain * True to render the window body with a transparent background so that it will blend into the framing * elements, false to add a lighter background color to visually highlight the body element and separate it * more distinctly from the surrounding frame (defaults to false). */ plain : false, /** * @cfg {Boolean} minimizable * True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button * and disallow minimizing the window (defaults to false). Note that this button provides no implementation -- * the behavior of minimizing a window is implementation-specific, so the minimize event must be handled and a * custom minimize behavior implemented for this option to be useful. */ minimizable : false, /** * @cfg {Boolean} maximizable * True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button * and disallow maximizing the window (defaults to false). Note that when a window is maximized, the tool button * will automatically change to a 'restore' button with the appropriate behavior already built-in that will * restore the window to its previous size. */ maximizable : false, /** * @cfg {Number} minHeight * The minimum height in pixels allowed for this window (defaults to 100). Only applies when resizable = true. */ minHeight : 100, /** * @cfg {Number} minWidth * The minimum width in pixels allowed for this window (defaults to 200). Only applies when resizable = true. */ minWidth : 200, /** * @cfg {Boolean} expandOnShow * True to always expand the window when it is displayed, false to keep it in its current state (which may be * {@link #collapsed}) when displayed (defaults to true). */ expandOnShow : true, // inherited docs, same default collapsible : false, /** * @cfg {Boolean} initHidden * True to hide the window until show() is explicitly called (defaults to true). */ initHidden : true, /** * @cfg {Boolean} monitorResize @hide * This is automatically managed based on the value of constrain and constrainToHeader */ monitorResize : true, // The following configs are set to provide the basic functionality of a window. // Changing them would require additional code to handle correctly and should // usually only be done in subclasses that can provide custom behavior. Changing them // may have unexpected or undesirable results. /** @cfg {String} elements @hide */ elements : 'header,body', /** @cfg {Boolean} frame @hide */ frame : true, /** @cfg {Boolean} floating @hide */ floating : true, // private initComponent : function(){ Ext.Window.superclass.initComponent.call(this); this.addEvents( /** * @event activate * Fires after the window has been visually activated via {@link setActive}. * @param {Ext.Window} this */ /** * @event deactivate * Fires after the window has been visually deactivated via {@link setActive}. * @param {Ext.Window} this */ /** * @event resize * Fires after the window has been resized. * @param {Ext.Window} this * @param {Number} width The window's new width * @param {Number} height The window's new height */ 'resize', /** * @event maximize * Fires after the window has been maximized. * @param {Ext.Window} this */ 'maximize', /** * @event minimize * Fires after the window has been minimized. * @param {Ext.Window} this */ 'minimize', /** * @event restore * Fires after the window has been restored to its original size after being maximized. * @param {Ext.Window} this */ 'restore' ); if(this.initHidden === false){ this.show(); }else{ this.hidden = true; } }, // private getState : function(){ return Ext.apply(Ext.Window.superclass.getState.call(this) || {}, this.getBox(true)); }, // private onRender : function(ct, position){ Ext.Window.superclass.onRender.call(this, ct, position); if(this.plain){ this.el.addClass('x-window-plain'); } // this element allows the Window to be focused for keyboard events this.focusEl = this.el.createChild({ tag: 'a', href:'#', cls:'x-dlg-focus', tabIndex:'-1', html: ' '}); this.focusEl.swallowEvent('click', true); this.proxy = this.el.createProxy('x-window-proxy'); this.proxy.enableDisplayMode('block'); if(this.modal){ this.mask = this.container.createChild({cls:'ext-el-mask'}, this.el.dom); this.mask.enableDisplayMode('block'); this.mask.hide(); this.mon(this.mask, 'click', this.focus, this); } this.initTools(); }, // private initEvents : function(){ Ext.Window.superclass.initEvents.call(this); if(this.animateTarget){ this.setAnimateTarget(this.animateTarget); } if(this.resizable){ this.resizer = new Ext.Resizable(this.el, { minWidth: this.minWidth, minHeight:this.minHeight, handles: this.resizeHandles || 'all', pinned: true, resizeElement : this.resizerAction }); this.resizer.window = this; this.mon(this.resizer, 'beforeresize', this.beforeResize, this); } if(this.draggable){ this.header.addClass('x-window-draggable'); } this.mon(this.el, 'mousedown', this.toFront, this); this.manager = this.manager || Ext.WindowMgr; this.manager.register(this); if(this.maximized){ this.maximized = false; this.maximize(); } if(this.closable){ var km = this.getKeyMap(); km.on(27, this.onEsc, this); km.disable(); } }, initDraggable : function(){ /** * If this Window is configured {@link #draggable}, this property will contain * an instance of {@link Ext.dd.DD} which handles dragging the Window's DOM Element. * @type Ext.dd.DD * @property dd */ this.dd = new Ext.Window.DD(this); }, // private onEsc : function(){ this[this.closeAction](); }, // private beforeDestroy : function(){ if (this.rendered){ this.hide(); if(this.doAnchor){ Ext.EventManager.removeResizeListener(this.doAnchor, this); Ext.EventManager.un(window, 'scroll', this.doAnchor, this); } Ext.destroy( this.focusEl, this.resizer, this.dd, this.proxy, this.mask ); } Ext.Window.superclass.beforeDestroy.call(this); }, // private onDestroy : function(){ if(this.manager){ this.manager.unregister(this); } Ext.Window.superclass.onDestroy.call(this); }, // private initTools : function(){ if(this.minimizable){ this.addTool({ id: 'minimize', handler: this.minimize.createDelegate(this, []) }); } if(this.maximizable){ this.addTool({ id: 'maximize', handler: this.maximize.createDelegate(this, []) }); this.addTool({ id: 'restore', handler: this.restore.createDelegate(this, []), hidden:true }); this.mon(this.header, 'dblclick', this.toggleMaximize, this); } if(this.closable){ this.addTool({ id: 'close', handler: this[this.closeAction].createDelegate(this, []) }); } }, // private resizerAction : function(){ var box = this.proxy.getBox(); this.proxy.hide(); this.window.handleResize(box); return box; }, // private beforeResize : function(){ this.resizer.minHeight = Math.max(this.minHeight, this.getFrameHeight() + 40); // 40 is a magic minimum content size? this.resizer.minWidth = Math.max(this.minWidth, this.getFrameWidth() + 40); this.resizeBox = this.el.getBox(); }, // private updateHandles : function(){ if(Ext.isIE && this.resizer){ this.resizer.syncHandleHeight(); this.el.repaint(); } }, // private handleResize : function(box){ var rz = this.resizeBox; if(rz.x != box.x || rz.y != box.y){ this.updateBox(box); }else{ this.setSize(box); } this.focus(); this.updateHandles(); this.saveState(); this.doLayout(); this.fireEvent('resize', this, box.width, box.height); }, /** * Focuses the window. If a defaultButton is set, it will receive focus, otherwise the * window itself will receive focus. */ focus : function(){ var f = this.focusEl, db = this.defaultButton, t = typeof db; if(t != 'undefined'){ if(t == 'number' && this.fbar){ f = this.fbar.items.get(db); }else if(t == 'string'){ f = Ext.getCmp(db); }else{ f = db; } } f = f || this.focusEl; f.focus.defer(10, f); }, /** * Sets the target element from which the window should animate while opening. * @param {String/Element} el The target element or id */ setAnimateTarget : function(el){ el = Ext.get(el); this.animateTarget = el; }, // private beforeShow : function(){ delete this.el.lastXY; delete this.el.lastLT; if(this.x === undefined || this.y === undefined){ var xy = this.el.getAlignToXY(this.container, 'c-c'); var pos = this.el.translatePoints(xy[0], xy[1]); this.x = this.x === undefined? pos.left : this.x; this.y = this.y === undefined? pos.top : this.y; } this.el.setLeftTop(this.x, this.y); if(this.expandOnShow){ this.expand(false); } if(this.modal){ Ext.getBody().addClass('x-body-masked'); this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true)); this.mask.show(); } }, /** * Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden. * @param {String/Element} animateTarget (optional) The target element or id from which the window should * animate while opening (defaults to null with no animation) * @param {Function} callback (optional) A callback function to call after the window is displayed * @param {Object} scope (optional) The scope in which to execute the callback * @return {Ext.Window} this */ show : function(animateTarget, cb, scope){ if(!this.rendered){ this.render(Ext.getBody()); } if(this.hidden === false){ this.toFront(); return this; } if(this.fireEvent('beforeshow', this) === false){ return this; } if(cb){ this.on('show', cb, scope, {single:true}); } this.hidden = false; if(animateTarget !== undefined){ this.setAnimateTarget(animateTarget); } this.beforeShow(); if(this.animateTarget){ this.animShow(); }else{ this.afterShow(); } return this; }, // private afterShow : function(isAnim){ this.proxy.hide(); this.el.setStyle('display', 'block'); this.el.show(); if(this.maximized){ this.fitContainer(); } if(Ext.isMac && Ext.isGecko){ // work around stupid FF 2.0/Mac scroll bar bug this.cascade(this.setAutoScroll); } if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){ Ext.EventManager.onWindowResize(this.onWindowResize, this); } this.doConstrain(); this.doLayout(); if(this.keyMap){ this.keyMap.enable(); } this.toFront(); this.updateHandles(); if(isAnim && (Ext.isIE || Ext.isWebKit)){ var sz = this.getSize(); this.onResize(sz.width, sz.height); } this.fireEvent('show', this); }, // private animShow : function(){ this.proxy.show(); this.proxy.setBox(this.animateTarget.getBox()); this.proxy.setOpacity(0); var b = this.getBox(false); b.callback = this.afterShow.createDelegate(this, [true], false); b.scope = this; b.duration = 0.25; b.easing = 'easeNone'; b.opacity = 0.5; b.block = true; this.el.setStyle('display', 'none'); this.proxy.shift(b); }, /** * Hides the window, setting it to invisible and applying negative offsets. * @param {String/Element} animateTarget (optional) The target element or id to which the window should * animate while hiding (defaults to null with no animation) * @param {Function} callback (optional) A callback function to call after the window is hidden * @param {Object} scope (optional) The scope in which to execute the callback * @return {Ext.Window} this */ hide : function(animateTarget, cb, scope){ if(this.hidden || this.fireEvent('beforehide', this) === false){ return this; } if(cb){ this.on('hide', cb, scope, {single:true}); } this.hidden = true; if(animateTarget !== undefined){ this.setAnimateTarget(animateTarget); } if(this.modal){ this.mask.hide(); Ext.getBody().removeClass('x-body-masked'); } if(this.animateTarget){ this.animHide(); }else{ this.el.hide(); this.afterHide(); } return this; }, // private afterHide : function(){ this.proxy.hide(); if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){ Ext.EventManager.removeResizeListener(this.onWindowResize, this); } if(this.keyMap){ this.keyMap.disable(); } this.fireEvent('hide', this); }, // private animHide : function(){ this.proxy.setOpacity(0.5); this.proxy.show(); var tb = this.getBox(false); this.proxy.setBox(tb); this.el.hide(); var b = this.animateTarget.getBox(); b.callback = this.afterHide; b.scope = this; b.duration = 0.25; b.easing = 'easeNone'; b.block = true; b.opacity = 0; this.proxy.shift(b); }, // private onWindowResize : function(){ if(this.maximized){ this.fitContainer(); } if(this.modal){ this.mask.setSize('100%', '100%'); var force = this.mask.dom.offsetHeight; this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true)); } this.doConstrain(); }, // private doConstrain : function(){ if(this.constrain || this.constrainHeader){ var offsets; if(this.constrain){ offsets = { right:this.el.shadowOffset, left:this.el.shadowOffset, bottom:this.el.shadowOffset }; }else { var s = this.getSize(); offsets = { right:-(s.width - 100), bottom:-(s.height - 25) }; } var xy = this.el.getConstrainToXY(this.container, true, offsets); if(xy){ this.setPosition(xy[0], xy[1]); } } }, // private - used for dragging ghost : function(cls){ var ghost = this.createGhost(cls); var box = this.getBox(true); ghost.setLeftTop(box.x, box.y); ghost.setWidth(box.width); this.el.hide(); this.activeGhost = ghost; return ghost; }, // private unghost : function(show, matchPosition){ if(!this.activeGhost) { return; } if(show !== false){ this.el.show(); this.focus(); if(Ext.isMac && Ext.isGecko){ // work around stupid FF 2.0/Mac scroll bar bug this.cascade(this.setAutoScroll); } } if(matchPosition !== false){ this.setPosition(this.activeGhost.getLeft(true), this.activeGhost.getTop(true)); } this.activeGhost.hide(); this.activeGhost.remove(); delete this.activeGhost; }, /** * Placeholder method for minimizing the window. By default, this method simply fires the {@link #minimize} event * since the behavior of minimizing a window is application-specific. To implement custom minimize behavior, * either the minimize event can be handled or this method can be overridden. * @return {Ext.Window} this */ minimize : function(){ this.fireEvent('minimize', this); return this; }, /** * <p>Closes the Window, removes it from the DOM, {@link Ext.Component#destroy destroy}s * the Window object and all its descendant Components. The {@link Ext.Panel#beforeclose beforeclose} * event is fired before the close happens and will cancel the close action if it returns false.<p> * <p><b>Note:</b> This method is not affected by the {@link #closeAction} setting which * only affects the action triggered when clicking the {@link #closable 'close' tool in the header}. * To hide the Window without destroying it, call {@link #hide}.</p> */ close : function(){ if(this.fireEvent('beforeclose', this) !== false){ this.hide(null, function(){ this.fireEvent('close', this); this.destroy(); }, this); } }, /** * Fits the window within its current container and automatically replaces * the {@link #maximizable 'maximize' tool button} with the 'restore' tool button. * Also see {@link #toggleMaximize}. * @return {Ext.Window} this */ maximize : function(){ if(!this.maximized){ this.expand(false); this.restoreSize = this.getSize(); this.restorePos = this.getPosition(true); if (this.maximizable){ this.tools.maximize.hide(); this.tools.restore.show(); } this.maximized = true; this.el.disableShadow(); if(this.dd){ this.dd.lock(); } if(this.collapsible){ this.tools.toggle.hide(); } this.el.addClass('x-window-maximized'); this.container.addClass('x-window-maximized-ct'); this.setPosition(0, 0); this.fitContainer(); this.fireEvent('maximize', this); } return this; }, /** * Restores a {@link #maximizable maximized} window back to its original * size and position prior to being maximized and also replaces * the 'restore' tool button with the 'maximize' tool button. * Also see {@link #toggleMaximize}. * @return {Ext.Window} this */ restore : function(){ if(this.maximized){ this.el.removeClass('x-window-maximized'); this.tools.restore.hide(); this.tools.maximize.show(); this.setPosition(this.restorePos[0], this.restorePos[1]); this.setSize(this.restoreSize.width, this.restoreSize.height); delete this.restorePos; delete this.restoreSize; this.maximized = false; this.el.enableShadow(true); if(this.dd){ this.dd.unlock(); } if(this.collapsible){ this.tools.toggle.show(); } this.container.removeClass('x-window-maximized-ct'); this.doConstrain(); this.fireEvent('restore', this); } return this; }, /** * A shortcut method for toggling between {@link #maximize} and {@link #restore} based on the current maximized * state of the window. * @return {Ext.Window} this */ toggleMaximize : function(){ return this[this.maximized ? 'restore' : 'maximize'](); }, // private fitContainer : function(){ var vs = this.container.getViewSize(); this.setSize(vs.width, vs.height); }, // private // z-index is managed by the WindowManager and may be overwritten at any time setZIndex : function(index){ if(this.modal){ this.mask.setStyle('z-index', index); } this.el.setZIndex(++index); index += 5; if(this.resizer){ this.resizer.proxy.setStyle('z-index', ++index); } this.lastZIndex = index; }, /** * Aligns the window to the specified element * @param {Mixed} element The element to align to. * @param {String} position The position to align to (see {@link Ext.Element#alignTo} for more details). * @param {Array} offsets (optional) Offset the positioning by [x, y] * @return {Ext.Window} this */ alignTo : function(element, position, offsets){ var xy = this.el.getAlignToXY(element, position, offsets); this.setPagePosition(xy[0], xy[1]); return this; }, /** * Anchors this window to another element and realigns it when the window is resized or scrolled. * @param {Mixed} element The element to align to. * @param {String} position The position to align to (see {@link Ext.Element#alignTo} for more details) * @param {Array} offsets (optional) Offset the positioning by [x, y] * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter * is a number, it is used as the buffer delay (defaults to 50ms). * @return {Ext.Window} this */ anchorTo : function(el, alignment, offsets, monitorScroll){ if(this.doAnchor){ Ext.EventManager.removeResizeListener(this.doAnchor, this); Ext.EventManager.un(window, 'scroll', this.doAnchor, this); } this.doAnchor = function(){ this.alignTo(el, alignment, offsets); }; Ext.EventManager.onWindowResize(this.doAnchor, this); var tm = typeof monitorScroll; if(tm != 'undefined'){ Ext.EventManager.on(window, 'scroll', this.doAnchor, this, {buffer: tm == 'number' ? monitorScroll : 50}); } this.doAnchor(); return this; }, /** * Brings this window to the front of any other visible windows * @param {Boolean} e (optional) Specify <tt>false</tt> to prevent the window from being focused. * @return {Ext.Window} this */ toFront : function(e){ if(this.manager.bringToFront(this)){ if(!e || !e.getTarget().focus){ this.focus(); } } return this; }, /** * Makes this the active window by showing its shadow, or deactivates it by hiding its shadow. This method also * fires the {@link #activate} or {@link #deactivate} event depending on which action occurred. * @param {Boolean} active True to activate the window, false to deactivate it (defaults to false) */ setActive : function(active){ if(active){ if(!this.maximized){ this.el.enableShadow(true); } this.fireEvent('activate', this); }else{ this.el.disableShadow(); this.fireEvent('deactivate', this); } }, /** * Sends this window to the back of (lower z-index than) any other visible windows * @return {Ext.Window} this */ toBack : function(){ this.manager.sendToBack(this); return this; }, /** * Centers this window in the viewport * @return {Ext.Window} this */ center : function(){ var xy = this.el.getAlignToXY(this.container, 'c-c'); this.setPagePosition(xy[0], xy[1]); return this; } /** * @cfg {Boolean} autoWidth @hide **/ }); Ext.reg('window', Ext.Window); // private - custom Window DD implementation Ext.Window.DD = function(win){ this.win = win; Ext.Window.DD.superclass.constructor.call(this, win.el.id, 'WindowDD-'+win.id); this.setHandleElId(win.header.id); this.scroll = false; }; Ext.extend(Ext.Window.DD, Ext.dd.DD, { moveOnly:true, headerOffsets:[100, 25], startDrag : function(){ var w = this.win; this.proxy = w.ghost(); if(w.constrain !== false){ var so = w.el.shadowOffset; this.constrainTo(w.container, {right: so, left: so, bottom: so}); }else if(w.constrainHeader !== false){ var s = this.proxy.getSize(); this.constrainTo(w.container, {right: -(s.width-this.headerOffsets[0]), bottom: -(s.height-this.headerOffsets[1])}); } }, b4Drag : Ext.emptyFn, onDrag : function(e){ this.alignElWithMouse(this.proxy, e.getPageX(), e.getPageY()); }, endDrag : function(e){ this.win.unghost(); this.win.saveState(); } }); /** * @class Ext.WindowGroup * An object that represents a group of {@link Ext.Window} instances and provides z-order management * and window activation behavior. * @constructor */ Ext.WindowGroup = function(){ var list = {}; var accessList = []; var front = null; // private var sortWindows = function(d1, d2){ return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1; }; // private var orderWindows = function(){ var a = accessList, len = a.length; if(len > 0){ a.sort(sortWindows); var seed = a[0].manager.zseed; for(var i = 0; i < len; i++){ var win = a[i]; if(win && !win.hidden){ win.setZIndex(seed + (i*10)); } } } activateLast(); }; // private var setActiveWin = function(win){ if(win != front){ if(front){ front.setActive(false); } front = win; if(win){ win.setActive(true); } } }; // private var activateLast = function(){ for(var i = accessList.length-1; i >=0; --i) { if(!accessList[i].hidden){ setActiveWin(accessList[i]); return; } } // none to activate setActiveWin(null); }; return { /** * The starting z-index for windows (defaults to 9000) * @type Number The z-index value */ zseed : 9000, // private register : function(win){ list[win.id] = win; accessList.push(win); win.on('hide', activateLast); }, // private unregister : function(win){ delete list[win.id]; win.un('hide', activateLast); accessList.remove(win); }, /** * Gets a registered window by id. * @param {String/Object} id The id of the window or a {@link Ext.Window} instance * @return {Ext.Window} */ get : function(id){ return typeof id == "object" ? id : list[id]; }, /** * Brings the specified window to the front of any other active windows. * @param {String/Object} win The id of the window or a {@link Ext.Window} instance * @return {Boolean} True if the dialog was brought to the front, else false * if it was already in front */ bringToFront : function(win){ win = this.get(win); if(win != front){ win._lastAccess = new Date().getTime(); orderWindows(); return true; } return false; }, /** * Sends the specified window to the back of other active windows. * @param {String/Object} win The id of the window or a {@link Ext.Window} instance * @return {Ext.Window} The window */ sendToBack : function(win){ win = this.get(win); win._lastAccess = -(new Date().getTime()); orderWindows(); return win; }, /** * Hides all windows in the group. */ hideAll : function(){ for(var id in list){ if(list[id] && typeof list[id] != "function" && list[id].isVisible()){ list[id].hide(); } } }, /** * Gets the currently-active window in the group. * @return {Ext.Window} The active window */ getActive : function(){ return front; }, /** * Returns zero or more windows in the group using the custom search function passed to this method. * The function should accept a single {@link Ext.Window} reference as its only argument and should * return true if the window matches the search criteria, otherwise it should return false. * @param {Function} fn The search function * @param {Object} scope (optional) The scope in which to execute the function (defaults to the window * that gets passed to the function if not specified) * @return {Array} An array of zero or more matching windows */ getBy : function(fn, scope){ var r = []; for(var i = accessList.length-1; i >=0; --i) { var win = accessList[i]; if(fn.call(scope||win, win) !== false){ r.push(win); } } return r; }, /** * Executes the specified function once for every window in the group, passing each * window as the only parameter. Returning false from the function will stop the iteration. * @param {Function} fn The function to execute for each item * @param {Object} scope (optional) The scope in which to execute the function */ each : function(fn, scope){ for(var id in list){ if(list[id] && typeof list[id] != "function"){ if(fn.call(scope || list[id], list[id]) === false){ return; } } } } }; }; /** * @class Ext.WindowMgr * @extends Ext.WindowGroup * The default global window group that is available automatically. To have more than one group of windows * with separate z-order stacks, create additional instances of {@link Ext.WindowGroup} as needed. * @singleton */ Ext.WindowMgr = new Ext.WindowGroup();/** * @class Ext.MessageBox * <p>Utility class for generating different styles of message boxes. The alias Ext.Msg can also be used.<p/> * <p>Note that the MessageBox is asynchronous. Unlike a regular JavaScript <code>alert</code> (which will halt * browser execution), showing a MessageBox will not cause the code to stop. For this reason, if you have code * that should only run <em>after</em> some user feedback from the MessageBox, you must use a callback function * (see the <code>function</code> parameter for {@link #show} for more details).</p> * <p>Example usage:</p> *<pre><code> // Basic alert: Ext.Msg.alert('Status', 'Changes saved successfully.'); // Prompt for user data and process the result using a callback: Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){ if (btn == 'ok'){ // process text value and close... } }); // Show a dialog using config options: Ext.Msg.show({ title:'Save Changes?', msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?', buttons: Ext.Msg.YESNOCANCEL, fn: processResult, animEl: 'elId', icon: Ext.MessageBox.QUESTION }); </code></pre> * @singleton */ Ext.MessageBox = function(){ var dlg, opt, mask, waitTimer; var bodyEl, msgEl, textboxEl, textareaEl, progressBar, pp, iconEl, spacerEl; var buttons, activeTextEl, bwidth, iconCls = ''; // private var handleButton = function(button){ if(dlg.isVisible()){ dlg.hide(); handleHide(); Ext.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value, opt], 1); } }; // private var handleHide = function(){ if(opt && opt.cls){ dlg.el.removeClass(opt.cls); } progressBar.reset(); }; // private var handleEsc = function(d, k, e){ if(opt && opt.closable !== false){ dlg.hide(); handleHide(); } if(e){ e.stopEvent(); } }; // private var updateButtons = function(b){ var width = 0; if(!b){ buttons["ok"].hide(); buttons["cancel"].hide(); buttons["yes"].hide(); buttons["no"].hide(); return width; } dlg.footer.dom.style.display = ''; for(var k in buttons){ if(typeof buttons[k] != "function"){ if(b[k]){ buttons[k].show(); buttons[k].setText(typeof b[k] == "string" ? b[k] : Ext.MessageBox.buttonText[k]); width += buttons[k].el.getWidth()+15; }else{ buttons[k].hide(); } } } return width; }; return { /** * Returns a reference to the underlying {@link Ext.Window} element * @return {Ext.Window} The window */ getDialog : function(titleText){ if(!dlg){ dlg = new Ext.Window({ autoCreate : true, title:titleText, resizable:false, constrain:true, constrainHeader:true, minimizable : false, maximizable : false, stateful: false, modal: true, shim:true, buttonAlign:"center", width:400, height:100, minHeight: 80, plain:true, footer:true, closable:true, close : function(){ if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){ handleButton("no"); }else{ handleButton("cancel"); } } }); buttons = {}; var bt = this.buttonText; //TODO: refactor this block into a buttons config to pass into the Window constructor buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok")); buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes")); buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no")); buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel")); buttons["ok"].hideMode = buttons["yes"].hideMode = buttons["no"].hideMode = buttons["cancel"].hideMode = 'offsets'; dlg.render(document.body); dlg.getEl().addClass('x-window-dlg'); mask = dlg.mask; bodyEl = dlg.body.createChild({ html:'<div class="ext-mb-icon"></div><div class="ext-mb-content"><span class="ext-mb-text"></span><br /><div class="ext-mb-fix-cursor"><input type="text" class="ext-mb-input" /><textarea class="ext-mb-textarea"></textarea></div></div>' }); iconEl = Ext.get(bodyEl.dom.firstChild); var contentEl = bodyEl.dom.childNodes[1]; msgEl = Ext.get(contentEl.firstChild); textboxEl = Ext.get(contentEl.childNodes[2].firstChild); textboxEl.enableDisplayMode(); textboxEl.addKeyListener([10,13], function(){ if(dlg.isVisible() && opt && opt.buttons){ if(opt.buttons.ok){ handleButton("ok"); }else if(opt.buttons.yes){ handleButton("yes"); } } }); textareaEl = Ext.get(contentEl.childNodes[2].childNodes[1]); textareaEl.enableDisplayMode(); progressBar = new Ext.ProgressBar({ renderTo:bodyEl }); bodyEl.createChild({cls:'x-clear'}); } return dlg; }, /** * Updates the message box body text * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to * the XHTML-compliant non-breaking space character '&#160;') * @return {Ext.MessageBox} this */ updateText : function(text){ if(!dlg.isVisible() && !opt.width){ dlg.setSize(this.maxWidth, 100); // resize first so content is never clipped from previous shows } msgEl.update(text || ' '); var iw = iconCls != '' ? (iconEl.getWidth() + iconEl.getMargins('lr')) : 0; var mw = msgEl.getWidth() + msgEl.getMargins('lr'); var fw = dlg.getFrameWidth('lr'); var bw = dlg.body.getFrameWidth('lr'); if (Ext.isIE && iw > 0){ //3 pixels get subtracted in the icon CSS for an IE margin issue, //so we have to add it back here for the overall width to be consistent iw += 3; } var w = Math.max(Math.min(opt.width || iw+mw+fw+bw, this.maxWidth), Math.max(opt.minWidth || this.minWidth, bwidth || 0)); if(opt.prompt === true){ activeTextEl.setWidth(w-iw-fw-bw); } if(opt.progress === true || opt.wait === true){ progressBar.setSize(w-iw-fw-bw); } if(Ext.isIE && w == bwidth){ w += 4; //Add offset when the content width is smaller than the buttons. } dlg.setSize(w, 'auto').center(); return this; }, /** * Updates a progress-style message box's text and progress bar. Only relevant on message boxes * initiated via {@link Ext.MessageBox#progress} or {@link Ext.MessageBox#wait}, * or by calling {@link Ext.MessageBox#show} with progress: true. * @param {Number} value Any number between 0 and 1 (e.g., .5, defaults to 0) * @param {String} progressText The progress text to display inside the progress bar (defaults to '') * @param {String} msg The message box's body text is replaced with the specified string (defaults to undefined * so that any existing body text will not get overwritten by default unless a new value is passed in) * @return {Ext.MessageBox} this */ updateProgress : function(value, progressText, msg){ progressBar.updateProgress(value, progressText); if(msg){ this.updateText(msg); } return this; }, /** * Returns true if the message box is currently displayed * @return {Boolean} True if the message box is visible, else false */ isVisible : function(){ return dlg && dlg.isVisible(); }, /** * Hides the message box if it is displayed * @return {Ext.MessageBox} this */ hide : function(){ var proxy = dlg ? dlg.activeGhost : null; if(this.isVisible() || proxy){ dlg.hide(); handleHide(); if (proxy){ // unghost is a private function, but i saw no better solution // to fix the locking problem when dragging while it closes dlg.unghost(false, false); } } return this; }, /** * Displays a new message box, or reinitializes an existing message box, based on the config options * passed in. All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally, * although those calls are basic shortcuts and do not support all of the config options allowed here. * @param {Object} config The following config options are supported: <ul> * <li><b>animEl</b> : String/Element<div class="sub-desc">An id or Element from which the message box should animate as it * opens and closes (defaults to undefined)</div></li> * <li><b>buttons</b> : Object/Boolean<div class="sub-desc">A button config object (e.g., Ext.MessageBox.OKCANCEL or {ok:'Foo', * cancel:'Bar'}), or false to not show any buttons (defaults to false)</div></li> * <li><b>closable</b> : Boolean<div class="sub-desc">False to hide the top-right close button (defaults to true). Note that * progress and wait dialogs will ignore this property and always hide the close button as they can only * be closed programmatically.</div></li> * <li><b>cls</b> : String<div class="sub-desc">A custom CSS class to apply to the message box's container element</div></li> * <li><b>defaultTextHeight</b> : Number<div class="sub-desc">The default height in pixels of the message box's multiline textarea * if displayed (defaults to 75)</div></li> * <li><b>fn</b> : Function<div class="sub-desc">A callback function which is called when the dialog is dismissed either * by clicking on the configured buttons, or on the dialog close button, or by pressing * the return button to enter input. * <p>Progress and wait dialogs will ignore this option since they do not respond to user * actions and can only be closed programmatically, so any required function should be called * by the same code after it closes the dialog. Parameters passed:<ul> * <li><b>buttonId</b> : String<div class="sub-desc">The ID of the button pressed, one of:<div class="sub-desc"><ul> * <li><tt>ok</tt></li> * <li><tt>yes</tt></li> * <li><tt>no</tt></li> * <li><tt>cancel</tt></li> * </ul></div></div></li> * <li><b>text</b> : String<div class="sub-desc">Value of the input field if either <tt><a href="#show-option-prompt" ext:member="show-option-prompt" ext:cls="Ext.MessageBox">prompt</a></tt> * or <tt><a href="#show-option-multiline" ext:member="show-option-multiline" ext:cls="Ext.MessageBox">multiline</a></tt> is true</div></li> * <li><b>opt</b> : Object<div class="sub-desc">The config object passed to show.</div></li> * </ul></p></div></li> * <li><b>scope</b> : Object<div class="sub-desc">The scope of the callback function</div></li> * <li><b>icon</b> : String<div class="sub-desc">A CSS class that provides a background image to be used as the body icon for the * dialog (e.g. Ext.MessageBox.WARNING or 'custom-class') (defaults to '')</div></li> * <li><b>iconCls</b> : String<div class="sub-desc">The standard {@link Ext.Window#iconCls} to * add an optional header icon (defaults to '')</div></li> * <li><b>maxWidth</b> : Number<div class="sub-desc">The maximum width in pixels of the message box (defaults to 600)</div></li> * <li><b>minWidth</b> : Number<div class="sub-desc">The minimum width in pixels of the message box (defaults to 100)</div></li> * <li><b>modal</b> : Boolean<div class="sub-desc">False to allow user interaction with the page while the message box is * displayed (defaults to true)</div></li> * <li><b>msg</b> : String<div class="sub-desc">A string that will replace the existing message box body text (defaults to the * XHTML-compliant non-breaking space character '&#160;')</div></li> * <li><a id="show-option-multiline"></a><b>multiline</b> : Boolean<div class="sub-desc"> * True to prompt the user to enter multi-line text (defaults to false)</div></li> * <li><b>progress</b> : Boolean<div class="sub-desc">True to display a progress bar (defaults to false)</div></li> * <li><b>progressText</b> : String<div class="sub-desc">The text to display inside the progress bar if progress = true (defaults to '')</div></li> * <li><a id="show-option-prompt"></a><b>prompt</b> : Boolean<div class="sub-desc">True to prompt the user to enter single-line text (defaults to false)</div></li> * <li><b>proxyDrag</b> : Boolean<div class="sub-desc">True to display a lightweight proxy while dragging (defaults to false)</div></li> * <li><b>title</b> : String<div class="sub-desc">The title text</div></li> * <li><b>value</b> : String<div class="sub-desc">The string value to set into the active textbox element if displayed</div></li> * <li><b>wait</b> : Boolean<div class="sub-desc">True to display a progress bar (defaults to false)</div></li> * <li><b>waitConfig</b> : Object<div class="sub-desc">A {@link Ext.ProgressBar#waitConfig} object (applies only if wait = true)</div></li> * <li><b>width</b> : Number<div class="sub-desc">The width of the dialog in pixels</div></li> * </ul> * Example usage: * <pre><code> Ext.Msg.show({ title: 'Address', msg: 'Please enter your address:', width: 300, buttons: Ext.MessageBox.OKCANCEL, multiline: true, fn: saveAddress, animEl: 'addAddressBtn', icon: Ext.MessageBox.INFO }); </code></pre> * @return {Ext.MessageBox} this */ show : function(options){ if(this.isVisible()){ this.hide(); } opt = options; var d = this.getDialog(opt.title || " "); d.setTitle(opt.title || " "); var allowClose = (opt.closable !== false && opt.progress !== true && opt.wait !== true); d.tools.close.setDisplayed(allowClose); activeTextEl = textboxEl; opt.prompt = opt.prompt || (opt.multiline ? true : false); if(opt.prompt){ if(opt.multiline){ textboxEl.hide(); textareaEl.show(); textareaEl.setHeight(typeof opt.multiline == "number" ? opt.multiline : this.defaultTextHeight); activeTextEl = textareaEl; }else{ textboxEl.show(); textareaEl.hide(); } }else{ textboxEl.hide(); textareaEl.hide(); } activeTextEl.dom.value = opt.value || ""; if(opt.prompt){ d.focusEl = activeTextEl; }else{ var bs = opt.buttons; var db = null; if(bs && bs.ok){ db = buttons["ok"]; }else if(bs && bs.yes){ db = buttons["yes"]; } if (db){ d.focusEl = db; } } if(opt.iconCls){ d.setIconClass(opt.iconCls); } this.setIcon(opt.icon); if(opt.cls){ d.el.addClass(opt.cls); } d.proxyDrag = opt.proxyDrag === true; d.modal = opt.modal !== false; d.mask = opt.modal !== false ? mask : false; d.on('show', function(){ //workaround for window internally enabling keymap in afterShow d.keyMap.setDisabled(allowClose !== true); d.doLayout(); this.setIcon(opt.icon); bwidth = updateButtons(opt.buttons); progressBar.setVisible(opt.progress === true || opt.wait === true); this.updateProgress(0, opt.progressText); this.updateText(opt.msg); if(opt.wait === true){ progressBar.wait(opt.waitConfig); } }, this, {single:true}); if(!d.isVisible()){ // force it to the end of the z-index stack so it gets a cursor in FF document.body.appendChild(dlg.el.dom); d.setAnimateTarget(opt.animEl); d.show(opt.animEl); } return this; }, /** * Adds the specified icon to the dialog. By default, the class 'ext-mb-icon' is applied for default * styling, and the class passed in is expected to supply the background image url. Pass in empty string ('') * to clear any existing icon. The following built-in icon classes are supported, but you can also pass * in a custom class name: * <pre> Ext.MessageBox.INFO Ext.MessageBox.WARNING Ext.MessageBox.QUESTION Ext.MessageBox.ERROR *</pre> * @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon * @return {Ext.MessageBox} this */ setIcon : function(icon){ if(icon && icon != ''){ iconEl.removeClass('x-hidden'); iconEl.replaceClass(iconCls, icon); bodyEl.addClass('x-dlg-icon'); iconCls = icon; }else{ iconEl.replaceClass(iconCls, 'x-hidden'); bodyEl.removeClass('x-dlg-icon'); iconCls = ''; } return this; }, /** * Displays a message box with a progress bar. This message box has no buttons and is not closeable by * the user. You are responsible for updating the progress bar as needed via {@link Ext.MessageBox#updateProgress} * and closing the message box when the process is complete. * @param {String} title The title bar text * @param {String} msg The message box body text * @param {String} progressText (optional) The text to display inside the progress bar (defaults to '') * @return {Ext.MessageBox} this */ progress : function(title, msg, progressText){ this.show({ title : title, msg : msg, buttons: false, progress:true, closable:false, minWidth: this.minProgressWidth, progressText: progressText }); return this; }, /** * Displays a message box with an infinitely auto-updating progress bar. This can be used to block user * interaction while waiting for a long-running process to complete that does not have defined intervals. * You are responsible for closing the message box when the process is complete. * @param {String} msg The message box body text * @param {String} title (optional) The title bar text * @param {Object} config (optional) A {@link Ext.ProgressBar#waitConfig} object * @return {Ext.MessageBox} this */ wait : function(msg, title, config){ this.show({ title : title, msg : msg, buttons: false, closable:false, wait:true, modal:true, minWidth: this.minProgressWidth, waitConfig: config }); return this; }, /** * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt). * If a callback function is passed it will be called after the user clicks the button, and the * id of the button that was clicked will be passed as the only parameter to the callback * (could also be the top-right close button). * @param {String} title The title bar text * @param {String} msg The message box body text * @param {Function} fn (optional) The callback function invoked after the message box is closed * @param {Object} scope (optional) The scope of the callback function * @return {Ext.MessageBox} this */ alert : function(title, msg, fn, scope){ this.show({ title : title, msg : msg, buttons: this.OK, fn: fn, scope : scope }); return this; }, /** * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm). * If a callback function is passed it will be called after the user clicks either button, * and the id of the button that was clicked will be passed as the only parameter to the callback * (could also be the top-right close button). * @param {String} title The title bar text * @param {String} msg The message box body text * @param {Function} fn (optional) The callback function invoked after the message box is closed * @param {Object} scope (optional) The scope of the callback function * @return {Ext.MessageBox} this */ confirm : function(title, msg, fn, scope){ this.show({ title : title, msg : msg, buttons: this.YESNO, fn: fn, scope : scope, icon: this.QUESTION }); return this; }, /** * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt). * The prompt can be a single-line or multi-line textbox. If a callback function is passed it will be called after the user * clicks either button, and the id of the button that was clicked (could also be the top-right * close button) and the text that was entered will be passed as the two parameters to the callback. * @param {String} title The title bar text * @param {String} msg The message box body text * @param {Function} fn (optional) The callback function invoked after the message box is closed * @param {Object} scope (optional) The scope of the callback function * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight * property, or the height in pixels to create the textbox (defaults to false / single-line) * @param {String} value (optional) Default value of the text input element (defaults to '') * @return {Ext.MessageBox} this */ prompt : function(title, msg, fn, scope, multiline, value){ this.show({ title : title, msg : msg, buttons: this.OKCANCEL, fn: fn, minWidth:250, scope : scope, prompt:true, multiline: multiline, value: value }); return this; }, /** * Button config that displays a single OK button * @type Object */ OK : {ok:true}, /** * Button config that displays a single Cancel button * @type Object */ CANCEL : {cancel:true}, /** * Button config that displays OK and Cancel buttons * @type Object */ OKCANCEL : {ok:true, cancel:true}, /** * Button config that displays Yes and No buttons * @type Object */ YESNO : {yes:true, no:true}, /** * Button config that displays Yes, No and Cancel buttons * @type Object */ YESNOCANCEL : {yes:true, no:true, cancel:true}, /** * The CSS class that provides the INFO icon image * @type String */ INFO : 'ext-mb-info', /** * The CSS class that provides the WARNING icon image * @type String */ WARNING : 'ext-mb-warning', /** * The CSS class that provides the QUESTION icon image * @type String */ QUESTION : 'ext-mb-question', /** * The CSS class that provides the ERROR icon image * @type String */ ERROR : 'ext-mb-error', /** * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75) * @type Number */ defaultTextHeight : 75, /** * The maximum width in pixels of the message box (defaults to 600) * @type Number */ maxWidth : 600, /** * The minimum width in pixels of the message box (defaults to 110) * @type Number */ minWidth : 110, /** * The minimum width in pixels of the message box if it is a progress-style dialog. This is useful * for setting a different minimum width than text-only dialogs may need (defaults to 250) * @type Number */ minProgressWidth : 250, /** * An object containing the default button text strings that can be overriden for localized language support. * Supported properties are: ok, cancel, yes and no. Generally you should include a locale-specific * resource file for handling language support across the framework. * Customize the default text like so: Ext.MessageBox.buttonText.yes = "oui"; //french * @type Object */ buttonText : { ok : "OK", cancel : "Cancel", yes : "Yes", no : "No" } }; }(); /** * Shorthand for {@link Ext.MessageBox} */ Ext.Msg = Ext.MessageBox;/**
* @class Ext.dd.PanelProxy
* A custom drag proxy implementation specific to {@link Ext.Panel}s. This class is primarily used internally
* for the Panel's drag drop implementation, and should never need to be created directly.
* @constructor
* @param panel The {@link Ext.Panel} to proxy for
* @param config Configuration options
*/
Ext.dd.PanelProxy = function(panel, config){
this.panel = panel;
this.id = this.panel.id +'-ddproxy';
Ext.apply(this, config);
};
Ext.dd.PanelProxy.prototype = {
/**
* @cfg {Boolean} insertProxy True to insert a placeholder proxy element while dragging the panel,
* false to drag with no proxy (defaults to true).
*/
insertProxy : true,
// private overrides
setStatus : Ext.emptyFn,
reset : Ext.emptyFn,
update : Ext.emptyFn,
stop : Ext.emptyFn,
sync: Ext.emptyFn,
/**
* Gets the proxy's element
* @return {Element} The proxy's element
*/
getEl : function(){
return this.ghost;
},
/**
* Gets the proxy's ghost element
* @return {Element} The proxy's ghost element
*/
getGhost : function(){
return this.ghost;
},
/**
* Gets the proxy's element
* @return {Element} The proxy's element
*/
getProxy : function(){
return this.proxy;
},
/**
* Hides the proxy
*/
hide : function(){
if(this.ghost){
if(this.proxy){
this.proxy.remove();
delete this.proxy;
}
this.panel.el.dom.style.display = '';
this.ghost.remove();
delete this.ghost;
}
},
/**
* Shows the proxy
*/
show : function(){
if(!this.ghost){
this.ghost = this.panel.createGhost(undefined, undefined, Ext.getBody());
this.ghost.setXY(this.panel.el.getXY())
if(this.insertProxy){
this.proxy = this.panel.el.insertSibling({cls:'x-panel-dd-spacer'});
this.proxy.setSize(this.panel.getSize());
}
this.panel.el.dom.style.display = 'none';
}
},
// private
repair : function(xy, callback, scope){
this.hide();
if(typeof callback == "function"){
callback.call(scope || this);
}
},
/**
* Moves the proxy to a different position in the DOM. This is typically called while dragging the Panel
* to keep the proxy sync'd to the Panel's location.
* @param {HTMLElement} parentNode The proxy's parent DOM node
* @param {HTMLElement} before (optional) The sibling node before which the proxy should be inserted (defaults
* to the parent's last child if not specified)
*/
moveProxy : function(parentNode, before){
if(this.proxy){
parentNode.insertBefore(this.proxy.dom, before);
}
}
};
// private - DD implementation for Panels
Ext.Panel.DD = function(panel, cfg){
this.panel = panel;
this.dragData = {panel: panel};
this.proxy = new Ext.dd.PanelProxy(panel, cfg);
Ext.Panel.DD.superclass.constructor.call(this, panel.el, cfg);
var h = panel.header;
if(h){
this.setHandleElId(h.id);
}
(h ? h : this.panel.body).setStyle('cursor', 'move');
this.scroll = false;
};
Ext.extend(Ext.Panel.DD, Ext.dd.DragSource, {
showFrame: Ext.emptyFn,
startDrag: Ext.emptyFn,
b4StartDrag: function(x, y) {
this.proxy.show();
},
b4MouseDown: function(e) {
var x = e.getPageX();
var y = e.getPageY();
this.autoOffset(x, y);
},
onInitDrag : function(x, y){
this.onStartDrag(x, y);
return true;
},
createFrame : Ext.emptyFn,
getDragEl : function(e){
return this.proxy.ghost.dom;
},
endDrag : function(e){
this.proxy.hide();
this.panel.saveState();
},
autoOffset : function(x, y) {
x -= this.startPageX;
y -= this.startPageY;
this.setDelta(x, y);
}
});/** * @class Ext.state.Provider * Abstract base class for state provider implementations. This class provides methods * for encoding and decoding <b>typed</b> variables including dates and defines the * Provider interface. */ Ext.state.Provider = function(){ /** * @event statechange * Fires when a state change occurs. * @param {Provider} this This state provider * @param {String} key The state key which was changed * @param {String} value The encoded value for the state */ this.addEvents("statechange"); this.state = {}; Ext.state.Provider.superclass.constructor.call(this); }; Ext.extend(Ext.state.Provider, Ext.util.Observable, { /** * Returns the current value for a key * @param {String} name The key name * @param {Mixed} defaultValue A default value to return if the key's value is not found * @return {Mixed} The state data */ get : function(name, defaultValue){ return typeof this.state[name] == "undefined" ? defaultValue : this.state[name]; }, /** * Clears a value from the state * @param {String} name The key name */ clear : function(name){ delete this.state[name]; this.fireEvent("statechange", this, name, null); }, /** * Sets the value for a key * @param {String} name The key name * @param {Mixed} value The value to set */ set : function(name, value){ this.state[name] = value; this.fireEvent("statechange", this, name, value); }, /** * Decodes a string previously encoded with {@link #encodeValue}. * @param {String} value The value to decode * @return {Mixed} The decoded value */ decodeValue : function(cookie){ var re = /^(a|n|d|b|s|o):(.*)$/; var matches = re.exec(unescape(cookie)); if(!matches || !matches[1]) return; // non state cookie var type = matches[1]; var v = matches[2]; switch(type){ case "n": return parseFloat(v); case "d": return new Date(Date.parse(v)); case "b": return (v == "1"); case "a": var all = []; var values = v.split("^"); for(var i = 0, len = values.length; i < len; i++){ all.push(this.decodeValue(values[i])); } return all; case "o": var all = {}; var values = v.split("^"); for(var i = 0, len = values.length; i < len; i++){ var kv = values[i].split("="); all[kv[0]] = this.decodeValue(kv[1]); } return all; default: return v; } }, /** * Encodes a value including type information. Decode with {@link #decodeValue}. * @param {Mixed} value The value to encode * @return {String} The encoded value */ encodeValue : function(v){ var enc; if(typeof v == "number"){ enc = "n:" + v; }else if(typeof v == "boolean"){ enc = "b:" + (v ? "1" : "0"); }else if(Ext.isDate(v)){ enc = "d:" + v.toGMTString(); }else if(Ext.isArray(v)){ var flat = ""; for(var i = 0, len = v.length; i < len; i++){ flat += this.encodeValue(v[i]); if(i != len-1) flat += "^"; } enc = "a:" + flat; }else if(typeof v == "object"){ var flat = ""; for(var key in v){ if(typeof v[key] != "function" && v[key] !== undefined){ flat += key + "=" + this.encodeValue(v[key]) + "^"; } } enc = "o:" + flat.substring(0, flat.length-1); }else{ enc = "s:" + v; } return escape(enc); } }); /**
* @class Ext.state.Manager
* This is the global state manager. By default all components that are "state aware" check this class
* for state information if you don't pass them a custom state provider. In order for this class
* to be useful, it must be initialized with a provider when your application initializes. Example usage:
<pre><code>
// in your initialization function
init : function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var win = new Window(...);
win.restoreState();
}
</code></pre>
* @singleton
*/
Ext.state.Manager = function(){
var provider = new Ext.state.Provider();
return {
/**
* Configures the default state provider for your application
* @param {Provider} stateProvider The state provider to set
*/
setProvider : function(stateProvider){
provider = stateProvider;
},
/**
* Returns the current value for a key
* @param {String} name The key name
* @param {Mixed} defaultValue The default value to return if the key lookup does not match
* @return {Mixed} The state data
*/
get : function(key, defaultValue){
return provider.get(key, defaultValue);
},
/**
* Sets the value for a key
* @param {String} name The key name
* @param {Mixed} value The state data
*/
set : function(key, value){
provider.set(key, value);
},
/**
* Clears a value from the state
* @param {String} name The key name
*/
clear : function(key){
provider.clear(key);
},
/**
* Gets the currently configured state provider
* @return {Provider} The state provider
*/
getProvider : function(){
return provider;
}
};
}();
/**
* @class Ext.state.CookieProvider
* @extends Ext.state.Provider
* The default Provider implementation which saves state via cookies.
* <br />Usage:
<pre><code>
var cp = new Ext.state.CookieProvider({
path: "/cgi-bin/",
expires: new Date(new Date().getTime()+(1000*60*60*24*30)), //30 days
domain: "extjs.com"
});
Ext.state.Manager.setProvider(cp);
</code></pre>
* @cfg {String} path The path for which the cookie is active (defaults to root '/' which makes it active for all pages in the site)
* @cfg {Date} expires The cookie expiration date (defaults to 7 days from now)
* @cfg {String} domain The domain to save the cookie for. Note that you cannot specify a different domain than
* your page is on, but you can specify a sub-domain, or simply the domain itself like 'extjs.com' to include
* all sub-domains if you need to access cookies across different sub-domains (defaults to null which uses the same
* domain the page is running on including the 'www' like 'www.extjs.com')
* @cfg {Boolean} secure True if the site is using SSL (defaults to false)
* @constructor
* Create a new CookieProvider
* @param {Object} config The configuration object
*/
Ext.state.CookieProvider = function(config){
Ext.state.CookieProvider.superclass.constructor.call(this);
this.path = "/";
this.expires = new Date(new Date().getTime()+(1000*60*60*24*7)); //7 days
this.domain = null;
this.secure = false;
Ext.apply(this, config);
this.state = this.readCookies();
};
Ext.extend(Ext.state.CookieProvider, Ext.state.Provider, {
// private
set : function(name, value){
if(typeof value == "undefined" || value === null){
this.clear(name);
return;
}
this.setCookie(name, value);
Ext.state.CookieProvider.superclass.set.call(this, name, value);
},
// private
clear : function(name){
this.clearCookie(name);
Ext.state.CookieProvider.superclass.clear.call(this, name);
},
// private
readCookies : function(){
var cookies = {};
var c = document.cookie + ";";
var re = /s?(.*?)=(.*?);/g;
var matches;
while((matches = re.exec(c)) != null){
var name = matches[1];
var value = matches[2];
if(name && name.substring(0,3) == "ys-"){
cookies[name.substr(3)] = this.decodeValue(value);
}
}
return cookies;
},
// private
setCookie : function(name, value){
document.cookie = "ys-"+ name + "=" + this.encodeValue(value) +
((this.expires == null) ? "" : ("; expires=" + this.expires.toGMTString())) +
((this.path == null) ? "" : ("; path=" + this.path)) +
((this.domain == null) ? "" : ("; domain=" + this.domain)) +
((this.secure == true) ? "; secure" : "");
},
// private
clearCookie : function(name){
document.cookie = "ys-" + name + "=null; expires=Thu, 01-Jan-70 00:00:01 GMT" +
((this.path == null) ? "" : ("; path=" + this.path)) +
((this.domain == null) ? "" : ("; domain=" + this.domain)) +
((this.secure == true) ? "; secure" : "");
}
});/** * @class Ext.DataView * @extends Ext.BoxComponent * A mechanism for displaying data using custom layout templates and formatting. DataView uses an {@link Ext.XTemplate} * as its internal templating mechanism, and is bound to an {@link Ext.data.Store} * so that as the data in the store changes the view is automatically updated to reflect the changes. The view also * provides built-in behavior for many common events that can occur for its contained items including click, doubleclick, * mouseover, mouseout, etc. as well as a built-in selection model. <b>In order to use these features, an {@link #itemSelector} * config must be provided for the DataView to determine what nodes it will be working with.</b> * * <p>The example below binds a DataView to a {@link Ext.data.Store} and renders it into an {@link Ext.Panel}.</p> * <pre><code> var store = new Ext.data.JsonStore({ url: 'get-images.php', root: 'images', fields: [ 'name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'} ] }); store.load(); var tpl = new Ext.XTemplate( '<tpl for=".">', '<div class="thumb-wrap" id="{name}">', '<div class="thumb"><img src="{url}" title="{name}"></div>', '<span class="x-editable">{shortName}</span></div>', '</tpl>', '<div class="x-clear"></div>' ); var panel = new Ext.Panel({ id:'images-view', frame:true, width:535, autoHeight:true, collapsible:true, layout:'fit', title:'Simple DataView', items: new Ext.DataView({ store: store, tpl: tpl, autoHeight:true, multiSelect: true, overClass:'x-view-over', itemSelector:'div.thumb-wrap', emptyText: 'No images to display' }) }); panel.render(document.body); </code></pre> * @constructor * Create a new DataView * @param {Object} config The config object * @xtype dataview */ Ext.DataView = Ext.extend(Ext.BoxComponent, { /** * @cfg {String/Array} tpl * The HTML fragment or an array of fragments that will make up the template used by this DataView. This should * be specified in the same format expected by the constructor of {@link Ext.XTemplate}. */ /** * @cfg {Ext.data.Store} store * The {@link Ext.data.Store} to bind this DataView to. */ /** * @cfg {String} itemSelector * <b>This is a required setting</b>. A simple CSS selector (e.g. <tt>div.some-class</tt> or * <tt>span:first-child</tt>) that will be used to determine what nodes this DataView will be * working with. */ /** * @cfg {Boolean} multiSelect * True to allow selection of more than one item at a time, false to allow selection of only a single item * at a time or no selection at all, depending on the value of {@link #singleSelect} (defaults to false). */ /** * @cfg {Boolean} singleSelect * True to allow selection of exactly one item at a time, false to allow no selection at all (defaults to false). * Note that if {@link #multiSelect} = true, this value will be ignored. */ /** * @cfg {Boolean} simpleSelect * True to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl, * false to force the user to hold Ctrl or Shift to select more than on item (defaults to false). */ /** * @cfg {String} overClass * A CSS class to apply to each item in the view on mouseover (defaults to undefined). */ /** * @cfg {String} loadingText * A string to display during data load operations (defaults to undefined). If specified, this text will be * displayed in a loading div and the view's contents will be cleared while loading, otherwise the view's * contents will continue to display normally until the new data is loaded and the contents are replaced. */ /** * @cfg {String} selectedClass * A CSS class to apply to each selected item in the view (defaults to 'x-view-selected'). */ selectedClass : "x-view-selected", /** * @cfg {String} emptyText * The text to display in the view when there is no data to display (defaults to ''). */ emptyText : "", /** * @cfg {Boolean} deferEmptyText True to defer emptyText being applied until the store's first load */ deferEmptyText: true, /** * @cfg {Boolean} trackOver True to enable mouseenter and mouseleave events */ trackOver: false, //private last: false, // private initComponent : function(){ Ext.DataView.superclass.initComponent.call(this); if(Ext.isString(this.tpl) || Ext.isArray(this.tpl)){ this.tpl = new Ext.XTemplate(this.tpl); } this.addEvents( /** * @event beforeclick * Fires before a click is processed. Returns false to cancel the default action. * @param {Ext.DataView} this * @param {Number} index The index of the target node * @param {HTMLElement} node The target node * @param {Ext.EventObject} e The raw event object */ "beforeclick", /** * @event click * Fires when a template node is clicked. * @param {Ext.DataView} this * @param {Number} index The index of the target node * @param {HTMLElement} node The target node * @param {Ext.EventObject} e The raw event object */ "click", /** * @event mouseenter * Fires when the mouse enters a template node. trackOver:true or an overCls must be set to enable this event. * @param {Ext.DataView} this * @param {Number} index The index of the target node * @param {HTMLElement} node The target node * @param {Ext.EventObject} e The raw event object */ "mouseenter", /** * @event mouseleave * Fires when the mouse leaves a template node. trackOver:true or an overCls must be set to enable this event. * @param {Ext.DataView} this * @param {Number} index The index of the target node * @param {HTMLElement} node The target node * @param {Ext.EventObject} e The raw event object */ "mouseleave", /** * @event containerclick * Fires when a click occurs and it is not on a template node. * @param {Ext.DataView} this * @param {Ext.EventObject} e The raw event object */ "containerclick", /** * @event dblclick * Fires when a template node is double clicked. * @param {Ext.DataView} this * @param {Number} index The index of the target node * @param {HTMLElement} node The target node * @param {Ext.EventObject} e The raw event object */ "dblclick", /** * @event contextmenu * Fires when a template node is right clicked. * @param {Ext.DataView} this * @param {Number} index The index of the target node * @param {HTMLElement} node The target node * @param {Ext.EventObject} e The raw event object */ "contextmenu", /** * @event containercontextmenu * Fires when a right click occurs that is not on a template node. * @param {Ext.DataView} this * @param {Ext.EventObject} e The raw event object */ "containercontextmenu", /** * @event selectionchange * Fires when the selected nodes change. * @param {Ext.DataView} this * @param {Array} selections Array of the selected nodes */ "selectionchange", /** * @event beforeselect * Fires before a selection is made. If any handlers return false, the selection is cancelled. * @param {Ext.DataView} this * @param {HTMLElement} node The node to be selected * @param {Array} selections Array of currently selected nodes */ "beforeselect" ); this.store = Ext.StoreMgr.lookup(this.store); this.all = new Ext.CompositeElementLite(); this.selected = new Ext.CompositeElementLite(); }, // private afterRender : function(){ Ext.DataView.superclass.afterRender.call(this); this.mon(this.getTemplateTarget(), { "click": this.onClick, "dblclick": this.onDblClick, "contextmenu": this.onContextMenu, scope:this }); if(this.overClass || this.trackOver){ this.mon(this.getTemplateTarget(), { "mouseover": this.onMouseOver, "mouseout": this.onMouseOut, scope:this }); } if(this.store){ this.bindStore(this.store, true); } }, /** * Refreshes the view by reloading the data from the store and re-rendering the template. */ refresh : function(){ this.clearSelections(false, true); var el = this.getTemplateTarget(); el.update(""); var records = this.store.getRange(); if(records.length < 1){ if(!this.deferEmptyText || this.hasSkippedEmptyText){ el.update(this.emptyText); } this.all.clear(); }else{ this.tpl.overwrite(el, this.collectData(records, 0)); this.all.fill(Ext.query(this.itemSelector, el.dom)); this.updateIndexes(0); } this.hasSkippedEmptyText = true; }, getTemplateTarget: function(){ return this.el; }, /** * Function which can be overridden to provide custom formatting for each Record that is used by this * DataView's {@link #tpl template} to render each node. * @param {Array/Object} data The raw data object that was used to create the Record. * @param {Number} recordIndex the index number of the Record being prepared for rendering. * @param {Record} record The Record being prepared for rendering. * @return {Array/Object} The formatted data in a format expected by the internal {@link #tpl template}'s overwrite() method. * (either an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})) */ prepareData : function(data){ return data; }, /** * <p>Function which can be overridden which returns the data object passed to this * DataView's {@link #tpl template} to render the whole DataView.</p> * <p>This is usually an Array of data objects, each element of which is processed by an * {@link Ext.XTemplate XTemplate} which uses <tt>'<tpl for=".">'</tt> to iterate over its supplied * data object as an Array. However, <i>named</i> properties may be placed into the data object to * provide non-repeating data such as headings, totals etc.</p> * @param {Array} records An Array of {@link Ext.data.Record}s to be rendered into the DataView. * @param {Number} startIndex the index number of the Record being prepared for rendering. * @return {Array} An Array of data objects to be processed by a repeating XTemplate. May also * contain <i>named</i> properties. */ collectData : function(records, startIndex){ var r = []; for(var i = 0, len = records.length; i < len; i++){ r[r.length] = this.prepareData(records[i].data, startIndex+i, records[i]); } return r; }, // private bufferRender : function(records){ var div = document.createElement('div'); this.tpl.overwrite(div, this.collectData(records)); return Ext.query(this.itemSelector, div); }, // private onUpdate : function(ds, record){ var index = this.store.indexOf(record); var sel = this.isSelected(index); var original = this.all.elements[index]; var node = this.bufferRender([record], index)[0]; this.all.replaceElement(index, node, true); if(sel){ this.selected.replaceElement(original, node); this.all.item(index).addClass(this.selectedClass); } this.updateIndexes(index, index); }, // private onAdd : function(ds, records, index){ if(this.all.getCount() === 0){ this.refresh(); return; } var nodes = this.bufferRender(records, index), n, a = this.all.elements; if(index < this.all.getCount()){ n = this.all.item(index).insertSibling(nodes, 'before', true); a.splice.apply(a, [index, 0].concat(nodes)); }else{ n = this.all.last().insertSibling(nodes, 'after', true); a.push.apply(a, nodes); } this.updateIndexes(index); }, // private onRemove : function(ds, record, index){ this.deselect(index); this.all.removeElement(index, true); this.updateIndexes(index); if (this.store.getCount() === 0){ this.refresh(); } }, /** * Refreshes an individual node's data from the store. * @param {Number} index The item's data index in the store */ refreshNode : function(index){ this.onUpdate(this.store, this.store.getAt(index)); }, // private updateIndexes : function(startIndex, endIndex){ var ns = this.all.elements; startIndex = startIndex || 0; endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1)); for(var i = startIndex; i <= endIndex; i++){ ns[i].viewIndex = i; } }, /** * Returns the store associated with this DataView. * @return {Ext.data.Store} The store */ getStore : function(){ return this.store; }, /** * Changes the data store bound to this view and refreshes it. * @param {Store} store The store to bind to this view */ bindStore : function(store, initial){ if(!initial && this.store){ this.store.un("beforeload", this.onBeforeLoad, this); this.store.un("datachanged", this.refresh, this); this.store.un("add", this.onAdd, this); this.store.un("remove", this.onRemove, this); this.store.un("update", this.onUpdate, this); this.store.un("clear", this.refresh, this); if(store !== this.store && this.store.autoDestroy){ this.store.destroy(); } } if(store){ store = Ext.StoreMgr.lookup(store); store.on({ scope: this, beforeload: this.onBeforeLoad, datachanged: this.refresh, add: this.onAdd, remove: this.onRemove, update: this.onUpdate, clear: this.refresh }); } this.store = store; if(store){ this.refresh(); } }, /** * Returns the template node the passed child belongs to, or null if it doesn't belong to one. * @param {HTMLElement} node * @return {HTMLElement} The template node */ findItemFromChild : function(node){ return Ext.fly(node).findParent(this.itemSelector, this.getTemplateTarget()); }, // private onClick : function(e){ var item = e.getTarget(this.itemSelector, this.getTemplateTarget()); if(item){ var index = this.indexOf(item); if(this.onItemClick(item, index, e) !== false){ this.fireEvent("click", this, index, item, e); } }else{ if(this.fireEvent("containerclick", this, e) !== false){ this.onContainerClick(e); } } }, onContainerClick : function(e){ this.clearSelections(); }, // private onContextMenu : function(e){ var item = e.getTarget(this.itemSelector, this.getTemplateTarget()); if(item){ this.fireEvent("contextmenu", this, this.indexOf(item), item, e); }else{ this.fireEvent("containercontextmenu", this, e); } }, // private onDblClick : function(e){ var item = e.getTarget(this.itemSelector, this.getTemplateTarget()); if(item){ this.fireEvent("dblclick", this, this.indexOf(item), item, e); } }, // private onMouseOver : function(e){ var item = e.getTarget(this.itemSelector, this.getTemplateTarget()); if(item && item !== this.lastItem){ this.lastItem = item; Ext.fly(item).addClass(this.overClass); this.fireEvent("mouseenter", this, this.indexOf(item), item, e); } }, // private onMouseOut : function(e){ if(this.lastItem){ if(!e.within(this.lastItem, true, true)){ Ext.fly(this.lastItem).removeClass(this.overClass); this.fireEvent("mouseleave", this, this.indexOf(this.lastItem), this.lastItem, e); delete this.lastItem; } } }, // private onItemClick : function(item, index, e){ if(this.fireEvent("beforeclick", this, index, item, e) === false){ return false; } if(this.multiSelect){ this.doMultiSelection(item, index, e); e.preventDefault(); }else if(this.singleSelect){ this.doSingleSelection(item, index, e); e.preventDefault(); } return true; }, // private doSingleSelection : function(item, index, e){ if(e.ctrlKey && this.isSelected(index)){ this.deselect(index); }else{ this.select(index, false); } }, // private doMultiSelection : function(item, index, e){ if(e.shiftKey && this.last !== false){ var last = this.last; this.selectRange(last, index, e.ctrlKey); this.last = last; // reset the last }else{ if((e.ctrlKey||this.simpleSelect) && this.isSelected(index)){ this.deselect(index); }else{ this.select(index, e.ctrlKey || e.shiftKey || this.simpleSelect); } } }, /** * Gets the number of selected nodes. * @return {Number} The node count */ getSelectionCount : function(){ return this.selected.getCount(); }, /** * Gets the currently selected nodes. * @return {Array} An array of HTMLElements */ getSelectedNodes : function(){ return this.selected.elements; }, /** * Gets the indexes of the selected nodes. * @return {Array} An array of numeric indexes */ getSelectedIndexes : function(){ var indexes = [], s = this.selected.elements; for(var i = 0, len = s.length; i < len; i++){ indexes.push(s[i].viewIndex); } return indexes; }, /** * Gets an array of the selected records * @return {Array} An array of {@link Ext.data.Record} objects */ getSelectedRecords : function(){ var r = [], s = this.selected.elements; for(var i = 0, len = s.length; i < len; i++){ r[r.length] = this.store.getAt(s[i].viewIndex); } return r; }, /** * Gets an array of the records from an array of nodes * @param {Array} nodes The nodes to evaluate * @return {Array} records The {@link Ext.data.Record} objects */ getRecords : function(nodes){ var r = [], s = nodes; for(var i = 0, len = s.length; i < len; i++){ r[r.length] = this.store.getAt(s[i].viewIndex); } return r; }, /** * Gets a record from a node * @param {HTMLElement} node The node to evaluate * @return {Record} record The {@link Ext.data.Record} object */ getRecord : function(node){ return this.store.getAt(node.viewIndex); }, /** * Clears all selections. * @param {Boolean} suppressEvent (optional) True to skip firing of the selectionchange event */ clearSelections : function(suppressEvent, skipUpdate){ if((this.multiSelect || this.singleSelect) && this.selected.getCount() > 0){ if(!skipUpdate){ this.selected.removeClass(this.selectedClass); } this.selected.clear(); this.last = false; if(!suppressEvent){ this.fireEvent("selectionchange", this, this.selected.elements); } } }, /** * Returns true if the passed node is selected, else false. * @param {HTMLElement/Number} node The node or node index to check * @return {Boolean} True if selected, else false */ isSelected : function(node){ return this.selected.contains(this.getNode(node)); }, /** * Deselects a node. * @param {HTMLElement/Number} node The node to deselect */ deselect : function(node){ if(this.isSelected(node)){ node = this.getNode(node); this.selected.removeElement(node); if(this.last == node.viewIndex){ this.last = false; } Ext.fly(node).removeClass(this.selectedClass); this.fireEvent("selectionchange", this, this.selected.elements); } }, /** * Selects a set of nodes. * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, * id of a template node or an array of any of those to select * @param {Boolean} keepExisting (optional) true to keep existing selections * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent */ select : function(nodeInfo, keepExisting, suppressEvent){ if(Ext.isArray(nodeInfo)){ if(!keepExisting){ this.clearSelections(true); } for(var i = 0, len = nodeInfo.length; i < len; i++){ this.select(nodeInfo[i], true, true); } if(!suppressEvent){ this.fireEvent("selectionchange", this, this.selected.elements); } } else{ var node = this.getNode(nodeInfo); if(!keepExisting){ this.clearSelections(true); } if(node && !this.isSelected(node)){ if(this.fireEvent("beforeselect", this, node, this.selected.elements) !== false){ Ext.fly(node).addClass(this.selectedClass); this.selected.add(node); this.last = node.viewIndex; if(!suppressEvent){ this.fireEvent("selectionchange", this, this.selected.elements); } } } } }, /** * Selects a range of nodes. All nodes between start and end are selected. * @param {Number} start The index of the first node in the range * @param {Number} end The index of the last node in the range * @param {Boolean} keepExisting (optional) True to retain existing selections */ selectRange : function(start, end, keepExisting){ if(!keepExisting){ this.clearSelections(true); } this.select(this.getNodes(start, end), true); }, /** * Gets a template node. * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node * @return {HTMLElement} The node or null if it wasn't found */ getNode : function(nodeInfo){ if(Ext.isString(nodeInfo)){ return document.getElementById(nodeInfo); }else if(Ext.isNumber(nodeInfo)){ return this.all.elements[nodeInfo]; } return nodeInfo; }, /** * Gets a range nodes. * @param {Number} start (optional) The index of the first node in the range * @param {Number} end (optional) The index of the last node in the range * @return {Array} An array of nodes */ getNodes : function(start, end){ var ns = this.all.elements; start = start || 0; end = !Ext.isDefined(end) ? Math.max(ns.length - 1, 0) : end; var nodes = [], i; if(start <= end){ for(i = start; i <= end && ns[i]; i++){ nodes.push(ns[i]); } } else{ for(i = start; i >= end && ns[i]; i--){ nodes.push(ns[i]); } } return nodes; }, /** * Finds the index of the passed node. * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node * @return {Number} The index of the node or -1 */ indexOf : function(node){ node = this.getNode(node); if(Ext.isNumber(node.viewIndex)){ return node.viewIndex; } return this.all.indexOf(node); }, // private onBeforeLoad : function(){ if(this.loadingText){ this.clearSelections(false, true); this.getTemplateTarget().update('<div class="loading-indicator">'+this.loadingText+'</div>'); this.all.clear(); } }, onDestroy : function(){ Ext.DataView.superclass.onDestroy.call(this); this.bindStore(null); } }); /** * Changes the data store bound to this view and refreshes it. (deprecated in favor of bindStore) * @param {Store} store The store to bind to this view */ Ext.DataView.prototype.setStore = Ext.DataView.prototype.bindStore; Ext.reg('dataview', Ext.DataView);/**
* @class Ext.ListView
* @extends Ext.DataView
* <p>Ext.ListView is a fast and light-weight implentation of a
* {@link Ext.grid.GridPanel Grid} like view with the following characteristics:</p>
* <div class="mdetail-params"><ul>
* <li>resizable columns</li>
* <li>selectable</li>
* <li>column widths are initially proportioned by percentage based on the container
* width and number of columns</li>
* <li>uses templates to render the data in any required format</li>
* <li>no horizontal scrolling</li>
* <li>no editing</li>
* </ul></div>
* <p>Example usage:</p>
* <pre><code>
// consume JSON of this form:
{
"images":[
{
"name":"dance_fever.jpg",
"size":2067,
"lastmod":1236974993000,
"url":"images/thumbs/dance_fever.jpg"
},
{
"name":"zack_sink.jpg",
"size":2303,
"lastmod":1236974993000,
"url":"images/thumbs/zack_sink.jpg"
}
]
}
var store = new Ext.data.JsonStore({
url: 'get-images.php',
root: 'images',
fields: [
'name', 'url',
{name:'size', type: 'float'},
{name:'lastmod', type:'date', dateFormat:'timestamp'}
]
});
store.load();
var listView = new Ext.ListView({
store: store,
multiSelect: true,
emptyText: 'No images to display',
reserveScrollOffset: true,
columns: [{
header: 'File',
width: .5,
dataIndex: 'name'
},{
header: 'Last Modified',
width: .35,
dataIndex: 'lastmod',
tpl: '{lastmod:date("m-d h:i a")}'
},{
header: 'Size',
dataIndex: 'size',
tpl: '{size:fileSize}', // format using Ext.util.Format.fileSize()
align: 'right'
}]
});
// put it in a Panel so it looks pretty
var panel = new Ext.Panel({
id:'images-view',
width:425,
height:250,
collapsible:true,
layout:'fit',
title:'Simple ListView <i>(0 items selected)</i>',
items: listView
});
panel.render(document.body);
// little bit of feedback
listView.on('selectionchange', function(view, nodes){
var l = nodes.length;
var s = l != 1 ? 's' : '';
panel.setTitle('Simple ListView <i>('+l+' item'+s+' selected)</i>');
});
* </code></pre>
* @constructor
* @param {Object} config
* @xtype listview
*/
Ext.ListView = Ext.extend(Ext.DataView, {
/**
* Set this property to <tt>true</tt> to disable the header click handler disabling sort
* (defaults to <tt>false</tt>).
* @type Boolean
* @property disableHeaders
*/
/**
* @cfg {Boolean} hideHeaders
* <tt>true</tt> to hide the {@link #internalTpl header row} (defaults to <tt>false</tt> so
* the {@link #internalTpl header row} will be shown).
*/
/**
* @cfg {String} itemSelector
* Defaults to <tt>'dl'</tt> to work with the preconfigured <b><tt>{@link Ext.DataView#tpl tpl}</tt></b>.
* This setting specifies the CSS selector (e.g. <tt>div.some-class</tt> or <tt>span:first-child</tt>)
* that will be used to determine what nodes the ListView will be working with.
*/
itemSelector: 'dl',
/**
* @cfg {String} selectedClass The CSS class applied to a selected row (defaults to
* <tt>'x-list-selected'</tt>). An example overriding the default styling:
<pre><code>
.x-list-selected {background-color: yellow;}
</code></pre>
* @type String
*/
selectedClass:'x-list-selected',
/**
* @cfg {String} overClass The CSS class applied when over a row (defaults to
* <tt>'x-list-over'</tt>). An example overriding the default styling:
<pre><code>
.x-list-over {background-color: orange;}
</code></pre>
* @type String
*/
overClass:'x-list-over',
/**
* @cfg {Boolean} reserveScrollOffset
* By default will defer accounting for the configured <b><tt>{@link #scrollOffset}</tt></b>
* for 10 milliseconds. Specify <tt>true</tt> to account for the configured
* <b><tt>{@link #scrollOffset}</tt></b> immediately.
*/
/**
* @cfg {Number} scrollOffset The amount of space to reserve for the scrollbar (defaults to
* <tt>19</tt> pixels)
*/
scrollOffset : 19,
/**
* @cfg {Boolean/Object} columnResize
* Specify <tt>true</tt> or specify a configuration object for {@link Ext.ListView.ColumnResizer}
* to enable the columns to be resizable (defaults to <tt>true</tt>).
*/
columnResize: true,
/**
* @cfg {Array} columns An array of column configuration objects, for example:
* <pre><code>
{
align: 'right',
dataIndex: 'size',
header: 'Size',
tpl: '{size:fileSize}',
width: .35
}
* </code></pre>
* Acceptable properties for each column configuration object are:
* <div class="mdetail-params"><ul>
* <li><b><tt>align</tt></b> : String<div class="sub-desc">Set the CSS text-align property
* of the column. Defaults to <tt>'left'</tt>.</div></li>
* <li><b><tt>dataIndex</tt></b> : String<div class="sub-desc">See {@link Ext.grid.Column}.
* {@link Ext.grid.Column#dataIndex dataIndex} for details.</div></li>
* <li><b><tt>header</tt></b> : String<div class="sub-desc">See {@link Ext.grid.Column}.
* {@link Ext.grid.Column#header header} for details.</div></li>
* <li><b><tt>tpl</tt></b> : String<div class="sub-desc">Specify a string to pass as the
* configuration string for {@link Ext.XTemplate}. By default an {@link Ext.XTemplate}
* will be implicitly created using the <tt>dataIndex</tt>.</div></li>
* <li><b><tt>width</tt></b> : Number<div class="sub-desc">Percentage of the container width
* this column should be allocated. Columns that have no width specified will be
* allocated with an equal percentage to fill 100% of the container width. To easily take
* advantage of the full container width, leave the width of at least one column undefined.
* Note that if you do not want to take up the full width of the container, the width of
* every column needs to be explicitly defined.</div></li>
* </ul></div>
*/
/**
* @cfg {Boolean/Object} columnSort
* Specify <tt>true</tt> or specify a configuration object for {@link Ext.ListView.Sorter}
* to enable the columns to be sortable (defaults to <tt>true</tt>).
*/
columnSort: true,
/**
* @cfg {String/Array} internalTpl
* The template to be used for the header row. See {@link #tpl} for more details.
*/
initComponent : function(){
if(this.columnResize){
this.colResizer = new Ext.ListView.ColumnResizer(this.colResizer);
this.colResizer.init(this);
}
if(this.columnSort){
this.colSorter = new Ext.ListView.Sorter(this.columnSort);
this.colSorter.init(this);
}
if(!this.internalTpl){
this.internalTpl = new Ext.XTemplate(
'<div class="x-list-header"><div class="x-list-header-inner">',
'<tpl for="columns">',
'<div style="width:{width}%;text-align:{align};"><em unselectable="on" id="',this.id, '-xlhd-{#}">',
'{header}',
'</em></div>',
'</tpl>',
'<div class="x-clear"></div>',
'</div></div>',
'<div class="x-list-body"><div class="x-list-body-inner">',
'</div></div>'
);
}
if(!this.tpl){
this.tpl = new Ext.XTemplate(
'<tpl for="rows">',
'<dl>',
'<tpl for="parent.columns">',
'<dt style="width:{width}%;text-align:{align};"><em unselectable="on">',
'{[values.tpl.apply(parent)]}',
'</em></dt>',
'</tpl>',
'<div class="x-clear"></div>',
'</dl>',
'</tpl>'
);
};
var cs = this.columns, allocatedWidth = 0, colsWithWidth = 0, len = cs.length;
for(var i = 0; i < len; i++){
var c = cs[i];
if(!c.tpl){
c.tpl = new Ext.XTemplate('{' + c.dataIndex + '}');
}else if(Ext.isString(c.tpl)){
c.tpl = new Ext.XTemplate(c.tpl);
}
c.align = c.align || 'left';
if(Ext.isNumber(c.width)){
c.width *= 100;
allocatedWidth += c.width;
colsWithWidth++;
}
}
// auto calculate missing column widths
if(colsWithWidth < len){
var remaining = len - colsWithWidth;
if(allocatedWidth < 100){
var perCol = ((100-allocatedWidth) / remaining);
for(var j = 0; j < len; j++){
var c = cs[j];
if(!Ext.isNumber(c.width)){
c.width = perCol;
}
}
}
}
Ext.ListView.superclass.initComponent.call(this);
},
onRender : function(){
Ext.ListView.superclass.onRender.apply(this, arguments);
this.internalTpl.overwrite(this.el, {columns: this.columns});
this.innerBody = Ext.get(this.el.dom.childNodes[1].firstChild);
this.innerHd = Ext.get(this.el.dom.firstChild.firstChild);
if(this.hideHeaders){
this.el.dom.firstChild.style.display = 'none';
}
},
getTemplateTarget : function(){
return this.innerBody;
},
/**
* <p>Function which can be overridden which returns the data object passed to this
* view's {@link #tpl template} to render the whole ListView. The returned object
* shall contain the following properties:</p>
* <div class="mdetail-params"><ul>
* <li><b>columns</b> : String<div class="sub-desc">See <tt>{@link #columns}</tt></div></li>
* <li><b>rows</b> : String<div class="sub-desc">See
* <tt>{@link Ext.DataView}.{@link Ext.DataView#collectData collectData}</div></li>
* </ul></div>
* @param {Array} records An Array of {@link Ext.data.Record}s to be rendered into the DataView.
* @param {Number} startIndex the index number of the Record being prepared for rendering.
* @return {Object} A data object containing properties to be processed by a repeating
* XTemplate as described above.
*/
collectData : function(){
var rs = Ext.ListView.superclass.collectData.apply(this, arguments);
return {
columns: this.columns,
rows: rs
}
},
verifyInternalSize : function(){
if(this.lastSize){
this.onResize(this.lastSize.width, this.lastSize.height);
}
},
// private
onResize : function(w, h){
var bd = this.innerBody.dom;
var hd = this.innerHd.dom
if(!bd){
return;
}
var bdp = bd.parentNode;
if(Ext.isNumber(w)){
var sw = w - this.scrollOffset;
if(this.reserveScrollOffset || ((bdp.offsetWidth - bdp.clientWidth) > 10)){
bd.style.width = sw + 'px';
hd.style.width = sw + 'px';
}else{
bd.style.width = w + 'px';
hd.style.width = w + 'px';
setTimeout(function(){
if((bdp.offsetWidth - bdp.clientWidth) > 10){
bd.style.width = sw + 'px';
hd.style.width = sw + 'px';
}
}, 10);
}
}
if(Ext.isNumber(h == 'number')){
bdp.style.height = (h - hd.parentNode.offsetHeight) + 'px';
}
},
updateIndexes : function(){
Ext.ListView.superclass.updateIndexes.apply(this, arguments);
this.verifyInternalSize();
},
findHeaderIndex : function(hd){
hd = hd.dom || hd;
var pn = hd.parentNode, cs = pn.parentNode.childNodes;
for(var i = 0, c; c = cs[i]; i++){
if(c == pn){
return i;
}
}
return -1;
},
setHdWidths : function(){
var els = this.innerHd.dom.getElementsByTagName('div');
for(var i = 0, cs = this.columns, len = cs.length; i < len; i++){
els[i].style.width = cs[i].width + '%';
}
}
});
Ext.reg('listview', Ext.ListView);/**
* @class Ext.ListView.ColumnResizer
* @extends Ext.util.Observable
* <p>Supporting Class for Ext.ListView.</p>
* @constructor
* @param {Object} config
*/
Ext.ListView.ColumnResizer = Ext.extend(Ext.util.Observable, {
/**
* @cfg {Number} minPct The minimum percentage to allot for any column (defaults to <tt>.05</tt>)
*/
minPct: .05,
constructor: function(config){
Ext.apply(this, config);
Ext.ListView.ColumnResizer.superclass.constructor.call(this);
},
init : function(listView){
this.view = listView;
listView.on('render', this.initEvents, this);
},
initEvents : function(view){
view.mon(view.innerHd, 'mousemove', this.handleHdMove, this);
this.tracker = new Ext.dd.DragTracker({
onBeforeStart: this.onBeforeStart.createDelegate(this),
onStart: this.onStart.createDelegate(this),
onDrag: this.onDrag.createDelegate(this),
onEnd: this.onEnd.createDelegate(this),
tolerance: 3,
autoStart: 300
});
this.tracker.initEl(view.innerHd);
view.on('beforedestroy', this.tracker.destroy, this.tracker);
},
handleHdMove : function(e, t){
var hw = 5;
var x = e.getPageX();
var hd = e.getTarget('em', 3, true);
if(hd){
var r = hd.getRegion();
var ss = hd.dom.style;
var pn = hd.dom.parentNode;
if(x - r.left <= hw && pn != pn.parentNode.firstChild){
this.activeHd = Ext.get(pn.previousSibling.firstChild);
ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
} else if(r.right - x <= hw && pn != pn.parentNode.lastChild.previousSibling){
this.activeHd = hd;
ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
} else{
delete this.activeHd;
ss.cursor = '';
}
}
},
onBeforeStart : function(e){
this.dragHd = this.activeHd;
return !!this.dragHd;
},
onStart: function(e){
this.view.disableHeaders = true;
this.proxy = this.view.el.createChild({cls:'x-list-resizer'});
this.proxy.setHeight(this.view.el.getHeight());
var x = this.tracker.getXY()[0];
var w = this.view.innerHd.getWidth();
this.hdX = this.dragHd.getX();
this.hdIndex = this.view.findHeaderIndex(this.dragHd);
this.proxy.setX(this.hdX);
this.proxy.setWidth(x-this.hdX);
this.minWidth = w*this.minPct;
this.maxWidth = w - (this.minWidth*(this.view.columns.length-1-this.hdIndex));
},
onDrag: function(e){
var cursorX = this.tracker.getXY()[0];
this.proxy.setWidth((cursorX-this.hdX).constrain(this.minWidth, this.maxWidth));
},
onEnd: function(e){
var nw = this.proxy.getWidth();
this.proxy.remove();
var index = this.hdIndex;
var vw = this.view, cs = vw.columns, len = cs.length;
var w = this.view.innerHd.getWidth(), minPct = this.minPct * 100;
var pct = Math.ceil((nw*100) / w);
var diff = cs[index].width - pct;
var each = Math.floor(diff / (len-1-index));
var mod = diff - (each * (len-1-index));
for(var i = index+1; i < len; i++){
var cw = cs[i].width + each;
var ncw = Math.max(minPct, cw);
if(cw != ncw){
mod += cw - ncw;
}
cs[i].width = ncw;
}
cs[index].width = pct;
cs[index+1].width += mod;
delete this.dragHd;
this.view.setHdWidths();
this.view.refresh();
setTimeout(function(){
vw.disableHeaders = false;
}, 100);
}
});/**
* @class Ext.ListView.Sorter
* @extends Ext.util.Observable
* <p>Supporting Class for Ext.ListView.</p>
* @constructor
* @param {Object} config
*/
Ext.ListView.Sorter = Ext.extend(Ext.util.Observable, {
/**
* @cfg {Array} sortClasses
* The CSS classes applied to a header when it is sorted. (defaults to <tt>["sort-asc", "sort-desc"]</tt>)
*/
sortClasses : ["sort-asc", "sort-desc"],
constructor: function(config){
Ext.apply(this, config);
Ext.ListView.Sorter.superclass.constructor.call(this);
},
init : function(listView){
this.view = listView;
listView.on('render', this.initEvents, this);
},
initEvents : function(view){
view.mon(view.innerHd, 'click', this.onHdClick, this);
view.innerHd.setStyle('cursor', 'pointer');
view.mon(view.store, 'datachanged', this.updateSortState, this);
this.updateSortState.defer(10, this, [view.store]);
},
updateSortState : function(store){
var state = store.getSortState();
if(!state){
return;
}
this.sortState = state;
var cs = this.view.columns, sortColumn = -1;
for(var i = 0, len = cs.length; i < len; i++){
if(cs[i].dataIndex == state.field){
sortColumn = i;
break;
}
}
if(sortColumn != -1){
var sortDir = state.direction;