Alien-Web-ExtJS-V3
view release on metacpan or search on metacpan
share/ext-all-debug-w-comments.js view on Meta::CPAN
} else {
if (!winner ||
winner.overlap.getArea() < dd.overlap.getArea()) {
winner = dd;
}
}
}
}
return winner;
},
/**
* Refreshes the cache of the top-left and bottom-right points of the
* drag and drop objects in the specified group(s). This is in the
* format that is stored in the drag and drop instance, so typical
* usage is:
* <code>
* Ext.dd.DragDropMgr.refreshCache(ddinstance.groups);
* </code>
* Alternatively:
* <code>
* Ext.dd.DragDropMgr.refreshCache({group1:true, group2:true});
* </code>
* @TODO this really should be an indexed array. Alternatively this
* method could accept both.
* @method refreshCache
* @param {Object} groups an associative array of groups to refresh
*/
refreshCache: function(groups) {
for (var sGroup in groups) {
if ("string" != typeof sGroup) {
continue;
}
for (var i in this.ids[sGroup]) {
var oDD = this.ids[sGroup][i];
if (this.isTypeOfDD(oDD)) {
// if (this.isTypeOfDD(oDD) && oDD.isTarget) {
var loc = this.getLocation(oDD);
if (loc) {
this.locationCache[oDD.id] = loc;
} else {
delete this.locationCache[oDD.id];
// this will unregister the drag and drop object if
// the element is not in a usable state
// oDD.unreg();
}
}
}
}
},
/**
* This checks to make sure an element exists and is in the DOM. The
* main purpose is to handle cases where innerHTML is used to remove
* drag and drop objects from the DOM. IE provides an 'unspecified
* error' when trying to access the offsetParent of such an element
* @method verifyEl
* @param {HTMLElement} el the element to check
* @return {boolean} true if the element looks usable
*/
verifyEl: function(el) {
if (el) {
var parent;
if(Ext.isIE){
try{
parent = el.offsetParent;
}catch(e){}
}else{
parent = el.offsetParent;
}
if (parent) {
return true;
}
}
return false;
},
/**
* Returns a Region object containing the drag and drop element's position
* and size, including the padding configured for it
* @method getLocation
* @param {DragDrop} oDD the drag and drop object to get the
* location for
* @return {Ext.lib.Region} a Region object representing the total area
* the element occupies, including any padding
* the instance is configured for.
*/
getLocation: function(oDD) {
if (! this.isTypeOfDD(oDD)) {
return null;
}
var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l, region;
try {
pos= Ext.lib.Dom.getXY(el);
} catch (e) { }
if (!pos) {
return null;
}
x1 = pos[0];
x2 = x1 + el.offsetWidth;
y1 = pos[1];
y2 = y1 + el.offsetHeight;
t = y1 - oDD.padding[0];
r = x2 + oDD.padding[1];
b = y2 + oDD.padding[2];
l = x1 - oDD.padding[3];
return new Ext.lib.Region( t, r, b, l );
},
/**
* Checks the cursor location to see if it over the target
* @method isOverTarget
share/ext-all-debug-w-comments.js view on Meta::CPAN
* <p>Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over
* a drop target, that target is passed as the first parameter to {@link #onNodeEnter}, {@link #onNodeOver},
* {@link #onNodeOut}, {@link #onNodeDrop}. You may configure the instance of DropZone with implementations
* of these methods to provide application-specific behaviour for these events to update both
* application state, and UI state.</p>
* <p>For example to make a GridPanel a cooperating target with the example illustrated in
* {@link Ext.dd.DragZone DragZone}, the following technique might be used:</p><pre><code>
myGridPanel.on('render', function() {
myGridPanel.dropZone = new Ext.dd.DropZone(myGridPanel.getView().scroller, {
// If the mouse is over a grid row, return that node. This is
// provided as the "target" parameter in all "onNodeXXXX" node event handling functions
getTargetFromEvent: function(e) {
return e.getTarget(myGridPanel.getView().rowSelector);
},
// On entry into a target node, highlight that node.
onNodeEnter : function(target, dd, e, data){
Ext.fly(target).addClass('my-row-highlight-class');
},
// On exit from a target node, unhighlight that node.
onNodeOut : function(target, dd, e, data){
Ext.fly(target).removeClass('my-row-highlight-class');
},
// While over a target node, return the default drop allowed class which
// places a "tick" icon into the drag proxy.
onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},
// On node drop we can interrogate the target to find the underlying
// application object that is the real target of the dragged data.
// In this case, it is a Record in the GridPanel's Store.
// We can use the data set up by the DragZone's getDragData method to read
// any data we decided to attach in the DragZone's getDragData method.
onNodeDrop : function(target, dd, e, data){
var rowIndex = myGridPanel.getView().findRowIndex(target);
var r = myGridPanel.getStore().getAt(rowIndex);
Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +
' on Record id ' + r.id);
return true;
}
});
}
</code></pre>
* See the {@link Ext.dd.DragZone DragZone} documentation for details about building a DragZone which
* cooperates with this DropZone.
* @constructor
* @param {Mixed} el The container element
* @param {Object} config
*/
Ext.dd.DropZone = function(el, config){
Ext.dd.DropZone.superclass.constructor.call(this, el, config);
};
Ext.extend(Ext.dd.DropZone, Ext.dd.DropTarget, {
/**
* Returns a custom data object associated with the DOM node that is the target of the event. By default
* this looks up the event target in the {@link Ext.dd.Registry}, although you can override this method to
* provide your own custom lookup.
* @param {Event} e The event
* @return {Object} data The custom data
*/
getTargetFromEvent : function(e){
return Ext.dd.Registry.getTargetFromEvent(e);
},
/**
* Called when the DropZone determines that a {@link Ext.dd.DragSource} has entered a drop node
* that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
* This method has no default implementation and should be overridden to provide
* node-specific processing if necessary.
* @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
* {@link #getTargetFromEvent} for this node)
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
* @param {Event} e The event
* @param {Object} data An object containing arbitrary data supplied by the drag source
*/
onNodeEnter : function(n, dd, e, data){
},
/**
* Called while the DropZone determines that a {@link Ext.dd.DragSource} is over a drop node
* that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
* The default implementation returns this.dropNotAllowed, so it should be
* overridden to provide the proper feedback.
* @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
* {@link #getTargetFromEvent} for this node)
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
* @param {Event} e The event
* @param {Object} data An object containing arbitrary data supplied by the drag source
* @return {String} status The CSS class that communicates the drop status back to the source so that the
* underlying {@link Ext.dd.StatusProxy} can be updated
*/
onNodeOver : function(n, dd, e, data){
return this.dropAllowed;
},
/**
* Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dragged out of
* the drop node without dropping. This method has no default implementation and should be overridden to provide
* node-specific processing if necessary.
* @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
* {@link #getTargetFromEvent} for this node)
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
* @param {Event} e The event
* @param {Object} data An object containing arbitrary data supplied by the drag source
*/
onNodeOut : function(n, dd, e, data){
},
/**
* Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped onto
* the drop node. The default implementation returns false, so it should be overridden to provide the
* appropriate processing of the drop event and return true so that the drag source's repair action does not run.
* @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
* {@link #getTargetFromEvent} for this node)
share/ext-all-debug-w-comments.js view on Meta::CPAN
else {
// weird...rs is an array but data isn't?? recurse but just send in the whole data object.
// the else clause below will detect !this.isData and throw exception.
this.update(rs.splice(i,1).shift(), data);
}
}
}
else {
// If rs is NOT an array but data IS, see if data contains just 1 record. If so extract it and carry on.
if (Ext.isArray(data) && data.length == 1) {
data = data.shift();
}
if (this.isData(data)) {
rs.data = Ext.apply(rs.data, data);
}
rs.commit();
}
},
/**
* returns extracted, type-cast rows of data. Iterates to call #extractValues for each row
* @param {Object[]/Object} data-root from server response
* @param {Boolean} returnRecords [false] Set true to return instances of Ext.data.Record
* @private
*/
extractData : function(root, returnRecords) {
// A bit ugly this, too bad the Record's raw data couldn't be saved in a common property named "raw" or something.
var rawName = (this instanceof Ext.data.JsonReader) ? 'json' : 'node';
var rs = [];
// Had to add Check for XmlReader, #isData returns true if root is an Xml-object. Want to check in order to re-factor
// #extractData into DataReader base, since the implementations are almost identical for JsonReader, XmlReader
if (this.isData(root) && !(this instanceof Ext.data.XmlReader)) {
root = [root];
}
var f = this.recordType.prototype.fields,
fi = f.items,
fl = f.length,
rs = [];
if (returnRecords === true) {
var Record = this.recordType;
for (var i = 0; i < root.length; i++) {
var n = root[i];
var record = new Record(this.extractValues(n, fi, fl), this.getId(n));
record[rawName] = n; // <-- There's implementation of ugly bit, setting the raw record-data.
rs.push(record);
}
}
else {
for (var i = 0; i < root.length; i++) {
var data = this.extractValues(root[i], fi, fl);
data[this.meta.idProperty] = this.getId(root[i]);
rs.push(data);
}
}
return rs;
},
/**
* Returns true if the supplied data-hash <b>looks</b> and quacks like data. Checks to see if it has a key
* corresponding to idProperty defined in your DataReader config containing non-empty pk.
* @param {Object} data
* @return {Boolean}
*/
isData : function(data) {
return (data && Ext.isObject(data) && !Ext.isEmpty(this.getId(data))) ? true : false;
},
// private function a store will createSequence upon
onMetaChange : function(meta){
delete this.ef;
this.meta = meta;
this.recordType = Ext.data.Record.create(meta.fields);
this.buildExtractors();
}
};
/**
* @class Ext.data.DataReader.Error
* @extends Ext.Error
* General error class for Ext.data.DataReader
*/
Ext.data.DataReader.Error = Ext.extend(Ext.Error, {
constructor : function(message, arg) {
this.arg = arg;
Ext.Error.call(this, message);
},
name: 'Ext.data.DataReader'
});
Ext.apply(Ext.data.DataReader.Error.prototype, {
lang : {
'update': "#update received invalid data from server. Please see docs for DataReader#update and review your DataReader configuration.",
'realize': "#realize was called with invalid remote-data. Please see the docs for DataReader#realize and review your DataReader configuration.",
'invalid-response': "#readResponse received an invalid response from the server."
}
});
/**
* @class Ext.data.DataWriter
* <p>Ext.data.DataWriter facilitates create, update, and destroy actions between
* an Ext.data.Store and a server-side framework. A Writer enabled Store will
* automatically manage the Ajax requests to perform CRUD actions on a Store.</p>
* <p>Ext.data.DataWriter is an abstract base class which is intended to be extended
* and should not be created directly. For existing implementations, see
* {@link Ext.data.JsonWriter}.</p>
* <p>Creating a writer is simple:</p>
* <pre><code>
var writer = new Ext.data.JsonWriter({
encode: false // <--- false causes data to be printed to jsonData config-property of Ext.Ajax#reqeust
});
* </code></pre>
* * <p>Same old JsonReader as Ext-2.x:</p>
* <pre><code>
var reader = new Ext.data.JsonReader({idProperty: 'id'}, [{name: 'first'}, {name: 'last'}, {name: 'email'}]);
* </code></pre>
*
* <p>The proxy for a writer enabled store can be configured with a simple <code>url</code>:</p>
* <pre><code>
// Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({
url: 'app.php/users' // <--- Supports "provides"-type urls, such as '/users.json', '/products.xml' (Hello Rails/Merb)
share/ext-all-debug-w-comments.js view on Meta::CPAN
* <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.list.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.list.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',
/**
share/ext-all-debug-w-comments.js view on Meta::CPAN
selectText : function(start, end){
var v = this.getRawValue();
var doFocus = false;
if(v.length > 0){
start = start === undefined ? 0 : start;
end = end === undefined ? v.length : end;
var d = this.el.dom;
if(d.setSelectionRange){
d.setSelectionRange(start, end);
}else if(d.createTextRange){
var range = d.createTextRange();
range.moveStart('character', start);
range.moveEnd('character', end-v.length);
range.select();
}
doFocus = Ext.isGecko || Ext.isOpera;
}else{
doFocus = true;
}
if(doFocus){
this.focus();
}
},
/**
* Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
* This only takes effect if <tt><b>{@link #grow}</b> = true</tt>, and fires the {@link #autosize} event.
*/
autoSize : function(){
if(!this.grow || !this.rendered){
return;
}
if(!this.metrics){
this.metrics = Ext.util.TextMetrics.createInstance(this.el);
}
var el = this.el;
var v = el.dom.value;
var d = document.createElement('div');
d.appendChild(document.createTextNode(v));
v = d.innerHTML;
Ext.removeNode(d);
d = null;
v += ' ';
var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
this.el.setWidth(w);
this.fireEvent('autosize', this, w);
},
onDestroy: function(){
if(this.validationTask){
this.validationTask.cancel();
this.validationTask = null;
}
Ext.form.TextField.superclass.onDestroy.call(this);
}
});
Ext.reg('textfield', Ext.form.TextField);
/**
* @class Ext.form.TriggerField
* @extends Ext.form.TextField
* Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
* The trigger has no default action, so you must assign a function to implement the trigger click handler by
* overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
* for which you can provide a custom implementation. For example:
* <pre><code>
var trigger = new Ext.form.TriggerField();
trigger.onTriggerClick = myTriggerFn;
trigger.applyToMarkup('my-field');
</code></pre>
*
* However, in general you will most likely want to use TriggerField as the base class for a reusable component.
* {@link Ext.form.DateField} and {@link Ext.form.ComboBox} are perfect examples of this.
*
* @constructor
* Create a new TriggerField.
* @param {Object} config Configuration options (valid {@Ext.form.TextField} config options will also be applied
* to the base TextField)
* @xtype trigger
*/
Ext.form.TriggerField = Ext.extend(Ext.form.TextField, {
/**
* @cfg {String} triggerClass
* An additional CSS class used to style the trigger button. The trigger will always get the
* class <tt>'x-form-trigger'</tt> by default and <tt>triggerClass</tt> will be <b>appended</b> if specified.
*/
/**
* @cfg {Mixed} triggerConfig
* <p>A {@link Ext.DomHelper DomHelper} config object specifying the structure of the
* trigger element for this Field. (Optional).</p>
* <p>Specify this when you need a customized element to act as the trigger button for a TriggerField.</p>
* <p>Note that when using this option, it is the developer's responsibility to ensure correct sizing, positioning
* and appearance of the trigger. Defaults to:</p>
* <pre><code>{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}</code></pre>
*/
/**
* @cfg {String/Object} autoCreate <p>A {@link Ext.DomHelper DomHelper} element spec, or true for a default
* element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component.
* See <tt>{@link Ext.Component#autoEl autoEl}</tt> for details. Defaults to:</p>
* <pre><code>{tag: "input", type: "text", size: "16", autocomplete: "off"}</code></pre>
*/
defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "off"},
/**
* @cfg {Boolean} hideTrigger <tt>true</tt> to hide the trigger element and display only the base
* text field (defaults to <tt>false</tt>)
*/
hideTrigger:false,
/**
* @cfg {Boolean} editable <tt>false</tt> to prevent the user from typing text directly into the field,
* the field will only respond to a click on the trigger to set the value. (defaults to <tt>true</tt>).
*/
editable: true,
/**
* @cfg {Boolean} readOnly <tt>true</tt> to prevent the user from changing the field, and
* hides the trigger. Superceeds the editable and hideTrigger options if the value is true.
* (defaults to <tt>false</tt>)
*/
readOnly: false,
/**
* @cfg {String} wrapFocusClass The class added to the to the wrap of the trigger element. Defaults to
* <tt>x-trigger-wrap-focus</tt>.
*/
( run in 0.386 second using v1.01-cache-2.11-cpan-b50b6a40fd4 )