8214 lines
255 KiB
JavaScript
8214 lines
255 KiB
JavaScript
/*!
|
|
* Ext JS Library 3.0.3
|
|
* Copyright(c) 2006-2009 Ext JS, LLC
|
|
* licensing@extjs.com
|
|
* http://www.extjs.com/license
|
|
*/
|
|
Ext.ns('Ext.ux.grid');
|
|
|
|
/**
|
|
* @class Ext.ux.grid.BufferView
|
|
* @extends Ext.grid.GridView
|
|
* A custom GridView which renders rows on an as-needed basis.
|
|
*/
|
|
Ext.ux.grid.BufferView = Ext.extend(Ext.grid.GridView, {
|
|
/**
|
|
* @cfg {Number} rowHeight
|
|
* The height of a row in the grid.
|
|
*/
|
|
rowHeight: 19,
|
|
|
|
/**
|
|
* @cfg {Number} borderHeight
|
|
* The combined height of border-top and border-bottom of a row.
|
|
*/
|
|
borderHeight: 2,
|
|
|
|
/**
|
|
* @cfg {Boolean/Number} scrollDelay
|
|
* The number of milliseconds before rendering rows out of the visible
|
|
* viewing area. Defaults to 100. Rows will render immediately with a config
|
|
* of false.
|
|
*/
|
|
scrollDelay: 100,
|
|
|
|
/**
|
|
* @cfg {Number} cacheSize
|
|
* The number of rows to look forward and backwards from the currently viewable
|
|
* area. The cache applies only to rows that have been rendered already.
|
|
*/
|
|
cacheSize: 20,
|
|
|
|
/**
|
|
* @cfg {Number} cleanDelay
|
|
* The number of milliseconds to buffer cleaning of extra rows not in the
|
|
* cache.
|
|
*/
|
|
cleanDelay: 500,
|
|
|
|
initTemplates : function(){
|
|
Ext.ux.grid.BufferView.superclass.initTemplates.call(this);
|
|
var ts = this.templates;
|
|
// empty div to act as a place holder for a row
|
|
ts.rowHolder = new Ext.Template(
|
|
'<div class="x-grid3-row {alt}" style="{tstyle}"></div>'
|
|
);
|
|
ts.rowHolder.disableFormats = true;
|
|
ts.rowHolder.compile();
|
|
|
|
ts.rowBody = new Ext.Template(
|
|
'<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
|
|
'<tbody><tr>{cells}</tr>',
|
|
(this.enableRowBody ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>' : ''),
|
|
'</tbody></table>'
|
|
);
|
|
ts.rowBody.disableFormats = true;
|
|
ts.rowBody.compile();
|
|
},
|
|
|
|
getStyleRowHeight : function(){
|
|
return Ext.isBorderBox ? (this.rowHeight + this.borderHeight) : this.rowHeight;
|
|
},
|
|
|
|
getCalculatedRowHeight : function(){
|
|
return this.rowHeight + this.borderHeight;
|
|
},
|
|
|
|
getVisibleRowCount : function(){
|
|
var rh = this.getCalculatedRowHeight();
|
|
var visibleHeight = this.scroller.dom.clientHeight;
|
|
return (visibleHeight < 1) ? 0 : Math.ceil(visibleHeight / rh);
|
|
},
|
|
|
|
getVisibleRows: function(){
|
|
var count = this.getVisibleRowCount();
|
|
var sc = this.scroller.dom.scrollTop;
|
|
var start = (sc == 0 ? 0 : Math.floor(sc/this.getCalculatedRowHeight())-1);
|
|
return {
|
|
first: Math.max(start, 0),
|
|
last: Math.min(start + count + 2, this.ds.getCount()-1)
|
|
};
|
|
},
|
|
|
|
doRender : function(cs, rs, ds, startRow, colCount, stripe, onlyBody){
|
|
var ts = this.templates, ct = ts.cell, rt = ts.row, rb = ts.rowBody, last = colCount-1;
|
|
var rh = this.getStyleRowHeight();
|
|
var vr = this.getVisibleRows();
|
|
var tstyle = 'width:'+this.getTotalWidth()+';height:'+rh+'px;';
|
|
// buffers
|
|
var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;
|
|
for (var j = 0, len = rs.length; j < len; j++) {
|
|
r = rs[j]; cb = [];
|
|
var rowIndex = (j+startRow);
|
|
var visible = rowIndex >= vr.first && rowIndex <= vr.last;
|
|
if (visible) {
|
|
for (var i = 0; i < colCount; i++) {
|
|
c = cs[i];
|
|
p.id = c.id;
|
|
p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
|
|
p.attr = p.cellAttr = "";
|
|
p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
|
|
p.style = c.style;
|
|
if (p.value == undefined || p.value === "") {
|
|
p.value = " ";
|
|
}
|
|
if (r.dirty && typeof r.modified[c.name] !== 'undefined') {
|
|
p.css += ' x-grid3-dirty-cell';
|
|
}
|
|
cb[cb.length] = ct.apply(p);
|
|
}
|
|
}
|
|
var alt = [];
|
|
if(stripe && ((rowIndex+1) % 2 == 0)){
|
|
alt[0] = "x-grid3-row-alt";
|
|
}
|
|
if(r.dirty){
|
|
alt[1] = " x-grid3-dirty-row";
|
|
}
|
|
rp.cols = colCount;
|
|
if(this.getRowClass){
|
|
alt[2] = this.getRowClass(r, rowIndex, rp, ds);
|
|
}
|
|
rp.alt = alt.join(" ");
|
|
rp.cells = cb.join("");
|
|
buf[buf.length] = !visible ? ts.rowHolder.apply(rp) : (onlyBody ? rb.apply(rp) : rt.apply(rp));
|
|
}
|
|
return buf.join("");
|
|
},
|
|
|
|
isRowRendered: function(index){
|
|
var row = this.getRow(index);
|
|
return row && row.childNodes.length > 0;
|
|
},
|
|
|
|
syncScroll: function(){
|
|
Ext.ux.grid.BufferView.superclass.syncScroll.apply(this, arguments);
|
|
this.update();
|
|
},
|
|
|
|
// a (optionally) buffered method to update contents of gridview
|
|
update: function(){
|
|
if (this.scrollDelay) {
|
|
if (!this.renderTask) {
|
|
this.renderTask = new Ext.util.DelayedTask(this.doUpdate, this);
|
|
}
|
|
this.renderTask.delay(this.scrollDelay);
|
|
}else{
|
|
this.doUpdate();
|
|
}
|
|
},
|
|
|
|
onRemove : function(ds, record, index, isUpdate){
|
|
Ext.ux.grid.BufferView.superclass.onRemove.apply(this, arguments);
|
|
if(isUpdate !== true){
|
|
this.update();
|
|
}
|
|
},
|
|
|
|
doUpdate: function(){
|
|
if (this.getVisibleRowCount() > 0) {
|
|
var g = this.grid, cm = g.colModel, ds = g.store;
|
|
var cs = this.getColumnData();
|
|
|
|
var vr = this.getVisibleRows();
|
|
for (var i = vr.first; i <= vr.last; i++) {
|
|
// if row is NOT rendered and is visible, render it
|
|
if(!this.isRowRendered(i)){
|
|
var html = this.doRender(cs, [ds.getAt(i)], ds, i, cm.getColumnCount(), g.stripeRows, true);
|
|
this.getRow(i).innerHTML = html;
|
|
}
|
|
}
|
|
this.clean();
|
|
}
|
|
},
|
|
|
|
// a buffered method to clean rows
|
|
clean : function(){
|
|
if(!this.cleanTask){
|
|
this.cleanTask = new Ext.util.DelayedTask(this.doClean, this);
|
|
}
|
|
this.cleanTask.delay(this.cleanDelay);
|
|
},
|
|
|
|
doClean: function(){
|
|
if (this.getVisibleRowCount() > 0) {
|
|
var vr = this.getVisibleRows();
|
|
vr.first -= this.cacheSize;
|
|
vr.last += this.cacheSize;
|
|
|
|
var i = 0, rows = this.getRows();
|
|
// if first is less than 0, all rows have been rendered
|
|
// so lets clean the end...
|
|
if(vr.first <= 0){
|
|
i = vr.last + 1;
|
|
}
|
|
for(var len = this.ds.getCount(); i < len; i++){
|
|
// if current row is outside of first and last and
|
|
// has content, update the innerHTML to nothing
|
|
if ((i < vr.first || i > vr.last) && rows[i].innerHTML) {
|
|
rows[i].innerHTML = '';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
layout: function(){
|
|
Ext.ux.grid.BufferView.superclass.layout.call(this);
|
|
this.update();
|
|
}
|
|
});
|
|
// We are adding these custom layouts to a namespace that does not
|
|
// exist by default in Ext, so we have to add the namespace first:
|
|
Ext.ns('Ext.ux.layout');
|
|
|
|
/**
|
|
* @class Ext.ux.layout.CenterLayout
|
|
* @extends Ext.layout.FitLayout
|
|
* <p>This is a very simple layout style used to center contents within a container. This layout works within
|
|
* nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
|
|
* <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
|
|
* the layout. The layout does not require any config options, although the child panel contained within the
|
|
* layout must provide a fixed or percentage width. The child panel's height will fit to the container by
|
|
* default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.
|
|
* Example usage:</p>
|
|
* <pre><code>
|
|
// The content panel is centered in the container
|
|
var p = new Ext.Panel({
|
|
title: 'Center Layout',
|
|
layout: 'ux.center',
|
|
items: [{
|
|
title: 'Centered Content',
|
|
width: '75%',
|
|
html: 'Some content'
|
|
}]
|
|
});
|
|
|
|
// If you leave the title blank and specify no border
|
|
// you'll create a non-visual, structural panel just
|
|
// for centering the contents in the main container.
|
|
var p = new Ext.Panel({
|
|
layout: 'ux.center',
|
|
border: false,
|
|
items: [{
|
|
title: 'Centered Content',
|
|
width: 300,
|
|
autoHeight: true,
|
|
html: 'Some content'
|
|
}]
|
|
});
|
|
</code></pre>
|
|
*/
|
|
Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
|
|
// private
|
|
setItemSize : function(item, size){
|
|
this.container.addClass('ux-layout-center');
|
|
item.addClass('ux-layout-center-item');
|
|
if(item && size.height > 0){
|
|
if(item.width){
|
|
size.width = item.width;
|
|
}
|
|
item.setSize(size);
|
|
}
|
|
}
|
|
});
|
|
|
|
Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;
|
|
Ext.ns('Ext.ux.grid');
|
|
|
|
/**
|
|
* @class Ext.ux.grid.CheckColumn
|
|
* @extends Object
|
|
* GridPanel plugin to add a column with check boxes to a grid.
|
|
* <p>Example usage:</p>
|
|
* <pre><code>
|
|
// create the column
|
|
var checkColumn = new Ext.grid.CheckColumn({
|
|
header: 'Indoor?',
|
|
dataIndex: 'indoor',
|
|
id: 'check',
|
|
width: 55
|
|
});
|
|
|
|
// add the column to the column model
|
|
var cm = new Ext.grid.ColumnModel([{
|
|
header: 'Foo',
|
|
...
|
|
},
|
|
checkColumn
|
|
]);
|
|
|
|
// create the grid
|
|
var grid = new Ext.grid.EditorGridPanel({
|
|
...
|
|
cm: cm,
|
|
plugins: [checkColumn], // include plugin
|
|
...
|
|
});
|
|
* </code></pre>
|
|
* In addition to storing a Boolean value within the record data, this
|
|
* class toggles a css class between <tt>'x-grid3-check-col'</tt> and
|
|
* <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
|
|
* a column.
|
|
*/
|
|
Ext.ux.grid.CheckColumn = function(config){
|
|
Ext.apply(this, config);
|
|
if(!this.id){
|
|
this.id = Ext.id();
|
|
}
|
|
this.renderer = this.renderer.createDelegate(this);
|
|
};
|
|
|
|
Ext.ux.grid.CheckColumn.prototype ={
|
|
init : function(grid){
|
|
this.grid = grid;
|
|
this.grid.on('render', function(){
|
|
var view = this.grid.getView();
|
|
view.mainBody.on('mousedown', this.onMouseDown, this);
|
|
}, this);
|
|
},
|
|
|
|
onMouseDown : function(e, t){
|
|
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
|
|
e.stopEvent();
|
|
var index = this.grid.getView().findRowIndex(t);
|
|
var record = this.grid.store.getAt(index);
|
|
record.set(this.dataIndex, !record.data[this.dataIndex]);
|
|
}
|
|
},
|
|
|
|
renderer : function(v, p, record){
|
|
p.css += ' x-grid3-check-col-td';
|
|
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
|
|
}
|
|
};
|
|
|
|
// register ptype
|
|
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);
|
|
|
|
// backwards compat
|
|
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;Ext.ns('Ext.ux.tree');
|
|
|
|
/**
|
|
* @class Ext.ux.tree.ColumnTree
|
|
* @extends Ext.tree.TreePanel
|
|
*
|
|
* @xtype columntree
|
|
*/
|
|
Ext.ux.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
|
|
lines : false,
|
|
borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
|
|
cls : 'x-column-tree',
|
|
|
|
onRender : function(){
|
|
Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
|
|
this.headers = this.header.createChild({cls:'x-tree-headers'});
|
|
|
|
var cols = this.columns, c;
|
|
var totalWidth = 0;
|
|
var scrollOffset = 19; // similar to Ext.grid.GridView default
|
|
|
|
for(var i = 0, len = cols.length; i < len; i++){
|
|
c = cols[i];
|
|
totalWidth += c.width;
|
|
this.headers.createChild({
|
|
cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
|
|
cn: {
|
|
cls:'x-tree-hd-text',
|
|
html: c.header
|
|
},
|
|
style:'width:'+(c.width-this.borderWidth)+'px;'
|
|
});
|
|
}
|
|
this.headers.createChild({cls:'x-clear'});
|
|
// prevent floats from wrapping when clipped
|
|
this.headers.setWidth(totalWidth+scrollOffset);
|
|
this.innerCt.setWidth(totalWidth);
|
|
}
|
|
});
|
|
|
|
Ext.reg('columntree', Ext.ux.tree.ColumnTree);
|
|
|
|
//backwards compat
|
|
Ext.tree.ColumnTree = Ext.ux.tree.ColumnTree;
|
|
|
|
|
|
/**
|
|
* @class Ext.ux.tree.ColumnNodeUI
|
|
* @extends Ext.tree.TreeNodeUI
|
|
*/
|
|
Ext.ux.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
|
|
focus: Ext.emptyFn, // prevent odd scrolling behavior
|
|
|
|
renderElements : function(n, a, targetNode, bulkRender){
|
|
this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
|
|
|
|
var t = n.getOwnerTree();
|
|
var cols = t.columns;
|
|
var bw = t.borderWidth;
|
|
var c = cols[0];
|
|
|
|
var buf = [
|
|
'<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
|
|
'<div class="x-tree-col" style="width:',c.width-bw,'px;">',
|
|
'<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
|
|
'<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',
|
|
'<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',
|
|
'<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
|
|
a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
|
|
'<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
|
|
"</div>"];
|
|
for(var i = 1, len = cols.length; i < len; i++){
|
|
c = cols[i];
|
|
|
|
buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
|
|
'<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
|
|
"</div>");
|
|
}
|
|
buf.push(
|
|
'<div class="x-clear"></div></div>',
|
|
'<ul class="x-tree-node-ct" style="display:none;"></ul>',
|
|
"</li>");
|
|
|
|
if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
|
|
this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
|
|
n.nextSibling.ui.getEl(), buf.join(""));
|
|
}else{
|
|
this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
|
|
}
|
|
|
|
this.elNode = this.wrap.childNodes[0];
|
|
this.ctNode = this.wrap.childNodes[1];
|
|
var cs = this.elNode.firstChild.childNodes;
|
|
this.indentNode = cs[0];
|
|
this.ecNode = cs[1];
|
|
this.iconNode = cs[2];
|
|
this.anchor = cs[3];
|
|
this.textNode = cs[3].firstChild;
|
|
}
|
|
});
|
|
|
|
//backwards compat
|
|
Ext.tree.ColumnNodeUI = Ext.ux.tree.ColumnNodeUI;
|
|
/**
|
|
* @class Ext.DataView.LabelEditor
|
|
* @extends Ext.Editor
|
|
*
|
|
*/
|
|
Ext.DataView.LabelEditor = Ext.extend(Ext.Editor, {
|
|
alignment: "tl-tl",
|
|
hideEl : false,
|
|
cls: "x-small-editor",
|
|
shim: false,
|
|
completeOnEnter: true,
|
|
cancelOnEsc: true,
|
|
labelSelector: 'span.x-editable',
|
|
|
|
constructor: function(cfg, field){
|
|
Ext.DataView.LabelEditor.superclass.constructor.call(this,
|
|
field || new Ext.form.TextField({
|
|
allowBlank: false,
|
|
growMin:90,
|
|
growMax:240,
|
|
grow:true,
|
|
selectOnFocus:true
|
|
}), cfg
|
|
);
|
|
},
|
|
|
|
init : function(view){
|
|
this.view = view;
|
|
view.on('render', this.initEditor, this);
|
|
this.on('complete', this.onSave, this);
|
|
},
|
|
|
|
initEditor : function(){
|
|
this.view.on({
|
|
scope: this,
|
|
containerclick: this.doBlur,
|
|
click: this.doBlur
|
|
});
|
|
this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});
|
|
},
|
|
|
|
doBlur: function(){
|
|
if(this.editing){
|
|
this.field.blur();
|
|
}
|
|
},
|
|
|
|
onMouseDown : function(e, target){
|
|
if(!e.ctrlKey && !e.shiftKey){
|
|
var item = this.view.findItemFromChild(target);
|
|
e.stopEvent();
|
|
var record = this.view.store.getAt(this.view.indexOf(item));
|
|
this.startEdit(target, record.data[this.dataIndex]);
|
|
this.activeRecord = record;
|
|
}else{
|
|
e.preventDefault();
|
|
}
|
|
},
|
|
|
|
onSave : function(ed, value){
|
|
this.activeRecord.set(this.dataIndex, value);
|
|
}
|
|
});
|
|
|
|
|
|
Ext.DataView.DragSelector = function(cfg){
|
|
cfg = cfg || {};
|
|
var view, proxy, tracker;
|
|
var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
|
|
var dragSafe = cfg.dragSafe === true;
|
|
|
|
this.init = function(dataView){
|
|
view = dataView;
|
|
view.on('render', onRender);
|
|
};
|
|
|
|
function fillRegions(){
|
|
rs = [];
|
|
view.all.each(function(el){
|
|
rs[rs.length] = el.getRegion();
|
|
});
|
|
bodyRegion = view.el.getRegion();
|
|
}
|
|
|
|
function cancelClick(){
|
|
return false;
|
|
}
|
|
|
|
function onBeforeStart(e){
|
|
return !dragSafe || e.target == view.el.dom;
|
|
}
|
|
|
|
function onStart(e){
|
|
view.on('containerclick', cancelClick, view, {single:true});
|
|
if(!proxy){
|
|
proxy = view.el.createChild({cls:'x-view-selector'});
|
|
}else{
|
|
if(proxy.dom.parentNode !== view.el.dom){
|
|
view.el.dom.appendChild(proxy.dom);
|
|
}
|
|
proxy.setDisplayed('block');
|
|
}
|
|
fillRegions();
|
|
view.clearSelections();
|
|
}
|
|
|
|
function onDrag(e){
|
|
var startXY = tracker.startXY;
|
|
var xy = tracker.getXY();
|
|
|
|
var x = Math.min(startXY[0], xy[0]);
|
|
var y = Math.min(startXY[1], xy[1]);
|
|
var w = Math.abs(startXY[0] - xy[0]);
|
|
var h = Math.abs(startXY[1] - xy[1]);
|
|
|
|
dragRegion.left = x;
|
|
dragRegion.top = y;
|
|
dragRegion.right = x+w;
|
|
dragRegion.bottom = y+h;
|
|
|
|
dragRegion.constrainTo(bodyRegion);
|
|
proxy.setRegion(dragRegion);
|
|
|
|
for(var i = 0, len = rs.length; i < len; i++){
|
|
var r = rs[i], sel = dragRegion.intersect(r);
|
|
if(sel && !r.selected){
|
|
r.selected = true;
|
|
view.select(i, true);
|
|
}else if(!sel && r.selected){
|
|
r.selected = false;
|
|
view.deselect(i);
|
|
}
|
|
}
|
|
}
|
|
|
|
function onEnd(e){
|
|
if (!Ext.isIE) {
|
|
view.un('containerclick', cancelClick, view);
|
|
}
|
|
if(proxy){
|
|
proxy.setDisplayed(false);
|
|
}
|
|
}
|
|
|
|
function onRender(view){
|
|
tracker = new Ext.dd.DragTracker({
|
|
onBeforeStart: onBeforeStart,
|
|
onStart: onStart,
|
|
onDrag: onDrag,
|
|
onEnd: onEnd
|
|
});
|
|
tracker.initEl(view.el);
|
|
}
|
|
};Ext.ns('Ext.ux.form');
|
|
|
|
/**
|
|
* @class Ext.ux.form.FileUploadField
|
|
* @extends Ext.form.TextField
|
|
* Creates a file upload field.
|
|
* @xtype fileuploadfield
|
|
*/
|
|
Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, {
|
|
/**
|
|
* @cfg {String} buttonText The button text to display on the upload button (defaults to
|
|
* 'Browse...'). Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
|
|
* value will be used instead if available.
|
|
*/
|
|
buttonText: 'Browse...',
|
|
/**
|
|
* @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
|
|
* text field (defaults to false). If true, all inherited TextField members will still be available.
|
|
*/
|
|
buttonOnly: false,
|
|
/**
|
|
* @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
|
|
* (defaults to 3). Note that this only applies if {@link #buttonOnly} = false.
|
|
*/
|
|
buttonOffset: 3,
|
|
/**
|
|
* @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
|
|
*/
|
|
|
|
// private
|
|
readOnly: true,
|
|
|
|
/**
|
|
* @hide
|
|
* @method autoSize
|
|
*/
|
|
autoSize: Ext.emptyFn,
|
|
|
|
// private
|
|
initComponent: function(){
|
|
Ext.ux.form.FileUploadField.superclass.initComponent.call(this);
|
|
|
|
this.addEvents(
|
|
/**
|
|
* @event fileselected
|
|
* Fires when the underlying file input field's value has changed from the user
|
|
* selecting a new file from the system file selection dialog.
|
|
* @param {Ext.ux.form.FileUploadField} this
|
|
* @param {String} value The file value returned by the underlying file input field
|
|
*/
|
|
'fileselected'
|
|
);
|
|
},
|
|
|
|
// private
|
|
onRender : function(ct, position){
|
|
Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);
|
|
|
|
this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
|
|
this.el.addClass('x-form-file-text');
|
|
this.el.dom.removeAttribute('name');
|
|
this.createFileInput();
|
|
|
|
var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
|
|
text: this.buttonText
|
|
});
|
|
this.button = new Ext.Button(Ext.apply(btnCfg, {
|
|
renderTo: this.wrap,
|
|
cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
|
|
}));
|
|
|
|
if(this.buttonOnly){
|
|
this.el.hide();
|
|
this.wrap.setWidth(this.button.getEl().getWidth());
|
|
}
|
|
|
|
this.bindListeners();
|
|
this.resizeEl = this.positionEl = this.wrap;
|
|
},
|
|
|
|
bindListeners: function(){
|
|
this.fileInput.on({
|
|
scope: this,
|
|
mouseenter: function() {
|
|
this.button.addClass(['x-btn-over','x-btn-focus'])
|
|
},
|
|
mouseleave: function(){
|
|
this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
|
|
},
|
|
mousedown: function(){
|
|
this.button.addClass('x-btn-click')
|
|
},
|
|
mouseup: function(){
|
|
this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
|
|
},
|
|
change: function(){
|
|
var v = this.fileInput.dom.value;
|
|
this.setValue(v);
|
|
this.fireEvent('fileselected', this, v);
|
|
}
|
|
});
|
|
},
|
|
|
|
createFileInput : function() {
|
|
this.fileInput = this.wrap.createChild({
|
|
id: this.getFileInputId(),
|
|
name: this.name||this.getId(),
|
|
cls: 'x-form-file',
|
|
tag: 'input',
|
|
type: 'file',
|
|
size: 1
|
|
});
|
|
},
|
|
|
|
reset : function(){
|
|
this.fileInput.remove();
|
|
this.createFileInput();
|
|
this.bindListeners();
|
|
Ext.ux.form.FileUploadField.superclass.reset.call(this);
|
|
},
|
|
|
|
// private
|
|
getFileInputId: function(){
|
|
return this.id + '-file';
|
|
},
|
|
|
|
// private
|
|
onResize : function(w, h){
|
|
Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);
|
|
|
|
this.wrap.setWidth(w);
|
|
|
|
if(!this.buttonOnly){
|
|
var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
|
|
this.el.setWidth(w);
|
|
}
|
|
},
|
|
|
|
// private
|
|
onDestroy: function(){
|
|
Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
|
|
Ext.destroy(this.fileInput, this.button, this.wrap);
|
|
},
|
|
|
|
onDisable: function(){
|
|
Ext.ux.form.FileUploadField.superclass.onDisable.call(this);
|
|
this.doDisable(true);
|
|
},
|
|
|
|
onEnable: function(){
|
|
Ext.ux.form.FileUploadField.superclass.onEnable.call(this);
|
|
this.doDisable(false);
|
|
|
|
},
|
|
|
|
// private
|
|
doDisable: function(disabled){
|
|
this.fileInput.dom.disabled = disabled;
|
|
this.button.setDisabled(disabled);
|
|
},
|
|
|
|
|
|
// private
|
|
preFocus : Ext.emptyFn,
|
|
|
|
// private
|
|
alignErrorIcon : function(){
|
|
this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
|
|
}
|
|
|
|
});
|
|
|
|
Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);
|
|
|
|
// backwards compat
|
|
Ext.form.FileUploadField = Ext.ux.form.FileUploadField;
|
|
/**
|
|
* @class Ext.ux.GMapPanel
|
|
* @extends Ext.Panel
|
|
* @author Shea Frederick
|
|
*/
|
|
Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
|
|
initComponent : function(){
|
|
|
|
var defConfig = {
|
|
plain: true,
|
|
zoomLevel: 3,
|
|
yaw: 180,
|
|
pitch: 0,
|
|
zoom: 0,
|
|
gmapType: 'map',
|
|
border: false
|
|
};
|
|
|
|
Ext.applyIf(this,defConfig);
|
|
|
|
Ext.ux.GMapPanel.superclass.initComponent.call(this);
|
|
|
|
},
|
|
afterRender : function(){
|
|
|
|
var wh = this.ownerCt.getSize();
|
|
Ext.applyIf(this, wh);
|
|
|
|
Ext.ux.GMapPanel.superclass.afterRender.call(this);
|
|
|
|
if (this.gmapType === 'map'){
|
|
this.gmap = new GMap2(this.body.dom);
|
|
}
|
|
|
|
if (this.gmapType === 'panorama'){
|
|
this.gmap = new GStreetviewPanorama(this.body.dom);
|
|
}
|
|
|
|
if (typeof this.addControl == 'object' && this.gmapType === 'map') {
|
|
this.gmap.addControl(this.addControl);
|
|
}
|
|
|
|
if (typeof this.setCenter === 'object') {
|
|
if (typeof this.setCenter.geoCodeAddr === 'string'){
|
|
this.geoCodeLookup(this.setCenter.geoCodeAddr);
|
|
}else{
|
|
if (this.gmapType === 'map'){
|
|
var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);
|
|
this.gmap.setCenter(point, this.zoomLevel);
|
|
}
|
|
if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
|
|
this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
|
|
}
|
|
}
|
|
if (this.gmapType === 'panorama'){
|
|
this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
|
|
}
|
|
}
|
|
|
|
GEvent.bind(this.gmap, 'load', this, function(){
|
|
this.onMapReady();
|
|
});
|
|
|
|
},
|
|
onMapReady : function(){
|
|
this.addMarkers(this.markers);
|
|
this.addMapControls();
|
|
this.addOptions();
|
|
},
|
|
onResize : function(w, h){
|
|
|
|
if (typeof this.getMap() == 'object') {
|
|
this.gmap.checkResize();
|
|
}
|
|
|
|
Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
|
|
|
|
},
|
|
setSize : function(width, height, animate){
|
|
|
|
if (typeof this.getMap() == 'object') {
|
|
this.gmap.checkResize();
|
|
}
|
|
|
|
Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
|
|
|
|
},
|
|
getMap : function(){
|
|
|
|
return this.gmap;
|
|
|
|
},
|
|
getCenter : function(){
|
|
|
|
return this.getMap().getCenter();
|
|
|
|
},
|
|
getCenterLatLng : function(){
|
|
|
|
var ll = this.getCenter();
|
|
return {lat: ll.lat(), lng: ll.lng()};
|
|
|
|
},
|
|
addMarkers : function(markers) {
|
|
|
|
if (Ext.isArray(markers)){
|
|
for (var i = 0; i < markers.length; i++) {
|
|
var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
|
|
this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);
|
|
}
|
|
}
|
|
|
|
},
|
|
addMarker : function(point, marker, clear, center, listeners){
|
|
|
|
Ext.applyIf(marker,G_DEFAULT_ICON);
|
|
|
|
if (clear === true){
|
|
this.getMap().clearOverlays();
|
|
}
|
|
if (center === true) {
|
|
this.getMap().setCenter(point, this.zoomLevel);
|
|
}
|
|
|
|
var mark = new GMarker(point,marker);
|
|
if (typeof listeners === 'object'){
|
|
for (evt in listeners) {
|
|
GEvent.bind(mark, evt, this, listeners[evt]);
|
|
}
|
|
}
|
|
this.getMap().addOverlay(mark);
|
|
|
|
},
|
|
addMapControls : function(){
|
|
|
|
if (this.gmapType === 'map') {
|
|
if (Ext.isArray(this.mapControls)) {
|
|
for(i=0;i<this.mapControls.length;i++){
|
|
this.addMapControl(this.mapControls[i]);
|
|
}
|
|
}else if(typeof this.mapControls === 'string'){
|
|
this.addMapControl(this.mapControls);
|
|
}else if(typeof this.mapControls === 'object'){
|
|
this.getMap().addControl(this.mapControls);
|
|
}
|
|
}
|
|
|
|
},
|
|
addMapControl : function(mc){
|
|
|
|
var mcf = window[mc];
|
|
if (typeof mcf === 'function') {
|
|
this.getMap().addControl(new mcf());
|
|
}
|
|
|
|
},
|
|
addOptions : function(){
|
|
|
|
if (Ext.isArray(this.mapConfOpts)) {
|
|
var mc;
|
|
for(i=0;i<this.mapConfOpts.length;i++){
|
|
this.addOption(this.mapConfOpts[i]);
|
|
}
|
|
}else if(typeof this.mapConfOpts === 'string'){
|
|
this.addOption(this.mapConfOpts);
|
|
}
|
|
|
|
},
|
|
addOption : function(mc){
|
|
|
|
var mcf = this.getMap()[mc];
|
|
if (typeof mcf === 'function') {
|
|
this.getMap()[mc]();
|
|
}
|
|
|
|
},
|
|
geoCodeLookup : function(addr) {
|
|
|
|
this.geocoder = new GClientGeocoder();
|
|
this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));
|
|
|
|
},
|
|
addAddressToMap : function(response) {
|
|
|
|
if (!response || response.Status.code != 200) {
|
|
Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');
|
|
}else{
|
|
place = response.Placemark[0];
|
|
addressinfo = place.AddressDetails;
|
|
accuracy = addressinfo.Accuracy;
|
|
if (accuracy === 0) {
|
|
Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');
|
|
}else{
|
|
if (accuracy < 7) {
|
|
Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');
|
|
}else{
|
|
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
|
|
if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
|
|
this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
Ext.reg('gmappanel', Ext.ux.GMapPanel); Ext.namespace('Ext.ux.grid');
|
|
|
|
/**
|
|
* @class Ext.ux.grid.GridFilters
|
|
* @extends Ext.util.Observable
|
|
* <p>GridFilter is a plugin (<code>ptype='gridfilters'</code>) for grids that
|
|
* allow for a slightly more robust representation of filtering than what is
|
|
* provided by the default store.</p>
|
|
* <p>Filtering is adjusted by the user using the grid's column header menu
|
|
* (this menu can be disabled through configuration). Through this menu users
|
|
* can configure, enable, and disable filters for each column.</p>
|
|
* <p><b><u>Features:</u></b></p>
|
|
* <div class="mdetail-params"><ul>
|
|
* <li><b>Filtering implementations</b> :
|
|
* <div class="sub-desc">
|
|
* Default filtering for Strings, Numeric Ranges, Date Ranges, Lists (which can
|
|
* be backed by a Ext.data.Store), and Boolean. Additional custom filter types
|
|
* and menus are easily created by extending Ext.ux.grid.filter.Filter.
|
|
* </div></li>
|
|
* <li><b>Graphical indicators</b> :
|
|
* <div class="sub-desc">
|
|
* Columns that are filtered have {@link #filterCls a configurable css class}
|
|
* applied to the column headers.
|
|
* </div></li>
|
|
* <li><b>Paging</b> :
|
|
* <div class="sub-desc">
|
|
* If specified as a plugin to the grid's configured PagingToolbar, the current page
|
|
* will be reset to page 1 whenever you update the filters.
|
|
* </div></li>
|
|
* <li><b>Automatic Reconfiguration</b> :
|
|
* <div class="sub-desc">
|
|
* Filters automatically reconfigure when the grid 'reconfigure' event fires.
|
|
* </div></li>
|
|
* <li><b>Stateful</b> :
|
|
* Filter information will be persisted across page loads by specifying a
|
|
* <code>stateId</code> in the Grid configuration.
|
|
* <div class="sub-desc">
|
|
* The filter collection binds to the
|
|
* <code>{@link Ext.grid.GridPanel#beforestaterestore beforestaterestore}</code>
|
|
* and <code>{@link Ext.grid.GridPanel#beforestatesave beforestatesave}</code>
|
|
* events in order to be stateful.
|
|
* </div></li>
|
|
* <li><b>Grid Changes</b> :
|
|
* <div class="sub-desc"><ul>
|
|
* <li>A <code>filters</code> <i>property</i> is added to the grid pointing to
|
|
* this plugin.</li>
|
|
* <li>A <code>filterupdate</code> <i>event</i> is added to the grid and is
|
|
* fired upon onStateChange completion.</li>
|
|
* </ul></div></li>
|
|
* <li><b>Server side code examples</b> :
|
|
* <div class="sub-desc"><ul>
|
|
* <li><a href="http://www.vinylfox.com/extjs/grid-filter-php-backend-code.php">PHP</a> - (Thanks VinylFox)</li>
|
|
* <li><a href="http://extjs.com/forum/showthread.php?p=77326#post77326">Ruby on Rails</a> - (Thanks Zyclops)</li>
|
|
* <li><a href="http://extjs.com/forum/showthread.php?p=176596#post176596">Ruby on Rails</a> - (Thanks Rotomaul)</li>
|
|
* <li><a href="http://www.debatablybeta.com/posts/using-extjss-grid-filtering-with-django/">Python</a> - (Thanks Matt)</li>
|
|
* <li><a href="http://mcantrell.wordpress.com/2008/08/22/extjs-grids-and-grails/">Grails</a> - (Thanks Mike)</li>
|
|
* </ul></div></li>
|
|
* </ul></div>
|
|
* <p><b><u>Example usage:</u></b></p>
|
|
* <pre><code>
|
|
var store = new Ext.data.GroupingStore({
|
|
...
|
|
});
|
|
|
|
var filters = new Ext.ux.grid.GridFilters({
|
|
autoReload: false, //don't reload automatically
|
|
local: true, //only filter locally
|
|
// filters may be configured through the plugin,
|
|
// or in the column definition within the column model configuration
|
|
filters: [{
|
|
type: 'numeric',
|
|
dataIndex: 'id'
|
|
}, {
|
|
type: 'string',
|
|
dataIndex: 'name'
|
|
}, {
|
|
type: 'numeric',
|
|
dataIndex: 'price'
|
|
}, {
|
|
type: 'date',
|
|
dataIndex: 'dateAdded'
|
|
}, {
|
|
type: 'list',
|
|
dataIndex: 'size',
|
|
options: ['extra small', 'small', 'medium', 'large', 'extra large'],
|
|
phpMode: true
|
|
}, {
|
|
type: 'boolean',
|
|
dataIndex: 'visible'
|
|
}]
|
|
});
|
|
var cm = new Ext.grid.ColumnModel([{
|
|
...
|
|
}]);
|
|
|
|
var grid = new Ext.grid.GridPanel({
|
|
ds: store,
|
|
cm: cm,
|
|
view: new Ext.grid.GroupingView(),
|
|
plugins: [filters],
|
|
height: 400,
|
|
width: 700,
|
|
bbar: new Ext.PagingToolbar({
|
|
store: store,
|
|
pageSize: 15,
|
|
plugins: [filters] //reset page to page 1 if filters change
|
|
})
|
|
});
|
|
|
|
store.load({params: {start: 0, limit: 15}});
|
|
|
|
// a filters property is added to the grid
|
|
grid.filters
|
|
* </code></pre>
|
|
*/
|
|
Ext.ux.grid.GridFilters = Ext.extend(Ext.util.Observable, {
|
|
/**
|
|
* @cfg {Boolean} autoReload
|
|
* Defaults to true, reloading the datasource when a filter change happens.
|
|
* Set this to false to prevent the datastore from being reloaded if there
|
|
* are changes to the filters. See <code>{@link updateBuffer}</code>.
|
|
*/
|
|
autoReload : true,
|
|
/**
|
|
* @cfg {Boolean} encode
|
|
* Specify true for {@link #buildQuery} to use Ext.util.JSON.encode to
|
|
* encode the filter query parameter sent with a remote request.
|
|
* Defaults to false.
|
|
*/
|
|
/**
|
|
* @cfg {Array} filters
|
|
* An Array of filters config objects. Refer to each filter type class for
|
|
* configuration details specific to each filter type. Filters for Strings,
|
|
* Numeric Ranges, Date Ranges, Lists, and Boolean are the standard filters
|
|
* available.
|
|
*/
|
|
/**
|
|
* @cfg {String} filterCls
|
|
* The css class to be applied to column headers with active filters.
|
|
* Defaults to <tt>'ux-filterd-column'</tt>.
|
|
*/
|
|
filterCls : 'ux-filtered-column',
|
|
/**
|
|
* @cfg {Boolean} local
|
|
* <tt>true</tt> to use Ext.data.Store filter functions (local filtering)
|
|
* instead of the default (<tt>false</tt>) server side filtering.
|
|
*/
|
|
local : false,
|
|
/**
|
|
* @cfg {String} menuFilterText
|
|
* defaults to <tt>'Filters'</tt>.
|
|
*/
|
|
menuFilterText : 'Filters',
|
|
/**
|
|
* @cfg {String} paramPrefix
|
|
* The url parameter prefix for the filters.
|
|
* Defaults to <tt>'filter'</tt>.
|
|
*/
|
|
paramPrefix : 'filter',
|
|
/**
|
|
* @cfg {Boolean} showMenu
|
|
* Defaults to true, including a filter submenu in the default header menu.
|
|
*/
|
|
showMenu : true,
|
|
/**
|
|
* @cfg {String} stateId
|
|
* Name of the value to be used to store state information.
|
|
*/
|
|
stateId : undefined,
|
|
/**
|
|
* @cfg {Integer} updateBuffer
|
|
* Number of milliseconds to defer store updates since the last filter change.
|
|
*/
|
|
updateBuffer : 500,
|
|
|
|
/** @private */
|
|
constructor : function (config) {
|
|
this.deferredUpdate = new Ext.util.DelayedTask(this.reload, this);
|
|
this.filters = new Ext.util.MixedCollection();
|
|
this.filters.getKey = function (o) {
|
|
return o ? o.dataIndex : null;
|
|
};
|
|
this.addFilters(config.filters);
|
|
delete config.filters;
|
|
Ext.apply(this, config);
|
|
},
|
|
|
|
/** @private */
|
|
init : function (grid) {
|
|
if (grid instanceof Ext.grid.GridPanel) {
|
|
this.grid = grid;
|
|
|
|
this.bindStore(this.grid.getStore(), true);
|
|
|
|
this.grid.filters = this;
|
|
|
|
this.grid.addEvents({'filterupdate': true});
|
|
|
|
grid.on({
|
|
scope: this,
|
|
beforestaterestore: this.applyState,
|
|
beforestatesave: this.saveState,
|
|
beforedestroy: this.destroy,
|
|
reconfigure: this.onReconfigure
|
|
});
|
|
|
|
if (grid.rendered){
|
|
this.onRender();
|
|
} else {
|
|
grid.on({
|
|
scope: this,
|
|
single: true,
|
|
render: this.onRender
|
|
});
|
|
}
|
|
|
|
} else if (grid instanceof Ext.PagingToolbar) {
|
|
this.toolbar = grid;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handler for the grid's beforestaterestore event (fires before the state of the
|
|
* grid is restored).
|
|
* @param {Object} grid The grid object
|
|
* @param {Object} state The hash of state values returned from the StateProvider.
|
|
*/
|
|
applyState : function (grid, state) {
|
|
var key, filter;
|
|
this.applyingState = true;
|
|
this.clearFilters();
|
|
if (state.filters) {
|
|
for (key in state.filters) {
|
|
filter = this.filters.get(key);
|
|
if (filter) {
|
|
filter.setValue(state.filters[key]);
|
|
filter.setActive(true);
|
|
}
|
|
}
|
|
}
|
|
this.deferredUpdate.cancel();
|
|
if (this.local) {
|
|
this.reload();
|
|
}
|
|
delete this.applyingState;
|
|
},
|
|
|
|
/**
|
|
* Saves the state of all active filters
|
|
* @param {Object} grid
|
|
* @param {Object} state
|
|
* @return {Boolean}
|
|
*/
|
|
saveState : function (grid, state) {
|
|
var filters = {};
|
|
this.filters.each(function (filter) {
|
|
if (filter.active) {
|
|
filters[filter.dataIndex] = filter.getValue();
|
|
}
|
|
});
|
|
return (state.filters = filters);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handler called when the grid is rendered
|
|
*/
|
|
onRender : function () {
|
|
this.grid.getView().on('refresh', this.onRefresh, this);
|
|
this.createMenu();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handler called by the grid 'beforedestroy' event
|
|
*/
|
|
destroy : function () {
|
|
this.removeAll();
|
|
this.purgeListeners();
|
|
|
|
if(this.filterMenu){
|
|
Ext.menu.MenuMgr.unregister(this.filterMenu);
|
|
this.filterMenu.destroy();
|
|
this.filterMenu = this.menu.menu = null;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Remove all filters, permanently destroying them.
|
|
*/
|
|
removeAll : function () {
|
|
if(this.filters){
|
|
Ext.destroy.apply(Ext, this.filters.items);
|
|
// remove all items from the collection
|
|
this.filters.clear();
|
|
}
|
|
},
|
|
|
|
|
|
/**
|
|
* 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){
|
|
if (this.local) {
|
|
store.un('load', this.onLoad, this);
|
|
} else {
|
|
store.un('beforeload', this.onBeforeLoad, this);
|
|
}
|
|
}
|
|
if(store){
|
|
if (this.local) {
|
|
store.on('load', this.onLoad, this);
|
|
} else {
|
|
store.on('beforeload', this.onBeforeLoad, this);
|
|
}
|
|
}
|
|
this.store = store;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handler called when the grid reconfigure event fires
|
|
*/
|
|
onReconfigure : function () {
|
|
this.bindStore(this.grid.getStore());
|
|
this.store.clearFilter();
|
|
this.removeAll();
|
|
this.addFilters(this.grid.getColumnModel());
|
|
this.updateColumnHeadings();
|
|
},
|
|
|
|
createMenu : function () {
|
|
var view = this.grid.getView(),
|
|
hmenu = view.hmenu;
|
|
|
|
if (this.showMenu && hmenu) {
|
|
|
|
this.sep = hmenu.addSeparator();
|
|
this.filterMenu = new Ext.menu.Menu({
|
|
id: this.grid.id + '-filters-menu'
|
|
});
|
|
this.menu = hmenu.add({
|
|
checked: false,
|
|
itemId: 'filters',
|
|
text: this.menuFilterText,
|
|
menu: this.filterMenu
|
|
});
|
|
|
|
this.menu.on({
|
|
scope: this,
|
|
checkchange: this.onCheckChange,
|
|
beforecheckchange: this.onBeforeCheck
|
|
});
|
|
hmenu.on('beforeshow', this.onMenu, this);
|
|
}
|
|
this.updateColumnHeadings();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Get the filter menu from the filters MixedCollection based on the clicked header
|
|
*/
|
|
getMenuFilter : function () {
|
|
var view = this.grid.getView();
|
|
if (!view || view.hdCtxIndex === undefined) {
|
|
return null;
|
|
}
|
|
return this.filters.get(
|
|
view.cm.config[view.hdCtxIndex].dataIndex
|
|
);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handler called by the grid's hmenu beforeshow event
|
|
*/
|
|
onMenu : function (filterMenu) {
|
|
var filter = this.getMenuFilter();
|
|
|
|
if (filter) {
|
|
/*
|
|
TODO: lazy rendering
|
|
if (!filter.menu) {
|
|
filter.menu = filter.createMenu();
|
|
}
|
|
*/
|
|
this.menu.menu = filter.menu;
|
|
this.menu.setChecked(filter.active, false);
|
|
// disable the menu if filter.disabled explicitly set to true
|
|
this.menu.setDisabled(filter.disabled === true);
|
|
}
|
|
|
|
this.menu.setVisible(filter !== undefined);
|
|
this.sep.setVisible(filter !== undefined);
|
|
},
|
|
|
|
/** @private */
|
|
onCheckChange : function (item, value) {
|
|
this.getMenuFilter().setActive(value);
|
|
},
|
|
|
|
/** @private */
|
|
onBeforeCheck : function (check, value) {
|
|
return !value || this.getMenuFilter().isActivatable();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handler for all events on filters.
|
|
* @param {String} event Event name
|
|
* @param {Object} filter Standard signature of the event before the event is fired
|
|
*/
|
|
onStateChange : function (event, filter) {
|
|
if (event === 'serialize') {
|
|
return;
|
|
}
|
|
|
|
if (filter == this.getMenuFilter()) {
|
|
this.menu.setChecked(filter.active, false);
|
|
}
|
|
|
|
if ((this.autoReload || this.local) && !this.applyingState) {
|
|
this.deferredUpdate.delay(this.updateBuffer);
|
|
}
|
|
this.updateColumnHeadings();
|
|
|
|
if (!this.applyingState) {
|
|
this.grid.saveState();
|
|
}
|
|
this.grid.fireEvent('filterupdate', this, filter);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handler for store's beforeload event when configured for remote filtering
|
|
* @param {Object} store
|
|
* @param {Object} options
|
|
*/
|
|
onBeforeLoad : function (store, options) {
|
|
options.params = options.params || {};
|
|
this.cleanParams(options.params);
|
|
var params = this.buildQuery(this.getFilterData());
|
|
Ext.apply(options.params, params);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handler for store's load event when configured for local filtering
|
|
* @param {Object} store
|
|
* @param {Object} options
|
|
*/
|
|
onLoad : function (store, options) {
|
|
store.filterBy(this.getRecordFilter());
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handler called when the grid's view is refreshed
|
|
*/
|
|
onRefresh : function () {
|
|
this.updateColumnHeadings();
|
|
},
|
|
|
|
/**
|
|
* Update the styles for the header row based on the active filters
|
|
*/
|
|
updateColumnHeadings : function () {
|
|
var view = this.grid.getView(),
|
|
hds, i, len, filter;
|
|
if (view.mainHd) {
|
|
hds = view.mainHd.select('td').removeClass(this.filterCls);
|
|
for (i = 0, len = view.cm.config.length; i < len; i++) {
|
|
filter = this.getFilter(view.cm.config[i].dataIndex);
|
|
if (filter && filter.active) {
|
|
hds.item(i).addClass(this.filterCls);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/** @private */
|
|
reload : function () {
|
|
if (this.local) {
|
|
this.grid.store.clearFilter(true);
|
|
this.grid.store.filterBy(this.getRecordFilter());
|
|
} else {
|
|
var start,
|
|
store = this.grid.store;
|
|
this.deferredUpdate.cancel();
|
|
if (this.toolbar) {
|
|
start = store.paramNames.start;
|
|
if (store.lastOptions && store.lastOptions.params && store.lastOptions.params[start]) {
|
|
store.lastOptions.params[start] = 0;
|
|
}
|
|
}
|
|
store.reload();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method factory that generates a record validator for the filters active at the time
|
|
* of invokation.
|
|
* @private
|
|
*/
|
|
getRecordFilter : function () {
|
|
var f = [], len, i;
|
|
this.filters.each(function (filter) {
|
|
if (filter.active) {
|
|
f.push(filter);
|
|
}
|
|
});
|
|
|
|
len = f.length;
|
|
return function (record) {
|
|
for (i = 0; i < len; i++) {
|
|
if (!f[i].validateRecord(record)) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Adds a filter to the collection and observes it for state change.
|
|
* @param {Object/Ext.ux.grid.filter.Filter} config A filter configuration or a filter object.
|
|
* @return {Ext.ux.grid.filter.Filter} The existing or newly created filter object.
|
|
*/
|
|
addFilter : function (config) {
|
|
var Cls = this.getFilterClass(config.type),
|
|
filter = config.menu ? config : (new Cls(config));
|
|
this.filters.add(filter);
|
|
|
|
Ext.util.Observable.capture(filter, this.onStateChange, this);
|
|
return filter;
|
|
},
|
|
|
|
/**
|
|
* Adds filters to the collection.
|
|
* @param {Array/Ext.grid.ColumnModel} filters Either an Array of
|
|
* filter configuration objects or an Ext.grid.ColumnModel. The columns
|
|
* of a passed Ext.grid.ColumnModel will be examined for a <code>filter</code>
|
|
* property and, if present, will be used as the filter configuration object.
|
|
*/
|
|
addFilters : function (filters) {
|
|
if (filters) {
|
|
var i, len, filter, cm = false, dI;
|
|
if (filters instanceof Ext.grid.ColumnModel) {
|
|
filters = filters.config;
|
|
cm = true;
|
|
}
|
|
for (i = 0, len = filters.length; i < len; i++) {
|
|
filter = false;
|
|
if (cm) {
|
|
dI = filters[i].dataIndex;
|
|
filter = filters[i].filter || filters[i].filterable;
|
|
if (filter){
|
|
filter = (filter === true) ? {} : filter;
|
|
Ext.apply(filter, {dataIndex:dI});
|
|
// filter type is specified in order of preference:
|
|
// filter type specified in config
|
|
// type specified in store's field's type config
|
|
filter.type = filter.type || this.store.fields.get(dI).type;
|
|
}
|
|
} else {
|
|
filter = filters[i];
|
|
}
|
|
// if filter config found add filter for the column
|
|
if (filter) {
|
|
this.addFilter(filter);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns a filter for the given dataIndex, if one exists.
|
|
* @param {String} dataIndex The dataIndex of the desired filter object.
|
|
* @return {Ext.ux.grid.filter.Filter}
|
|
*/
|
|
getFilter : function (dataIndex) {
|
|
return this.filters.get(dataIndex);
|
|
},
|
|
|
|
/**
|
|
* Turns all filters off. This does not clear the configuration information
|
|
* (see {@link #removeAll}).
|
|
*/
|
|
clearFilters : function () {
|
|
this.filters.each(function (filter) {
|
|
filter.setActive(false);
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Returns an Array of the currently active filters.
|
|
* @return {Array} filters Array of the currently active filters.
|
|
*/
|
|
getFilterData : function () {
|
|
var filters = [], i, len;
|
|
|
|
this.filters.each(function (f) {
|
|
if (f.active) {
|
|
var d = [].concat(f.serialize());
|
|
for (i = 0, len = d.length; i < len; i++) {
|
|
filters.push({
|
|
field: f.dataIndex,
|
|
data: d[i]
|
|
});
|
|
}
|
|
}
|
|
});
|
|
return filters;
|
|
},
|
|
|
|
/**
|
|
* Function to take the active filters data and build it into a query.
|
|
* The format of the query depends on the <code>{@link #encode}</code>
|
|
* configuration:
|
|
* <div class="mdetail-params"><ul>
|
|
*
|
|
* <li><b><tt>false</tt></b> : <i>Default</i>
|
|
* <div class="sub-desc">
|
|
* Flatten into query string of the form (assuming <code>{@link #paramPrefix}='filters'</code>:
|
|
* <pre><code>
|
|
filters[0][field]="someDataIndex"&
|
|
filters[0][data][comparison]="someValue1"&
|
|
filters[0][data][type]="someValue2"&
|
|
filters[0][data][value]="someValue3"&
|
|
* </code></pre>
|
|
* </div></li>
|
|
* <li><b><tt>true</tt></b> :
|
|
* <div class="sub-desc">
|
|
* JSON encode the filter data
|
|
* <pre><code>
|
|
filters[0][field]="someDataIndex"&
|
|
filters[0][data][comparison]="someValue1"&
|
|
filters[0][data][type]="someValue2"&
|
|
filters[0][data][value]="someValue3"&
|
|
* </code></pre>
|
|
* </div></li>
|
|
* </ul></div>
|
|
* Override this method to customize the format of the filter query for remote requests.
|
|
* @param {Array} filters A collection of objects representing active filters and their configuration.
|
|
* Each element will take the form of {field: dataIndex, data: filterConf}. dataIndex is not assured
|
|
* to be unique as any one filter may be a composite of more basic filters for the same dataIndex.
|
|
* @return {Object} Query keys and values
|
|
*/
|
|
buildQuery : function (filters) {
|
|
var p = {}, i, f, root, dataPrefix, key, tmp,
|
|
len = filters.length;
|
|
|
|
if (!this.encode){
|
|
for (i = 0; i < len; i++) {
|
|
f = filters[i];
|
|
root = [this.paramPrefix, '[', i, ']'].join('');
|
|
p[root + '[field]'] = f.field;
|
|
|
|
dataPrefix = root + '[data]';
|
|
for (key in f.data) {
|
|
p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];
|
|
}
|
|
}
|
|
} else {
|
|
tmp = [];
|
|
for (i = 0; i < len; i++) {
|
|
f = filters[i];
|
|
tmp.push(Ext.apply(
|
|
{},
|
|
{field: f.field},
|
|
f.data
|
|
));
|
|
}
|
|
// only build if there is active filter
|
|
if (tmp.length > 0){
|
|
p[this.paramPrefix] = Ext.util.JSON.encode(tmp);
|
|
}
|
|
}
|
|
return p;
|
|
},
|
|
|
|
/**
|
|
* Removes filter related query parameters from the provided object.
|
|
* @param {Object} p Query parameters that may contain filter related fields.
|
|
*/
|
|
cleanParams : function (p) {
|
|
// if encoding just delete the property
|
|
if (this.encode) {
|
|
delete p[this.paramPrefix];
|
|
// otherwise scrub the object of filter data
|
|
} else {
|
|
var regex, key;
|
|
regex = new RegExp('^' + this.paramPrefix + '\[[0-9]+\]');
|
|
for (key in p) {
|
|
if (regex.test(key)) {
|
|
delete p[key];
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Function for locating filter classes, overwrite this with your favorite
|
|
* loader to provide dynamic filter loading.
|
|
* @param {String} type The type of filter to load ('Filter' is automatically
|
|
* appended to the passed type; eg, 'string' becomes 'StringFilter').
|
|
* @return {Class} The Ext.ux.grid.filter.Class
|
|
*/
|
|
getFilterClass : function (type) {
|
|
// map the supported Ext.data.Field type values into a supported filter
|
|
switch(type) {
|
|
case 'auto':
|
|
type = 'string';
|
|
break;
|
|
case 'int':
|
|
case 'float':
|
|
type = 'numeric';
|
|
break;
|
|
}
|
|
return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter'];
|
|
}
|
|
});
|
|
|
|
// register ptype
|
|
Ext.preg('gridfilters', Ext.ux.grid.GridFilters);
|
|
Ext.namespace('Ext.ux.grid.filter');
|
|
|
|
/**
|
|
* @class Ext.ux.grid.filter.Filter
|
|
* @extends Ext.util.Observable
|
|
* Abstract base class for filter implementations.
|
|
*/
|
|
Ext.ux.grid.filter.Filter = Ext.extend(Ext.util.Observable, {
|
|
/**
|
|
* @cfg {Boolean} active
|
|
* Indicates the initial status of the filter (defaults to false).
|
|
*/
|
|
active : false,
|
|
/**
|
|
* True if this filter is active. Use setActive() to alter after configuration.
|
|
* @type Boolean
|
|
* @property active
|
|
*/
|
|
/**
|
|
* @cfg {String} dataIndex
|
|
* The {@link Ext.data.Store} dataIndex of the field this filter represents.
|
|
* The dataIndex does not actually have to exist in the store.
|
|
*/
|
|
dataIndex : null,
|
|
/**
|
|
* The filter configuration menu that will be installed into the filter submenu of a column menu.
|
|
* @type Ext.menu.Menu
|
|
* @property
|
|
*/
|
|
menu : null,
|
|
/**
|
|
* @cfg {Number} updateBuffer
|
|
* Number of milliseconds to wait after user interaction to fire an update. Only supported
|
|
* by filters: 'list', 'numeric', and 'string'. Defaults to 500.
|
|
*/
|
|
updateBuffer : 500,
|
|
|
|
constructor : function (config) {
|
|
Ext.apply(this, config);
|
|
|
|
this.addEvents(
|
|
/**
|
|
* @event activate
|
|
* Fires when an inactive filter becomes active
|
|
* @param {Ext.ux.grid.filter.Filter} this
|
|
*/
|
|
'activate',
|
|
/**
|
|
* @event deactivate
|
|
* Fires when an active filter becomes inactive
|
|
* @param {Ext.ux.grid.filter.Filter} this
|
|
*/
|
|
'deactivate',
|
|
/**
|
|
* @event serialize
|
|
* Fires after the serialization process. Use this to attach additional parameters to serialization
|
|
* data before it is encoded and sent to the server.
|
|
* @param {Array/Object} data A map or collection of maps representing the current filter configuration.
|
|
* @param {Ext.ux.grid.filter.Filter} filter The filter being serialized.
|
|
*/
|
|
'serialize',
|
|
/**
|
|
* @event update
|
|
* Fires when a filter configuration has changed
|
|
* @param {Ext.ux.grid.filter.Filter} this The filter object.
|
|
*/
|
|
'update'
|
|
);
|
|
Ext.ux.grid.filter.Filter.superclass.constructor.call(this);
|
|
|
|
this.menu = new Ext.menu.Menu();
|
|
this.init(config);
|
|
if(config && config.value){
|
|
this.setValue(config.value);
|
|
this.setActive(config.active !== false, true);
|
|
delete config.value;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Destroys this filter by purging any event listeners, and removing any menus.
|
|
*/
|
|
destroy : function(){
|
|
if (this.menu){
|
|
this.menu.destroy();
|
|
}
|
|
this.purgeListeners();
|
|
},
|
|
|
|
/**
|
|
* Template method to be implemented by all subclasses that is to
|
|
* initialize the filter and install required menu items.
|
|
* Defaults to Ext.emptyFn.
|
|
*/
|
|
init : Ext.emptyFn,
|
|
|
|
/**
|
|
* Template method to be implemented by all subclasses that is to
|
|
* get and return the value of the filter.
|
|
* Defaults to Ext.emptyFn.
|
|
* @return {Object} The 'serialized' form of this filter
|
|
* @methodOf Ext.ux.grid.filter.Filter
|
|
*/
|
|
getValue : Ext.emptyFn,
|
|
|
|
/**
|
|
* Template method to be implemented by all subclasses that is to
|
|
* set the value of the filter and fire the 'update' event.
|
|
* Defaults to Ext.emptyFn.
|
|
* @param {Object} data The value to set the filter
|
|
* @methodOf Ext.ux.grid.filter.Filter
|
|
*/
|
|
setValue : Ext.emptyFn,
|
|
|
|
/**
|
|
* Template method to be implemented by all subclasses that is to
|
|
* return <tt>true</tt> if the filter has enough configuration information to be activated.
|
|
* Defaults to <tt>return true</tt>.
|
|
* @return {Boolean}
|
|
*/
|
|
isActivatable : function(){
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Template method to be implemented by all subclasses that is to
|
|
* get and return serialized filter data for transmission to the server.
|
|
* Defaults to Ext.emptyFn.
|
|
*/
|
|
getSerialArgs : Ext.emptyFn,
|
|
|
|
/**
|
|
* Template method to be implemented by all subclasses that is to
|
|
* validates the provided Ext.data.Record against the filters configuration.
|
|
* Defaults to <tt>return true</tt>.
|
|
* @param {Ext.data.Record} record The record to validate
|
|
* @return {Boolean} true if the record is valid within the bounds
|
|
* of the filter, false otherwise.
|
|
*/
|
|
validateRecord : function(){
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Returns the serialized filter data for transmission to the server
|
|
* and fires the 'serialize' event.
|
|
* @return {Object/Array} An object or collection of objects containing
|
|
* key value pairs representing the current configuration of the filter.
|
|
* @methodOf Ext.ux.grid.filter.Filter
|
|
*/
|
|
serialize : function(){
|
|
var args = this.getSerialArgs();
|
|
this.fireEvent('serialize', args, this);
|
|
return args;
|
|
},
|
|
|
|
/** @private */
|
|
fireUpdate : function(){
|
|
if (this.active) {
|
|
this.fireEvent('update', this);
|
|
}
|
|
this.setActive(this.isActivatable());
|
|
},
|
|
|
|
/**
|
|
* Sets the status of the filter and fires the appropriate events.
|
|
* @param {Boolean} active The new filter state.
|
|
* @param {Boolean} suppressEvent True to prevent events from being fired.
|
|
* @methodOf Ext.ux.grid.filter.Filter
|
|
*/
|
|
setActive : function(active, suppressEvent){
|
|
if(this.active != active){
|
|
this.active = active;
|
|
if (suppressEvent !== true) {
|
|
this.fireEvent(active ? 'activate' : 'deactivate', this);
|
|
}
|
|
}
|
|
}
|
|
});/**
|
|
* @class Ext.ux.grid.filter.BooleanFilter
|
|
* @extends Ext.ux.grid.filter.Filter
|
|
* Boolean filters use unique radio group IDs (so you can have more than one!)
|
|
* <p><b><u>Example Usage:</u></b></p>
|
|
* <pre><code>
|
|
var filters = new Ext.ux.grid.GridFilters({
|
|
...
|
|
filters: [{
|
|
// required configs
|
|
type: 'boolean',
|
|
dataIndex: 'visible'
|
|
|
|
// optional configs
|
|
defaultValue: null, // leave unselected (false selected by default)
|
|
yesText: 'Yes', // default
|
|
noText: 'No' // default
|
|
}]
|
|
});
|
|
* </code></pre>
|
|
*/
|
|
Ext.ux.grid.filter.BooleanFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
|
|
/**
|
|
* @cfg {Boolean} defaultValue
|
|
* Set this to null if you do not want either option to be checked by default. Defaults to false.
|
|
*/
|
|
defaultValue : false,
|
|
/**
|
|
* @cfg {String} yesText
|
|
* Defaults to 'Yes'.
|
|
*/
|
|
yesText : 'Yes',
|
|
/**
|
|
* @cfg {String} noText
|
|
* Defaults to 'No'.
|
|
*/
|
|
noText : 'No',
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to initialize the filter and install required menu items.
|
|
*/
|
|
init : function (config) {
|
|
var gId = Ext.id();
|
|
this.options = [
|
|
new Ext.menu.CheckItem({text: this.yesText, group: gId, checked: this.defaultValue === true}),
|
|
new Ext.menu.CheckItem({text: this.noText, group: gId, checked: this.defaultValue === false})];
|
|
|
|
this.menu.add(this.options[0], this.options[1]);
|
|
|
|
for(var i=0; i<this.options.length; i++){
|
|
this.options[i].on('click', this.fireUpdate, this);
|
|
this.options[i].on('checkchange', this.fireUpdate, this);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to get and return the value of the filter.
|
|
* @return {String} The value of this filter
|
|
*/
|
|
getValue : function () {
|
|
return this.options[0].checked;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to set the value of the filter.
|
|
* @param {Object} value The value to set the filter
|
|
*/
|
|
setValue : function (value) {
|
|
this.options[value ? 0 : 1].setChecked(true);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to get and return serialized filter data for
|
|
* transmission to the server.
|
|
* @return {Object/Array} An object or collection of objects containing
|
|
* key value pairs representing the current configuration of the filter.
|
|
*/
|
|
getSerialArgs : function () {
|
|
var args = {type: 'boolean', value: this.getValue()};
|
|
return args;
|
|
},
|
|
|
|
/**
|
|
* Template method that is to validate the provided Ext.data.Record
|
|
* against the filters configuration.
|
|
* @param {Ext.data.Record} record The record to validate
|
|
* @return {Boolean} true if the record is valid within the bounds
|
|
* of the filter, false otherwise.
|
|
*/
|
|
validateRecord : function (record) {
|
|
return record.get(this.dataIndex) == this.getValue();
|
|
}
|
|
});/**
|
|
* @class Ext.ux.grid.filter.DateFilter
|
|
* @extends Ext.ux.grid.filter.Filter
|
|
* Filter by a configurable Ext.menu.DateMenu
|
|
* <p><b><u>Example Usage:</u></b></p>
|
|
* <pre><code>
|
|
var filters = new Ext.ux.grid.GridFilters({
|
|
...
|
|
filters: [{
|
|
// required configs
|
|
type: 'date',
|
|
dataIndex: 'dateAdded',
|
|
|
|
// optional configs
|
|
dateFormat: 'm/d/Y', // default
|
|
beforeText: 'Before', // default
|
|
afterText: 'After', // default
|
|
onText: 'On', // default
|
|
pickerOpts: {
|
|
// any DateMenu configs
|
|
},
|
|
|
|
active: true // default is false
|
|
}]
|
|
});
|
|
* </code></pre>
|
|
*/
|
|
Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
|
|
/**
|
|
* @cfg {String} afterText
|
|
* Defaults to 'After'.
|
|
*/
|
|
afterText : 'After',
|
|
/**
|
|
* @cfg {String} beforeText
|
|
* Defaults to 'Before'.
|
|
*/
|
|
beforeText : 'Before',
|
|
/**
|
|
* @cfg {Object} compareMap
|
|
* Map for assigning the comparison values used in serialization.
|
|
*/
|
|
compareMap : {
|
|
before: 'lt',
|
|
after: 'gt',
|
|
on: 'eq'
|
|
},
|
|
/**
|
|
* @cfg {String} dateFormat
|
|
* The date format to return when using getValue.
|
|
* Defaults to 'm/d/Y'.
|
|
*/
|
|
dateFormat : 'm/d/Y',
|
|
|
|
/**
|
|
* @cfg {Date} maxDate
|
|
* Allowable date as passed to the Ext.DatePicker
|
|
* Defaults to undefined.
|
|
*/
|
|
/**
|
|
* @cfg {Date} minDate
|
|
* Allowable date as passed to the Ext.DatePicker
|
|
* Defaults to undefined.
|
|
*/
|
|
/**
|
|
* @cfg {Array} menuItems
|
|
* The items to be shown in this menu
|
|
* Defaults to:<pre>
|
|
* menuItems : ['before', 'after', '-', 'on'],
|
|
* </pre>
|
|
*/
|
|
menuItems : ['before', 'after', '-', 'on'],
|
|
|
|
/**
|
|
* @cfg {Object} menuItemCfgs
|
|
* Default configuration options for each menu item
|
|
*/
|
|
menuItemCfgs : {
|
|
selectOnFocus: true,
|
|
width: 125
|
|
},
|
|
|
|
/**
|
|
* @cfg {String} onText
|
|
* Defaults to 'On'.
|
|
*/
|
|
onText : 'On',
|
|
|
|
/**
|
|
* @cfg {Object} pickerOpts
|
|
* Configuration options for the date picker associated with each field.
|
|
*/
|
|
pickerOpts : {},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to initialize the filter and install required menu items.
|
|
*/
|
|
init : function (config) {
|
|
var menuCfg, i, len, item, cfg, Cls;
|
|
|
|
menuCfg = Ext.apply(this.pickerOpts, {
|
|
minDate: this.minDate,
|
|
maxDate: this.maxDate,
|
|
format: this.dateFormat,
|
|
listeners: {
|
|
scope: this,
|
|
select: this.onMenuSelect
|
|
}
|
|
});
|
|
|
|
this.fields = {};
|
|
for (i = 0, len = this.menuItems.length; i < len; i++) {
|
|
item = this.menuItems[i];
|
|
if (item !== '-') {
|
|
cfg = {
|
|
itemId: 'range-' + item,
|
|
text: this[item + 'Text'],
|
|
menu: new Ext.menu.DateMenu(
|
|
Ext.apply(menuCfg, {
|
|
itemId: item
|
|
})
|
|
),
|
|
listeners: {
|
|
scope: this,
|
|
checkchange: this.onCheckChange
|
|
}
|
|
};
|
|
Cls = Ext.menu.CheckItem;
|
|
item = this.fields[item] = new Cls(cfg);
|
|
}
|
|
//this.add(item);
|
|
this.menu.add(item);
|
|
}
|
|
},
|
|
|
|
onCheckChange : function () {
|
|
this.setActive(this.isActivatable());
|
|
this.fireEvent('update', this);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handler method called when there is a keyup event on an input
|
|
* item of this menu.
|
|
*/
|
|
onInputKeyUp : function (field, e) {
|
|
var k = e.getKey();
|
|
if (k == e.RETURN && field.isValid()) {
|
|
e.stopEvent();
|
|
this.menu.hide(true);
|
|
return;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handler for when the menu for a field fires the 'select' event
|
|
* @param {Object} date
|
|
* @param {Object} menuItem
|
|
* @param {Object} value
|
|
* @param {Object} picker
|
|
*/
|
|
onMenuSelect : function (menuItem, value, picker) {
|
|
var fields = this.fields,
|
|
field = this.fields[menuItem.itemId];
|
|
|
|
field.setChecked(true);
|
|
|
|
if (field == fields.on) {
|
|
fields.before.setChecked(false, true);
|
|
fields.after.setChecked(false, true);
|
|
} else {
|
|
fields.on.setChecked(false, true);
|
|
if (field == fields.after && fields.before.menu.picker.value < value) {
|
|
fields.before.setChecked(false, true);
|
|
} else if (field == fields.before && fields.after.menu.picker.value > value) {
|
|
fields.after.setChecked(false, true);
|
|
}
|
|
}
|
|
this.fireEvent('update', this);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to get and return the value of the filter.
|
|
* @return {String} The value of this filter
|
|
*/
|
|
getValue : function () {
|
|
var key, result = {};
|
|
for (key in this.fields) {
|
|
if (this.fields[key].checked) {
|
|
result[key] = this.fields[key].menu.picker.getValue();
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to set the value of the filter.
|
|
* @param {Object} value The value to set the filter
|
|
* @param {Boolean} preserve true to preserve the checked status
|
|
* of the other fields. Defaults to false, unchecking the
|
|
* other fields
|
|
*/
|
|
setValue : function (value, preserve) {
|
|
var key;
|
|
for (key in this.fields) {
|
|
if(value[key]){
|
|
this.fields[key].menu.picker.setValue(value[key]);
|
|
this.fields[key].setChecked(true);
|
|
} else if (!preserve) {
|
|
this.fields[key].setChecked(false);
|
|
}
|
|
}
|
|
this.fireEvent('update', this);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to return <tt>true</tt> if the filter
|
|
* has enough configuration information to be activated.
|
|
* @return {Boolean}
|
|
*/
|
|
isActivatable : function () {
|
|
var key;
|
|
for (key in this.fields) {
|
|
if (this.fields[key].checked) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to get and return serialized filter data for
|
|
* transmission to the server.
|
|
* @return {Object/Array} An object or collection of objects containing
|
|
* key value pairs representing the current configuration of the filter.
|
|
*/
|
|
getSerialArgs : function () {
|
|
var args = [];
|
|
for (var key in this.fields) {
|
|
if(this.fields[key].checked){
|
|
args.push({
|
|
type: 'date',
|
|
comparison: this.compareMap[key],
|
|
value: this.getFieldValue(key).format(this.dateFormat)
|
|
});
|
|
}
|
|
}
|
|
return args;
|
|
},
|
|
|
|
/**
|
|
* Get and return the date menu picker value
|
|
* @param {String} item The field identifier ('before', 'after', 'on')
|
|
* @return {Date} Gets the current selected value of the date field
|
|
*/
|
|
getFieldValue : function(item){
|
|
return this.fields[item].menu.picker.getValue();
|
|
},
|
|
|
|
/**
|
|
* Gets the menu picker associated with the passed field
|
|
* @param {String} item The field identifier ('before', 'after', 'on')
|
|
* @return {Object} The menu picker
|
|
*/
|
|
getPicker : function(item){
|
|
return this.fields[item].menu.picker;
|
|
},
|
|
|
|
/**
|
|
* Template method that is to validate the provided Ext.data.Record
|
|
* against the filters configuration.
|
|
* @param {Ext.data.Record} record The record to validate
|
|
* @return {Boolean} true if the record is valid within the bounds
|
|
* of the filter, false otherwise.
|
|
*/
|
|
validateRecord : function (record) {
|
|
var key,
|
|
pickerValue,
|
|
val = record.get(this.dataIndex);
|
|
|
|
if(!Ext.isDate(val)){
|
|
return false;
|
|
}
|
|
val = val.clearTime(true).getTime();
|
|
|
|
for (key in this.fields) {
|
|
if (this.fields[key].checked) {
|
|
pickerValue = this.getFieldValue(key).clearTime(true).getTime();
|
|
if (key == 'before' && pickerValue <= val) {
|
|
return false;
|
|
}
|
|
if (key == 'after' && pickerValue >= val) {
|
|
return false;
|
|
}
|
|
if (key == 'on' && pickerValue != val) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
});/**
|
|
* @class Ext.ux.grid.filter.ListFilter
|
|
* @extends Ext.ux.grid.filter.Filter
|
|
* <p>List filters are able to be preloaded/backed by an Ext.data.Store to load
|
|
* their options the first time they are shown. ListFilter utilizes the
|
|
* {@link Ext.ux.menu.ListMenu} component.</p>
|
|
* <p>Although not shown here, this class accepts all configuration options
|
|
* for {@link Ext.ux.menu.ListMenu}.</p>
|
|
*
|
|
* <p><b><u>Example Usage:</u></b></p>
|
|
* <pre><code>
|
|
var filters = new Ext.ux.grid.GridFilters({
|
|
...
|
|
filters: [{
|
|
type: 'list',
|
|
dataIndex: 'size',
|
|
phpMode: true,
|
|
// options will be used as data to implicitly creates an ArrayStore
|
|
options: ['extra small', 'small', 'medium', 'large', 'extra large']
|
|
}]
|
|
});
|
|
* </code></pre>
|
|
*
|
|
*/
|
|
Ext.ux.grid.filter.ListFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
|
|
|
|
/**
|
|
* @cfg {Array} options
|
|
* <p><code>data</code> to be used to implicitly create a data store
|
|
* to back this list when the data source is <b>local</b>. If the
|
|
* data for the list is remote, use the <code>{@link #store}</code>
|
|
* config instead.</p>
|
|
* <br><p>Each item within the provided array may be in one of the
|
|
* following formats:</p>
|
|
* <div class="mdetail-params"><ul>
|
|
* <li><b>Array</b> :
|
|
* <pre><code>
|
|
options: [
|
|
[11, 'extra small'],
|
|
[18, 'small'],
|
|
[22, 'medium'],
|
|
[35, 'large'],
|
|
[44, 'extra large']
|
|
]
|
|
* </code></pre>
|
|
* </li>
|
|
* <li><b>Object</b> :
|
|
* <pre><code>
|
|
labelField: 'name', // override default of 'text'
|
|
options: [
|
|
{id: 11, name:'extra small'},
|
|
{id: 18, name:'small'},
|
|
{id: 22, name:'medium'},
|
|
{id: 35, name:'large'},
|
|
{id: 44, name:'extra large'}
|
|
]
|
|
* </code></pre>
|
|
* </li>
|
|
* <li><b>String</b> :
|
|
* <pre><code>
|
|
* options: ['extra small', 'small', 'medium', 'large', 'extra large']
|
|
* </code></pre>
|
|
* </li>
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} phpMode
|
|
* <p>Adjust the format of this filter. Defaults to false.</p>
|
|
* <br><p>When GridFilters <code>@cfg encode = false</code> (default):</p>
|
|
* <pre><code>
|
|
// phpMode == false (default):
|
|
filter[0][data][type] list
|
|
filter[0][data][value] value1
|
|
filter[0][data][value] value2
|
|
filter[0][field] prod
|
|
|
|
// phpMode == true:
|
|
filter[0][data][type] list
|
|
filter[0][data][value] value1, value2
|
|
filter[0][field] prod
|
|
* </code></pre>
|
|
* When GridFilters <code>@cfg encode = true</code>:
|
|
* <pre><code>
|
|
// phpMode == false (default):
|
|
filter : [{"type":"list","value":["small","medium"],"field":"size"}]
|
|
|
|
// phpMode == true:
|
|
filter : [{"type":"list","value":"small,medium","field":"size"}]
|
|
* </code></pre>
|
|
*/
|
|
phpMode : false,
|
|
/**
|
|
* @cfg {Ext.data.Store} store
|
|
* The {@link Ext.data.Store} this list should use as its data source
|
|
* when the data source is <b>remote</b>. If the data for the list
|
|
* is local, use the <code>{@link #options}</code> config instead.
|
|
*/
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to initialize the filter and install required menu items.
|
|
* @param {Object} config
|
|
*/
|
|
init : function (config) {
|
|
this.dt = new Ext.util.DelayedTask(this.fireUpdate, this);
|
|
|
|
// if a menu already existed, do clean up first
|
|
if (this.menu){
|
|
this.menu.destroy();
|
|
}
|
|
this.menu = new Ext.ux.menu.ListMenu(config);
|
|
this.menu.on('checkchange', this.onCheckChange, this);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to get and return the value of the filter.
|
|
* @return {String} The value of this filter
|
|
*/
|
|
getValue : function () {
|
|
return this.menu.getSelected();
|
|
},
|
|
/**
|
|
* @private
|
|
* Template method that is to set the value of the filter.
|
|
* @param {Object} value The value to set the filter
|
|
*/
|
|
setValue : function (value) {
|
|
this.menu.setSelected(value);
|
|
this.fireEvent('update', this);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to return <tt>true</tt> if the filter
|
|
* has enough configuration information to be activated.
|
|
* @return {Boolean}
|
|
*/
|
|
isActivatable : function () {
|
|
return this.getValue().length > 0;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to get and return serialized filter data for
|
|
* transmission to the server.
|
|
* @return {Object/Array} An object or collection of objects containing
|
|
* key value pairs representing the current configuration of the filter.
|
|
*/
|
|
getSerialArgs : function () {
|
|
var args = {type: 'list', value: this.phpMode ? this.getValue().join(',') : this.getValue()};
|
|
return args;
|
|
},
|
|
|
|
/** @private */
|
|
onCheckChange : function(){
|
|
this.dt.delay(this.updateBuffer);
|
|
},
|
|
|
|
|
|
/**
|
|
* Template method that is to validate the provided Ext.data.Record
|
|
* against the filters configuration.
|
|
* @param {Ext.data.Record} record The record to validate
|
|
* @return {Boolean} true if the record is valid within the bounds
|
|
* of the filter, false otherwise.
|
|
*/
|
|
validateRecord : function (record) {
|
|
return this.getValue().indexOf(record.get(this.dataIndex)) > -1;
|
|
}
|
|
});/**
|
|
* @class Ext.ux.grid.filter.NumericFilter
|
|
* @extends Ext.ux.grid.filter.Filter
|
|
* Filters using an Ext.ux.menu.RangeMenu.
|
|
* <p><b><u>Example Usage:</u></b></p>
|
|
* <pre><code>
|
|
var filters = new Ext.ux.grid.GridFilters({
|
|
...
|
|
filters: [{
|
|
type: 'numeric',
|
|
dataIndex: 'price'
|
|
}]
|
|
});
|
|
* </code></pre>
|
|
*/
|
|
Ext.ux.grid.filter.NumericFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
|
|
|
|
/**
|
|
* @cfg {Object} fieldCls
|
|
* The Class to use to construct each field item within this menu
|
|
* Defaults to:<pre>
|
|
* fieldCls : Ext.form.NumberField
|
|
* </pre>
|
|
*/
|
|
fieldCls : Ext.form.NumberField,
|
|
/**
|
|
* @cfg {Object} fieldCfg
|
|
* The default configuration options for any field item unless superseded
|
|
* by the <code>{@link #fields}</code> configuration.
|
|
* Defaults to:<pre>
|
|
* fieldCfg : {}
|
|
* </pre>
|
|
* Example usage:
|
|
* <pre><code>
|
|
fieldCfg : {
|
|
width: 150,
|
|
},
|
|
* </code></pre>
|
|
*/
|
|
/**
|
|
* @cfg {Object} fields
|
|
* The field items may be configured individually
|
|
* Defaults to <tt>undefined</tt>.
|
|
* Example usage:
|
|
* <pre><code>
|
|
fields : {
|
|
gt: { // override fieldCfg options
|
|
width: 200,
|
|
fieldCls: Ext.ux.form.CustomNumberField // to override default {@link #fieldCls}
|
|
}
|
|
},
|
|
* </code></pre>
|
|
*/
|
|
/**
|
|
* @cfg {Object} iconCls
|
|
* The iconCls to be applied to each comparator field item.
|
|
* Defaults to:<pre>
|
|
iconCls : {
|
|
gt : 'ux-rangemenu-gt',
|
|
lt : 'ux-rangemenu-lt',
|
|
eq : 'ux-rangemenu-eq'
|
|
}
|
|
* </pre>
|
|
*/
|
|
iconCls : {
|
|
gt : 'ux-rangemenu-gt',
|
|
lt : 'ux-rangemenu-lt',
|
|
eq : 'ux-rangemenu-eq'
|
|
},
|
|
|
|
/**
|
|
* @cfg {Object} menuItemCfgs
|
|
* Default configuration options for each menu item
|
|
* Defaults to:<pre>
|
|
menuItemCfgs : {
|
|
emptyText: 'Enter Filter Text...',
|
|
selectOnFocus: true,
|
|
width: 125
|
|
}
|
|
* </pre>
|
|
*/
|
|
menuItemCfgs : {
|
|
emptyText: 'Enter Filter Text...',
|
|
selectOnFocus: true,
|
|
width: 125
|
|
},
|
|
|
|
/**
|
|
* @cfg {Array} menuItems
|
|
* The items to be shown in this menu. Items are added to the menu
|
|
* according to their position within this array. Defaults to:<pre>
|
|
* menuItems : ['lt','gt','-','eq']
|
|
* </pre>
|
|
*/
|
|
menuItems : ['lt', 'gt', '-', 'eq'],
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to initialize the filter and install required menu items.
|
|
*/
|
|
init : function (config) {
|
|
// if a menu already existed, do clean up first
|
|
if (this.menu){
|
|
this.menu.destroy();
|
|
}
|
|
this.menu = new Ext.ux.menu.RangeMenu(Ext.apply(config, {
|
|
// pass along filter configs to the menu
|
|
fieldCfg : this.fieldCfg || {},
|
|
fieldCls : this.fieldCls,
|
|
fields : this.fields || {},
|
|
iconCls: this.iconCls,
|
|
menuItemCfgs: this.menuItemCfgs,
|
|
menuItems: this.menuItems,
|
|
updateBuffer: this.updateBuffer
|
|
}));
|
|
// relay the event fired by the menu
|
|
this.menu.on('update', this.fireUpdate, this);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to get and return the value of the filter.
|
|
* @return {String} The value of this filter
|
|
*/
|
|
getValue : function () {
|
|
return this.menu.getValue();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to set the value of the filter.
|
|
* @param {Object} value The value to set the filter
|
|
*/
|
|
setValue : function (value) {
|
|
this.menu.setValue(value);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to return <tt>true</tt> if the filter
|
|
* has enough configuration information to be activated.
|
|
* @return {Boolean}
|
|
*/
|
|
isActivatable : function () {
|
|
var values = this.getValue();
|
|
for (key in values) {
|
|
if (values[key] !== undefined) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to get and return serialized filter data for
|
|
* transmission to the server.
|
|
* @return {Object/Array} An object or collection of objects containing
|
|
* key value pairs representing the current configuration of the filter.
|
|
*/
|
|
getSerialArgs : function () {
|
|
var key,
|
|
args = [],
|
|
values = this.menu.getValue();
|
|
for (key in values) {
|
|
args.push({
|
|
type: 'numeric',
|
|
comparison: key,
|
|
value: values[key]
|
|
});
|
|
}
|
|
return args;
|
|
},
|
|
|
|
/**
|
|
* Template method that is to validate the provided Ext.data.Record
|
|
* against the filters configuration.
|
|
* @param {Ext.data.Record} record The record to validate
|
|
* @return {Boolean} true if the record is valid within the bounds
|
|
* of the filter, false otherwise.
|
|
*/
|
|
validateRecord : function (record) {
|
|
var val = record.get(this.dataIndex),
|
|
values = this.getValue();
|
|
if (values.eq !== undefined && val != values.eq) {
|
|
return false;
|
|
}
|
|
if (values.lt !== undefined && val >= values.lt) {
|
|
return false;
|
|
}
|
|
if (values.gt !== undefined && val <= values.gt) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
});/**
|
|
* @class Ext.ux.grid.filter.StringFilter
|
|
* @extends Ext.ux.grid.filter.Filter
|
|
* Filter by a configurable Ext.form.TextField
|
|
* <p><b><u>Example Usage:</u></b></p>
|
|
* <pre><code>
|
|
var filters = new Ext.ux.grid.GridFilters({
|
|
...
|
|
filters: [{
|
|
// required configs
|
|
type: 'string',
|
|
dataIndex: 'name',
|
|
|
|
// optional configs
|
|
value: 'foo',
|
|
active: true, // default is false
|
|
iconCls: 'ux-gridfilter-text-icon' // default
|
|
// any Ext.form.TextField configs accepted
|
|
}]
|
|
});
|
|
* </code></pre>
|
|
*/
|
|
Ext.ux.grid.filter.StringFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
|
|
|
|
/**
|
|
* @cfg {String} iconCls
|
|
* The iconCls to be applied to the menu item.
|
|
* Defaults to <tt>'ux-gridfilter-text-icon'</tt>.
|
|
*/
|
|
iconCls : 'ux-gridfilter-text-icon',
|
|
|
|
emptyText: 'Enter Filter Text...',
|
|
selectOnFocus: true,
|
|
width: 125,
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to initialize the filter and install required menu items.
|
|
*/
|
|
init : function (config) {
|
|
Ext.applyIf(config, {
|
|
enableKeyEvents: true,
|
|
iconCls: this.iconCls,
|
|
listeners: {
|
|
scope: this,
|
|
keyup: this.onInputKeyUp
|
|
}
|
|
});
|
|
|
|
this.inputItem = new Ext.form.TextField(config);
|
|
this.menu.add(this.inputItem);
|
|
this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to get and return the value of the filter.
|
|
* @return {String} The value of this filter
|
|
*/
|
|
getValue : function () {
|
|
return this.inputItem.getValue();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to set the value of the filter.
|
|
* @param {Object} value The value to set the filter
|
|
*/
|
|
setValue : function (value) {
|
|
this.inputItem.setValue(value);
|
|
this.fireEvent('update', this);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to return <tt>true</tt> if the filter
|
|
* has enough configuration information to be activated.
|
|
* @return {Boolean}
|
|
*/
|
|
isActivatable : function () {
|
|
return this.inputItem.getValue().length > 0;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Template method that is to get and return serialized filter data for
|
|
* transmission to the server.
|
|
* @return {Object/Array} An object or collection of objects containing
|
|
* key value pairs representing the current configuration of the filter.
|
|
*/
|
|
getSerialArgs : function () {
|
|
return {type: 'string', value: this.getValue()};
|
|
},
|
|
|
|
/**
|
|
* Template method that is to validate the provided Ext.data.Record
|
|
* against the filters configuration.
|
|
* @param {Ext.data.Record} record The record to validate
|
|
* @return {Boolean} true if the record is valid within the bounds
|
|
* of the filter, false otherwise.
|
|
*/
|
|
validateRecord : function (record) {
|
|
var val = record.get(this.dataIndex);
|
|
|
|
if(typeof val != 'string') {
|
|
return (this.getValue().length === 0);
|
|
}
|
|
|
|
return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handler method called when there is a keyup event on this.inputItem
|
|
*/
|
|
onInputKeyUp : function (field, e) {
|
|
var k = e.getKey();
|
|
if (k == e.RETURN && field.isValid()) {
|
|
e.stopEvent();
|
|
this.menu.hide(true);
|
|
return;
|
|
}
|
|
// restart the timer
|
|
this.updateTask.delay(this.updateBuffer);
|
|
}
|
|
});
|
|
Ext.namespace('Ext.ux.menu');
|
|
|
|
/**
|
|
* @class Ext.ux.menu.ListMenu
|
|
* @extends Ext.menu.Menu
|
|
* This is a supporting class for {@link Ext.ux.grid.filter.ListFilter}.
|
|
* Although not listed as configuration options for this class, this class
|
|
* also accepts all configuration options from {@link Ext.ux.grid.filter.ListFilter}.
|
|
*/
|
|
Ext.ux.menu.ListMenu = Ext.extend(Ext.menu.Menu, {
|
|
/**
|
|
* @cfg {String} labelField
|
|
* Defaults to 'text'.
|
|
*/
|
|
labelField : 'text',
|
|
/**
|
|
* @cfg {String} paramPrefix
|
|
* Defaults to 'Loading...'.
|
|
*/
|
|
loadingText : 'Loading...',
|
|
/**
|
|
* @cfg {Boolean} loadOnShow
|
|
* Defaults to true.
|
|
*/
|
|
loadOnShow : true,
|
|
/**
|
|
* @cfg {Boolean} single
|
|
* Specify true to group all items in this list into a single-select
|
|
* radio button group. Defaults to false.
|
|
*/
|
|
single : false,
|
|
|
|
constructor : function (cfg) {
|
|
this.selected = [];
|
|
this.addEvents(
|
|
/**
|
|
* @event checkchange
|
|
* Fires when there is a change in checked items from this list
|
|
* @param {Object} item Ext.menu.CheckItem
|
|
* @param {Object} checked The checked value that was set
|
|
*/
|
|
'checkchange'
|
|
);
|
|
|
|
Ext.ux.menu.ListMenu.superclass.constructor.call(this, cfg = cfg || {});
|
|
|
|
if(!cfg.store && cfg.options){
|
|
var options = [];
|
|
for(var i=0, len=cfg.options.length; i<len; i++){
|
|
var value = cfg.options[i];
|
|
switch(Ext.type(value)){
|
|
case 'array': options.push(value); break;
|
|
case 'object': options.push([value.id, value[this.labelField]]); break;
|
|
case 'string': options.push([value, value]); break;
|
|
}
|
|
}
|
|
|
|
this.store = new Ext.data.Store({
|
|
reader: new Ext.data.ArrayReader({id: 0}, ['id', this.labelField]),
|
|
data: options,
|
|
listeners: {
|
|
'load': this.onLoad,
|
|
scope: this
|
|
}
|
|
});
|
|
this.loaded = true;
|
|
} else {
|
|
this.add({text: this.loadingText, iconCls: 'loading-indicator'});
|
|
this.store.on('load', this.onLoad, this);
|
|
}
|
|
},
|
|
|
|
destroy : function () {
|
|
if (this.store) {
|
|
this.store.destroy();
|
|
}
|
|
Ext.ux.menu.ListMenu.superclass.destroy.call(this);
|
|
},
|
|
|
|
/**
|
|
* Lists will initially show a 'loading' item while the data is retrieved from the store.
|
|
* In some cases the loaded data will result in a list that goes off the screen to the
|
|
* right (as placement calculations were done with the loading item). This adapter will
|
|
* allow show to be called with no arguments to show with the previous arguments and
|
|
* thus recalculate the width and potentially hang the menu from the left.
|
|
*/
|
|
show : function () {
|
|
var lastArgs = null;
|
|
return function(){
|
|
if(arguments.length === 0){
|
|
Ext.ux.menu.ListMenu.superclass.show.apply(this, lastArgs);
|
|
} else {
|
|
lastArgs = arguments;
|
|
if (this.loadOnShow && !this.loaded) {
|
|
this.store.load();
|
|
}
|
|
Ext.ux.menu.ListMenu.superclass.show.apply(this, arguments);
|
|
}
|
|
};
|
|
}(),
|
|
|
|
/** @private */
|
|
onLoad : function (store, records) {
|
|
var visible = this.isVisible();
|
|
this.hide(false);
|
|
|
|
this.removeAll(true);
|
|
|
|
var gid = this.single ? Ext.id() : null;
|
|
for(var i=0, len=records.length; i<len; i++){
|
|
var item = new Ext.menu.CheckItem({
|
|
text: records[i].get(this.labelField),
|
|
group: gid,
|
|
checked: this.selected.indexOf(records[i].id) > -1,
|
|
hideOnClick: false});
|
|
|
|
item.itemId = records[i].id;
|
|
item.on('checkchange', this.checkChange, this);
|
|
|
|
this.add(item);
|
|
}
|
|
|
|
this.loaded = true;
|
|
|
|
if (visible) {
|
|
this.show();
|
|
}
|
|
this.fireEvent('load', this, records);
|
|
},
|
|
|
|
/**
|
|
* Get the selected items.
|
|
* @return {Array} selected
|
|
*/
|
|
getSelected : function () {
|
|
return this.selected;
|
|
},
|
|
|
|
/** @private */
|
|
setSelected : function (value) {
|
|
value = this.selected = [].concat(value);
|
|
|
|
if (this.loaded) {
|
|
this.items.each(function(item){
|
|
item.setChecked(false, true);
|
|
for (var i = 0, len = value.length; i < len; i++) {
|
|
if (item.itemId == value[i]) {
|
|
item.setChecked(true, true);
|
|
}
|
|
}
|
|
}, this);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handler for the 'checkchange' event from an check item in this menu
|
|
* @param {Object} item Ext.menu.CheckItem
|
|
* @param {Object} checked The checked value that was set
|
|
*/
|
|
checkChange : function (item, checked) {
|
|
var value = [];
|
|
this.items.each(function(item){
|
|
if (item.checked) {
|
|
value.push(item.itemId);
|
|
}
|
|
},this);
|
|
this.selected = value;
|
|
|
|
this.fireEvent('checkchange', item, checked);
|
|
}
|
|
});Ext.ns('Ext.ux.menu');
|
|
|
|
/**
|
|
* @class Ext.ux.menu.RangeMenu
|
|
* @extends Ext.menu.Menu
|
|
* Custom implementation of Ext.menu.Menu that has preconfigured
|
|
* items for gt, lt, eq.
|
|
* <p><b><u>Example Usage:</u></b></p>
|
|
* <pre><code>
|
|
|
|
* </code></pre>
|
|
*/
|
|
Ext.ux.menu.RangeMenu = Ext.extend(Ext.menu.Menu, {
|
|
|
|
constructor : function (config) {
|
|
|
|
Ext.ux.menu.RangeMenu.superclass.constructor.call(this, config);
|
|
|
|
this.addEvents(
|
|
/**
|
|
* @event update
|
|
* Fires when a filter configuration has changed
|
|
* @param {Ext.ux.grid.filter.Filter} this The filter object.
|
|
*/
|
|
'update'
|
|
);
|
|
|
|
this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
|
|
|
|
var i, len, item, cfg, Cls;
|
|
|
|
for (i = 0, len = this.menuItems.length; i < len; i++) {
|
|
item = this.menuItems[i];
|
|
if (item !== '-') {
|
|
// defaults
|
|
cfg = {
|
|
itemId: 'range-' + item,
|
|
enableKeyEvents: true,
|
|
iconCls: this.iconCls[item] || 'no-icon',
|
|
listeners: {
|
|
scope: this,
|
|
keyup: this.onInputKeyUp
|
|
}
|
|
};
|
|
Ext.apply(
|
|
cfg,
|
|
// custom configs
|
|
Ext.applyIf(this.fields[item] || {}, this.fieldCfg[item]),
|
|
// configurable defaults
|
|
this.menuItemCfgs
|
|
);
|
|
Cls = cfg.fieldCls || this.fieldCls;
|
|
item = this.fields[item] = new Cls(cfg);
|
|
}
|
|
this.add(item);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* called by this.updateTask
|
|
*/
|
|
fireUpdate : function () {
|
|
this.fireEvent('update', this);
|
|
},
|
|
|
|
/**
|
|
* Get and return the value of the filter.
|
|
* @return {String} The value of this filter
|
|
*/
|
|
getValue : function () {
|
|
var result = {}, key, field;
|
|
for (key in this.fields) {
|
|
field = this.fields[key];
|
|
if (field.isValid() && String(field.getValue()).length > 0) {
|
|
result[key] = field.getValue();
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Set the value of this menu and fires the 'update' event.
|
|
* @param {Object} data The data to assign to this menu
|
|
*/
|
|
setValue : function (data) {
|
|
var key;
|
|
for (key in this.fields) {
|
|
this.fields[key].setValue(data[key] !== undefined ? data[key] : '');
|
|
}
|
|
this.fireEvent('update', this);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handler method called when there is a keyup event on an input
|
|
* item of this menu.
|
|
*/
|
|
onInputKeyUp : function (field, e) {
|
|
var k = e.getKey();
|
|
if (k == e.RETURN && field.isValid()) {
|
|
e.stopEvent();
|
|
this.hide(true);
|
|
return;
|
|
}
|
|
|
|
if (field == this.fields.eq) {
|
|
if (this.fields.gt) {
|
|
this.fields.gt.setValue(null);
|
|
}
|
|
if (this.fields.lt) {
|
|
this.fields.lt.setValue(null);
|
|
}
|
|
}
|
|
else {
|
|
this.fields.eq.setValue(null);
|
|
}
|
|
|
|
// restart the timer
|
|
this.updateTask.delay(this.updateBuffer);
|
|
}
|
|
});
|
|
Ext.ns('Ext.ux.grid');
|
|
|
|
/**
|
|
* @class Ext.ux.grid.GroupSummary
|
|
* @extends Ext.util.Observable
|
|
* A GridPanel plugin that enables dynamic column calculations and a dynamically
|
|
* updated grouped summary row.
|
|
*/
|
|
Ext.ux.grid.GroupSummary = Ext.extend(Ext.util.Observable, {
|
|
/**
|
|
* @cfg {Function} summaryRenderer Renderer example:<pre><code>
|
|
summaryRenderer: function(v, params, data){
|
|
return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
|
|
},
|
|
* </code></pre>
|
|
*/
|
|
/**
|
|
* @cfg {String} summaryType (Optional) The type of
|
|
* calculation to be used for the column. For options available see
|
|
* {@link #Calculations}.
|
|
*/
|
|
|
|
constructor : function(config){
|
|
Ext.apply(this, config);
|
|
Ext.ux.grid.GroupSummary.superclass.constructor.call(this);
|
|
},
|
|
init : function(grid){
|
|
this.grid = grid;
|
|
var v = this.view = grid.getView();
|
|
v.doGroupEnd = this.doGroupEnd.createDelegate(this);
|
|
|
|
v.afterMethod('onColumnWidthUpdated', this.doWidth, this);
|
|
v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
|
|
v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
|
|
v.afterMethod('onUpdate', this.doUpdate, this);
|
|
v.afterMethod('onRemove', this.doRemove, this);
|
|
|
|
if(!this.rowTpl){
|
|
this.rowTpl = new Ext.Template(
|
|
'<div class="x-grid3-summary-row" style="{tstyle}">',
|
|
'<table class="x-grid3-summary-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
|
|
'<tbody><tr>{cells}</tr></tbody>',
|
|
'</table></div>'
|
|
);
|
|
this.rowTpl.disableFormats = true;
|
|
}
|
|
this.rowTpl.compile();
|
|
|
|
if(!this.cellTpl){
|
|
this.cellTpl = new Ext.Template(
|
|
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}">',
|
|
'<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on">{value}</div>',
|
|
"</td>"
|
|
);
|
|
this.cellTpl.disableFormats = true;
|
|
}
|
|
this.cellTpl.compile();
|
|
},
|
|
|
|
/**
|
|
* Toggle the display of the summary row on/off
|
|
* @param {Boolean} visible <tt>true</tt> to show the summary, <tt>false</tt> to hide the summary.
|
|
*/
|
|
toggleSummaries : function(visible){
|
|
var el = this.grid.getGridEl();
|
|
if(el){
|
|
if(visible === undefined){
|
|
visible = el.hasClass('x-grid-hide-summary');
|
|
}
|
|
el[visible ? 'removeClass' : 'addClass']('x-grid-hide-summary');
|
|
}
|
|
},
|
|
|
|
renderSummary : function(o, cs){
|
|
cs = cs || this.view.getColumnData();
|
|
var cfg = this.grid.getColumnModel().config,
|
|
buf = [], c, p = {}, cf, last = cs.length-1;
|
|
for(var i = 0, len = cs.length; i < len; i++){
|
|
c = cs[i];
|
|
cf = cfg[i];
|
|
p.id = c.id;
|
|
p.style = c.style;
|
|
p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
|
|
if(cf.summaryType || cf.summaryRenderer){
|
|
p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);
|
|
}else{
|
|
p.value = '';
|
|
}
|
|
if(p.value == undefined || p.value === "") p.value = " ";
|
|
buf[buf.length] = this.cellTpl.apply(p);
|
|
}
|
|
|
|
return this.rowTpl.apply({
|
|
tstyle: 'width:'+this.view.getTotalWidth()+';',
|
|
cells: buf.join('')
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {Object} rs
|
|
* @param {Object} cs
|
|
*/
|
|
calculate : function(rs, cs){
|
|
var data = {}, r, c, cfg = this.grid.getColumnModel().config, cf;
|
|
for(var j = 0, jlen = rs.length; j < jlen; j++){
|
|
r = rs[j];
|
|
for(var i = 0, len = cs.length; i < len; i++){
|
|
c = cs[i];
|
|
cf = cfg[i];
|
|
if(cf.summaryType){
|
|
data[c.name] = Ext.ux.grid.GroupSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);
|
|
}
|
|
}
|
|
}
|
|
return data;
|
|
},
|
|
|
|
doGroupEnd : function(buf, g, cs, ds, colCount){
|
|
var data = this.calculate(g.rs, cs);
|
|
buf.push('</div>', this.renderSummary({data: data}, cs), '</div>');
|
|
},
|
|
|
|
doWidth : function(col, w, tw){
|
|
var gs = this.view.getGroups(), s;
|
|
for(var i = 0, len = gs.length; i < len; i++){
|
|
s = gs[i].childNodes[2];
|
|
s.style.width = tw;
|
|
s.firstChild.style.width = tw;
|
|
s.firstChild.rows[0].childNodes[col].style.width = w;
|
|
}
|
|
},
|
|
|
|
doAllWidths : function(ws, tw){
|
|
var gs = this.view.getGroups(), s, cells, wlen = ws.length;
|
|
for(var i = 0, len = gs.length; i < len; i++){
|
|
s = gs[i].childNodes[2];
|
|
s.style.width = tw;
|
|
s.firstChild.style.width = tw;
|
|
cells = s.firstChild.rows[0].childNodes;
|
|
for(var j = 0; j < wlen; j++){
|
|
cells[j].style.width = ws[j];
|
|
}
|
|
}
|
|
},
|
|
|
|
doHidden : function(col, hidden, tw){
|
|
var gs = this.view.getGroups(), s, display = hidden ? 'none' : '';
|
|
for(var i = 0, len = gs.length; i < len; i++){
|
|
s = gs[i].childNodes[2];
|
|
s.style.width = tw;
|
|
s.firstChild.style.width = tw;
|
|
s.firstChild.rows[0].childNodes[col].style.display = display;
|
|
}
|
|
},
|
|
|
|
// Note: requires that all (or the first) record in the
|
|
// group share the same group value. Returns false if the group
|
|
// could not be found.
|
|
refreshSummary : function(groupValue){
|
|
return this.refreshSummaryById(this.view.getGroupId(groupValue));
|
|
},
|
|
|
|
getSummaryNode : function(gid){
|
|
var g = Ext.fly(gid, '_gsummary');
|
|
if(g){
|
|
return g.down('.x-grid3-summary-row', true);
|
|
}
|
|
return null;
|
|
},
|
|
|
|
refreshSummaryById : function(gid){
|
|
var g = Ext.getDom(gid);
|
|
if(!g){
|
|
return false;
|
|
}
|
|
var rs = [];
|
|
this.grid.getStore().each(function(r){
|
|
if(r._groupId == gid){
|
|
rs[rs.length] = r;
|
|
}
|
|
});
|
|
var cs = this.view.getColumnData(),
|
|
data = this.calculate(rs, cs),
|
|
markup = this.renderSummary({data: data}, cs),
|
|
existing = this.getSummaryNode(gid);
|
|
|
|
if(existing){
|
|
g.removeChild(existing);
|
|
}
|
|
Ext.DomHelper.append(g, markup);
|
|
return true;
|
|
},
|
|
|
|
doUpdate : function(ds, record){
|
|
this.refreshSummaryById(record._groupId);
|
|
},
|
|
|
|
doRemove : function(ds, record, index, isUpdate){
|
|
if(!isUpdate){
|
|
this.refreshSummaryById(record._groupId);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Show a message in the summary row.
|
|
* <pre><code>
|
|
grid.on('afteredit', function(){
|
|
var groupValue = 'Ext Forms: Field Anchoring';
|
|
summary.showSummaryMsg(groupValue, 'Updating Summary...');
|
|
});
|
|
* </code></pre>
|
|
* @param {String} groupValue
|
|
* @param {String} msg Text to use as innerHTML for the summary row.
|
|
*/
|
|
showSummaryMsg : function(groupValue, msg){
|
|
var gid = this.view.getGroupId(groupValue),
|
|
node = this.getSummaryNode(gid);
|
|
if(node){
|
|
node.innerHTML = '<div class="x-grid3-summary-msg">' + msg + '</div>';
|
|
}
|
|
}
|
|
});
|
|
|
|
//backwards compat
|
|
Ext.grid.GroupSummary = Ext.ux.grid.GroupSummary;
|
|
|
|
|
|
/**
|
|
* Calculation types for summary row:</p><div class="mdetail-params"><ul>
|
|
* <li><b><tt>sum</tt></b> : <div class="sub-desc"></div></li>
|
|
* <li><b><tt>count</tt></b> : <div class="sub-desc"></div></li>
|
|
* <li><b><tt>max</tt></b> : <div class="sub-desc"></div></li>
|
|
* <li><b><tt>min</tt></b> : <div class="sub-desc"></div></li>
|
|
* <li><b><tt>average</tt></b> : <div class="sub-desc"></div></li>
|
|
* </ul></div>
|
|
* <p>Custom calculations may be implemented. An example of
|
|
* custom <code>summaryType=totalCost</code>:</p><pre><code>
|
|
// define a custom summary function
|
|
Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
|
|
return v + (record.data.estimate * record.data.rate);
|
|
};
|
|
* </code></pre>
|
|
* @property Calculations
|
|
*/
|
|
|
|
Ext.ux.grid.GroupSummary.Calculations = {
|
|
'sum' : function(v, record, field){
|
|
return v + (record.data[field]||0);
|
|
},
|
|
|
|
'count' : function(v, record, field, data){
|
|
return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
|
|
},
|
|
|
|
'max' : function(v, record, field, data){
|
|
var v = record.data[field];
|
|
var max = data[field+'max'] === undefined ? (data[field+'max'] = v) : data[field+'max'];
|
|
return v > max ? (data[field+'max'] = v) : max;
|
|
},
|
|
|
|
'min' : function(v, record, field, data){
|
|
var v = record.data[field];
|
|
var min = data[field+'min'] === undefined ? (data[field+'min'] = v) : data[field+'min'];
|
|
return v < min ? (data[field+'min'] = v) : min;
|
|
},
|
|
|
|
'average' : function(v, record, field, data){
|
|
var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
|
|
var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));
|
|
return t === 0 ? 0 : t / c;
|
|
}
|
|
};
|
|
Ext.grid.GroupSummary.Calculations = Ext.ux.grid.GroupSummary.Calculations;
|
|
|
|
/**
|
|
* @class Ext.ux.grid.HybridSummary
|
|
* @extends Ext.ux.grid.GroupSummary
|
|
* Adds capability to specify the summary data for the group via json as illustrated here:
|
|
* <pre><code>
|
|
{
|
|
data: [
|
|
{
|
|
projectId: 100, project: 'House',
|
|
taskId: 112, description: 'Paint',
|
|
estimate: 6, rate: 150,
|
|
due:'06/24/2007'
|
|
},
|
|
...
|
|
],
|
|
|
|
summaryData: {
|
|
'House': {
|
|
description: 14, estimate: 9,
|
|
rate: 99, due: new Date(2009, 6, 29),
|
|
cost: 999
|
|
}
|
|
}
|
|
}
|
|
* </code></pre>
|
|
*
|
|
*/
|
|
Ext.ux.grid.HybridSummary = Ext.extend(Ext.ux.grid.GroupSummary, {
|
|
/**
|
|
* @private
|
|
* @param {Object} rs
|
|
* @param {Object} cs
|
|
*/
|
|
calculate : function(rs, cs){
|
|
var gcol = this.view.getGroupField(),
|
|
gvalue = rs[0].data[gcol],
|
|
gdata = this.getSummaryData(gvalue);
|
|
return gdata || Ext.ux.grid.HybridSummary.superclass.calculate.call(this, rs, cs);
|
|
},
|
|
|
|
/**
|
|
* <pre><code>
|
|
grid.on('afteredit', function(){
|
|
var groupValue = 'Ext Forms: Field Anchoring';
|
|
summary.showSummaryMsg(groupValue, 'Updating Summary...');
|
|
setTimeout(function(){ // simulate server call
|
|
// HybridSummary class implements updateSummaryData
|
|
summary.updateSummaryData(groupValue,
|
|
// create data object based on configured dataIndex
|
|
{description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});
|
|
}, 2000);
|
|
});
|
|
* </code></pre>
|
|
* @param {String} groupValue
|
|
* @param {Object} data data object
|
|
* @param {Boolean} skipRefresh (Optional) Defaults to false
|
|
*/
|
|
updateSummaryData : function(groupValue, data, skipRefresh){
|
|
var json = this.grid.getStore().reader.jsonData;
|
|
if(!json.summaryData){
|
|
json.summaryData = {};
|
|
}
|
|
json.summaryData[groupValue] = data;
|
|
if(!skipRefresh){
|
|
this.refreshSummary(groupValue);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the summaryData for the specified groupValue or null.
|
|
* @param {String} groupValue
|
|
* @return {Object} summaryData
|
|
*/
|
|
getSummaryData : function(groupValue){
|
|
var json = this.grid.getStore().reader.jsonData;
|
|
if(json && json.summaryData){
|
|
return json.summaryData[groupValue];
|
|
}
|
|
return null;
|
|
}
|
|
});
|
|
|
|
//backwards compat
|
|
Ext.grid.HybridSummary = Ext.ux.grid.HybridSummary;
|
|
Ext.ux.GroupTab = Ext.extend(Ext.Container, {
|
|
mainItem: 0,
|
|
|
|
expanded: true,
|
|
|
|
deferredRender: true,
|
|
|
|
activeTab: null,
|
|
|
|
idDelimiter: '__',
|
|
|
|
headerAsText: false,
|
|
|
|
frame: false,
|
|
|
|
hideBorders: true,
|
|
|
|
initComponent: function(config){
|
|
Ext.apply(this, config);
|
|
this.frame = false;
|
|
|
|
Ext.ux.GroupTab.superclass.initComponent.call(this);
|
|
|
|
this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');
|
|
|
|
this.setLayout(new Ext.layout.CardLayout({
|
|
deferredRender: this.deferredRender
|
|
}));
|
|
|
|
if (!this.stack) {
|
|
this.stack = Ext.TabPanel.AccessStack();
|
|
}
|
|
|
|
this.initItems();
|
|
|
|
this.on('beforerender', function(){
|
|
this.groupEl = this.ownerCt.getGroupEl(this);
|
|
}, this);
|
|
|
|
this.on('add', this.onAdd, this, {
|
|
target: this
|
|
});
|
|
this.on('remove', this.onRemove, this, {
|
|
target: this
|
|
});
|
|
|
|
if (this.mainItem !== undefined) {
|
|
var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);
|
|
delete this.mainItem;
|
|
this.setMainItem(item);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
|
|
* can return false to cancel the tab change.
|
|
* @param {String/Panel} tab The id or tab Panel to activate
|
|
*/
|
|
setActiveTab : function(item){
|
|
item = this.getComponent(item);
|
|
if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
|
|
return;
|
|
}
|
|
if(!this.rendered){
|
|
this.activeTab = item;
|
|
return;
|
|
}
|
|
if(this.activeTab != item){
|
|
if(this.activeTab && this.activeTab != this.mainItem){
|
|
var oldEl = this.getTabEl(this.activeTab);
|
|
if(oldEl){
|
|
Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
|
|
}
|
|
this.activeTab.fireEvent('deactivate', this.activeTab);
|
|
}
|
|
var el = this.getTabEl(item);
|
|
Ext.fly(el).addClass('x-grouptabs-strip-active');
|
|
this.activeTab = item;
|
|
this.stack.add(item);
|
|
|
|
this.layout.setActiveItem(item);
|
|
if(this.layoutOnTabChange && item.doLayout){
|
|
item.doLayout();
|
|
}
|
|
if(this.scrolling){
|
|
this.scrollToTab(item, this.animScroll);
|
|
}
|
|
|
|
item.fireEvent('activate', item);
|
|
this.fireEvent('tabchange', this, item);
|
|
}
|
|
},
|
|
|
|
getTabEl: function(item){
|
|
if (item == this.mainItem) {
|
|
return this.groupEl;
|
|
}
|
|
return Ext.TabPanel.prototype.getTabEl.call(this, item);
|
|
},
|
|
|
|
onRender: function(ct, position){
|
|
Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);
|
|
|
|
this.strip = Ext.fly(this.groupEl).createChild({
|
|
tag: 'ul',
|
|
cls: 'x-grouptabs-sub'
|
|
});
|
|
|
|
this.tooltip = new Ext.ToolTip({
|
|
target: this.groupEl,
|
|
delegate: 'a.x-grouptabs-text',
|
|
trackMouse: true,
|
|
renderTo: document.body,
|
|
listeners: {
|
|
beforeshow: function(tip) {
|
|
var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)
|
|
? this.mainItem
|
|
: this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);
|
|
|
|
if(!item.tabTip) {
|
|
return false;
|
|
}
|
|
tip.body.dom.innerHTML = item.tabTip;
|
|
},
|
|
scope: this
|
|
}
|
|
});
|
|
|
|
if (!this.itemTpl) {
|
|
var tt = new Ext.Template('<li class="{cls}" id="{id}">', '<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>', '</li>');
|
|
tt.disableFormats = true;
|
|
tt.compile();
|
|
Ext.ux.GroupTab.prototype.itemTpl = tt;
|
|
}
|
|
|
|
this.items.each(this.initTab, this);
|
|
},
|
|
|
|
afterRender: function(){
|
|
Ext.ux.GroupTab.superclass.afterRender.call(this);
|
|
|
|
if (this.activeTab !== undefined) {
|
|
var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);
|
|
delete this.activeTab;
|
|
this.setActiveTab(item);
|
|
}
|
|
},
|
|
|
|
// private
|
|
initTab: function(item, index){
|
|
var before = this.strip.dom.childNodes[index];
|
|
var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
|
|
|
|
if (item === this.mainItem) {
|
|
item.tabEl = this.groupEl;
|
|
p.cls += ' x-grouptabs-main-item';
|
|
}
|
|
|
|
var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);
|
|
|
|
item.tabEl = item.tabEl || el;
|
|
|
|
item.on('disable', this.onItemDisabled, this);
|
|
item.on('enable', this.onItemEnabled, this);
|
|
item.on('titlechange', this.onItemTitleChanged, this);
|
|
item.on('iconchange', this.onItemIconChanged, this);
|
|
item.on('beforeshow', this.onBeforeShowItem, this);
|
|
},
|
|
|
|
setMainItem: function(item){
|
|
item = this.getComponent(item);
|
|
if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {
|
|
return;
|
|
}
|
|
|
|
this.mainItem = item;
|
|
},
|
|
|
|
getMainItem: function(){
|
|
return this.mainItem || null;
|
|
},
|
|
|
|
// private
|
|
onBeforeShowItem: function(item){
|
|
if (item != this.activeTab) {
|
|
this.setActiveTab(item);
|
|
return false;
|
|
}
|
|
},
|
|
|
|
// private
|
|
onAdd: function(gt, item, index){
|
|
if (this.rendered) {
|
|
this.initTab.call(this, item, index);
|
|
}
|
|
},
|
|
|
|
// private
|
|
onRemove: function(tp, item){
|
|
Ext.destroy(Ext.get(this.getTabEl(item)));
|
|
this.stack.remove(item);
|
|
item.un('disable', this.onItemDisabled, this);
|
|
item.un('enable', this.onItemEnabled, this);
|
|
item.un('titlechange', this.onItemTitleChanged, this);
|
|
item.un('iconchange', this.onItemIconChanged, this);
|
|
item.un('beforeshow', this.onBeforeShowItem, this);
|
|
if (item == this.activeTab) {
|
|
var next = this.stack.next();
|
|
if (next) {
|
|
this.setActiveTab(next);
|
|
}
|
|
else if (this.items.getCount() > 0) {
|
|
this.setActiveTab(0);
|
|
}
|
|
else {
|
|
this.activeTab = null;
|
|
}
|
|
}
|
|
},
|
|
|
|
// private
|
|
onBeforeAdd: function(item){
|
|
var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
|
|
if (existing) {
|
|
this.setActiveTab(item);
|
|
return false;
|
|
}
|
|
Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
|
|
var es = item.elements;
|
|
item.elements = es ? es.replace(',header', '') : es;
|
|
item.border = (item.border === true);
|
|
},
|
|
|
|
// private
|
|
onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,
|
|
onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,
|
|
|
|
// private
|
|
onItemTitleChanged: function(item){
|
|
var el = this.getTabEl(item);
|
|
if (el) {
|
|
Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;
|
|
}
|
|
},
|
|
|
|
//private
|
|
onItemIconChanged: function(item, iconCls, oldCls){
|
|
var el = this.getTabEl(item);
|
|
if (el) {
|
|
Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);
|
|
}
|
|
},
|
|
|
|
beforeDestroy: function(){
|
|
Ext.TabPanel.prototype.beforeDestroy.call(this);
|
|
this.tooltip.destroy();
|
|
}
|
|
});
|
|
|
|
Ext.reg('grouptab', Ext.ux.GroupTab);
|
|
Ext.ns('Ext.ux');
|
|
|
|
Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
|
|
tabPosition: 'left',
|
|
|
|
alternateColor: false,
|
|
|
|
alternateCls: 'x-grouptabs-panel-alt',
|
|
|
|
defaultType: 'grouptab',
|
|
|
|
deferredRender: false,
|
|
|
|
activeGroup : null,
|
|
|
|
initComponent: function(){
|
|
Ext.ux.GroupTabPanel.superclass.initComponent.call(this);
|
|
|
|
this.addEvents(
|
|
'beforegroupchange',
|
|
'groupchange'
|
|
);
|
|
this.elements = 'body,header';
|
|
this.stripTarget = 'header';
|
|
|
|
this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';
|
|
|
|
this.addClass('x-grouptabs-panel');
|
|
|
|
if (this.tabStyle && this.tabStyle != '') {
|
|
this.addClass('x-grouptabs-panel-' + this.tabStyle);
|
|
}
|
|
|
|
if (this.alternateColor) {
|
|
this.addClass(this.alternateCls);
|
|
}
|
|
|
|
this.on('beforeadd', function(gtp, item, index){
|
|
this.initGroup(item, index);
|
|
});
|
|
},
|
|
|
|
initEvents : function() {
|
|
this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
|
|
},
|
|
|
|
onRender: function(ct, position){
|
|
Ext.TabPanel.superclass.onRender.call(this, ct, position);
|
|
if(this.plain){
|
|
var pos = this.tabPosition == 'top' ? 'header' : 'footer';
|
|
this[pos].addClass('x-tab-panel-'+pos+'-plain');
|
|
}
|
|
|
|
var st = this[this.stripTarget];
|
|
|
|
this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{
|
|
tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});
|
|
|
|
var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
|
|
this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
|
|
|
|
this.header.addClass('x-grouptabs-panel-header');
|
|
this.bwrap.addClass('x-grouptabs-bwrap');
|
|
this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');
|
|
|
|
if (!this.groupTpl) {
|
|
var tt = new Ext.Template(
|
|
'<li class="{cls}" id="{id}">',
|
|
'<a class="x-grouptabs-expand" onclick="return false;"></a>',
|
|
'<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',
|
|
'<span>{text}</span></a>',
|
|
'</li>'
|
|
);
|
|
tt.disableFormats = true;
|
|
tt.compile();
|
|
Ext.ux.GroupTabPanel.prototype.groupTpl = tt;
|
|
}
|
|
this.items.each(this.initGroup, this);
|
|
},
|
|
|
|
afterRender: function(){
|
|
Ext.ux.GroupTabPanel.superclass.afterRender.call(this);
|
|
|
|
this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({
|
|
cls: 'x-tab-joint'
|
|
});
|
|
|
|
this.addClass('x-tab-panel-' + this.tabPosition);
|
|
this.header.setWidth(this.tabWidth);
|
|
|
|
if (this.activeGroup !== undefined) {
|
|
var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);
|
|
delete this.activeGroup;
|
|
this.setActiveGroup(group);
|
|
group.setActiveTab(group.getMainItem());
|
|
}
|
|
},
|
|
|
|
getGroupEl : Ext.TabPanel.prototype.getTabEl,
|
|
|
|
// private
|
|
findTargets: function(e){
|
|
var item = null,
|
|
itemEl = e.getTarget('li', this.strip);
|
|
if (itemEl) {
|
|
item = this.findById(itemEl.id.split(this.idDelimiter)[1]);
|
|
if (item.disabled) {
|
|
return {
|
|
expand: null,
|
|
item: null,
|
|
el: null
|
|
};
|
|
}
|
|
}
|
|
return {
|
|
expand: e.getTarget('.x-grouptabs-expand', this.strip),
|
|
isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),
|
|
item: item,
|
|
el: itemEl
|
|
};
|
|
},
|
|
|
|
// private
|
|
onStripMouseDown: function(e){
|
|
if (e.button != 0) {
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
var t = this.findTargets(e);
|
|
if (t.expand) {
|
|
this.toggleGroup(t.el);
|
|
}
|
|
else if (t.item) {
|
|
if(t.isGroup) {
|
|
t.item.setActiveTab(t.item.getMainItem());
|
|
}
|
|
else {
|
|
t.item.ownerCt.setActiveTab(t.item);
|
|
}
|
|
}
|
|
},
|
|
|
|
expandGroup: function(groupEl){
|
|
if(groupEl.isXType) {
|
|
groupEl = this.getGroupEl(groupEl);
|
|
}
|
|
Ext.fly(groupEl).addClass('x-grouptabs-expanded');
|
|
},
|
|
|
|
toggleGroup: function(groupEl){
|
|
if(groupEl.isXType) {
|
|
groupEl = this.getGroupEl(groupEl);
|
|
}
|
|
Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');
|
|
this.syncTabJoint();
|
|
},
|
|
|
|
syncTabJoint: function(groupEl){
|
|
if (!this.tabJoint) {
|
|
return;
|
|
}
|
|
|
|
groupEl = groupEl || this.getGroupEl(this.activeGroup);
|
|
if(groupEl) {
|
|
this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2);
|
|
|
|
var y = Ext.isGecko2 ? 0 : 1;
|
|
if (this.tabPosition == 'left'){
|
|
this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);
|
|
}
|
|
else {
|
|
this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);
|
|
}
|
|
}
|
|
else {
|
|
this.tabJoint.hide();
|
|
}
|
|
},
|
|
|
|
getActiveTab : function() {
|
|
if(!this.activeGroup) return null;
|
|
return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null;
|
|
},
|
|
|
|
onResize: function(){
|
|
Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);
|
|
this.syncTabJoint();
|
|
},
|
|
|
|
createCorner: function(el, pos){
|
|
return Ext.fly(el).createChild({
|
|
cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos
|
|
});
|
|
},
|
|
|
|
initGroup: function(group, index){
|
|
var before = this.strip.dom.childNodes[index],
|
|
p = this.getTemplateArgs(group);
|
|
if (index === 0) {
|
|
p.cls += ' x-tab-first';
|
|
}
|
|
p.cls += ' x-grouptabs-main';
|
|
p.text = group.getMainItem().title;
|
|
|
|
var el = before ? this.groupTpl.insertBefore(before, p) : this.groupTpl.append(this.strip, p),
|
|
tl = this.createCorner(el, 'top-' + this.tabPosition),
|
|
bl = this.createCorner(el, 'bottom-' + this.tabPosition);
|
|
|
|
if (group.expanded) {
|
|
this.expandGroup(el);
|
|
}
|
|
|
|
if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){
|
|
bl.setLeft('-10px');
|
|
bl.setBottom('-5px');
|
|
tl.setLeft('-10px');
|
|
tl.setTop('-5px');
|
|
}
|
|
|
|
this.mon(group, {
|
|
scope: this,
|
|
changemainitem: this.onGroupChangeMainItem,
|
|
beforetabchange: this.onGroupBeforeTabChange
|
|
});
|
|
},
|
|
|
|
setActiveGroup : function(group) {
|
|
group = this.getComponent(group);
|
|
if(!group || this.fireEvent('beforegroupchange', this, group, this.activeGroup) === false){
|
|
return;
|
|
}
|
|
if(!this.rendered){
|
|
this.activeGroup = group;
|
|
return;
|
|
}
|
|
if(this.activeGroup != group){
|
|
if(this.activeGroup){
|
|
var oldEl = this.getGroupEl(this.activeGroup);
|
|
if(oldEl){
|
|
Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
|
|
}
|
|
this.activeGroup.fireEvent('deactivate', this.activeGroup);
|
|
}
|
|
|
|
var groupEl = this.getGroupEl(group);
|
|
Ext.fly(groupEl).addClass('x-grouptabs-strip-active');
|
|
|
|
this.activeGroup = group;
|
|
this.stack.add(group);
|
|
|
|
this.layout.setActiveItem(group);
|
|
this.syncTabJoint(groupEl);
|
|
|
|
group.fireEvent('activate', group);
|
|
this.fireEvent('groupchange', this, group);
|
|
}
|
|
},
|
|
|
|
onGroupBeforeTabChange: function(group, newTab, oldTab){
|
|
if(group !== this.activeGroup || newTab !== oldTab) {
|
|
this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');
|
|
}
|
|
|
|
this.expandGroup(this.getGroupEl(group));
|
|
this.setActiveGroup(group);
|
|
},
|
|
|
|
getFrameHeight: function(){
|
|
var h = this.el.getFrameWidth('tb');
|
|
h += (this.tbar ? this.tbar.getHeight() : 0) +
|
|
(this.bbar ? this.bbar.getHeight() : 0);
|
|
|
|
return h;
|
|
},
|
|
|
|
adjustBodyWidth: function(w){
|
|
return w - this.tabWidth;
|
|
}
|
|
});
|
|
|
|
Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);/*
|
|
* Note that this control will most likely remain as an example, and not as a core Ext form
|
|
* control. However, the API will be changing in a future release and so should not yet be
|
|
* treated as a final, stable API at this time.
|
|
*/
|
|
|
|
/**
|
|
* @class Ext.ux.form.ItemSelector
|
|
* @extends Ext.form.Field
|
|
* A control that allows selection of between two Ext.ux.form.MultiSelect controls.
|
|
*
|
|
* @history
|
|
* 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
|
|
*
|
|
* @constructor
|
|
* Create a new ItemSelector
|
|
* @param {Object} config Configuration options
|
|
* @xtype itemselector
|
|
*/
|
|
Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field, {
|
|
hideNavIcons:false,
|
|
imagePath:"",
|
|
iconUp:"up2.gif",
|
|
iconDown:"down2.gif",
|
|
iconLeft:"left2.gif",
|
|
iconRight:"right2.gif",
|
|
iconTop:"top2.gif",
|
|
iconBottom:"bottom2.gif",
|
|
drawUpIcon:true,
|
|
drawDownIcon:true,
|
|
drawLeftIcon:true,
|
|
drawRightIcon:true,
|
|
drawTopIcon:true,
|
|
drawBotIcon:true,
|
|
delimiter:',',
|
|
bodyStyle:null,
|
|
border:false,
|
|
defaultAutoCreate:{tag: "div"},
|
|
/**
|
|
* @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
|
|
*/
|
|
multiselects:null,
|
|
|
|
initComponent: function(){
|
|
Ext.ux.form.ItemSelector.superclass.initComponent.call(this);
|
|
this.addEvents({
|
|
'rowdblclick' : true,
|
|
'change' : true
|
|
});
|
|
},
|
|
|
|
onRender: function(ct, position){
|
|
Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);
|
|
|
|
// Internal default configuration for both multiselects
|
|
var msConfig = [{
|
|
legend: 'Available',
|
|
draggable: true,
|
|
droppable: true,
|
|
width: 100,
|
|
height: 100
|
|
},{
|
|
legend: 'Selected',
|
|
droppable: true,
|
|
draggable: true,
|
|
width: 100,
|
|
height: 100
|
|
}];
|
|
|
|
this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));
|
|
this.fromMultiselect.on('dblclick', this.onRowDblClick, this);
|
|
|
|
this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));
|
|
this.toMultiselect.on('dblclick', this.onRowDblClick, this);
|
|
|
|
var p = new Ext.Panel({
|
|
bodyStyle:this.bodyStyle,
|
|
border:this.border,
|
|
layout:"table",
|
|
layoutConfig:{columns:3}
|
|
});
|
|
|
|
p.add(this.fromMultiselect);
|
|
var icons = new Ext.Panel({header:false});
|
|
p.add(icons);
|
|
p.add(this.toMultiselect);
|
|
p.render(this.el);
|
|
icons.el.down('.'+icons.bwrapCls).remove();
|
|
|
|
// ICON HELL!!!
|
|
if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
|
|
this.imagePath+="/";
|
|
this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
|
|
this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
|
|
this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
|
|
this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
|
|
this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
|
|
this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
|
|
var el=icons.getEl();
|
|
this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
|
|
el.createChild({tag: 'br'});
|
|
this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
|
|
el.createChild({tag: 'br'});
|
|
this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
|
|
el.createChild({tag: 'br'});
|
|
this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
|
|
el.createChild({tag: 'br'});
|
|
this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
|
|
el.createChild({tag: 'br'});
|
|
this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
|
|
this.toTopIcon.on('click', this.toTop, this);
|
|
this.upIcon.on('click', this.up, this);
|
|
this.downIcon.on('click', this.down, this);
|
|
this.toBottomIcon.on('click', this.toBottom, this);
|
|
this.addIcon.on('click', this.fromTo, this);
|
|
this.removeIcon.on('click', this.toFrom, this);
|
|
if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
|
|
if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
|
|
if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
|
|
if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
|
|
if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
|
|
if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }
|
|
|
|
var tb = p.body.first();
|
|
this.el.setWidth(p.body.first().getWidth());
|
|
p.body.removeClass();
|
|
|
|
this.hiddenName = this.name;
|
|
var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
|
|
this.hiddenField = this.el.createChild(hiddenTag);
|
|
},
|
|
|
|
doLayout: function(){
|
|
if(this.rendered){
|
|
this.fromMultiselect.fs.doLayout();
|
|
this.toMultiselect.fs.doLayout();
|
|
}
|
|
},
|
|
|
|
afterRender: function(){
|
|
Ext.ux.form.ItemSelector.superclass.afterRender.call(this);
|
|
|
|
this.toStore = this.toMultiselect.store;
|
|
this.toStore.on('add', this.valueChanged, this);
|
|
this.toStore.on('remove', this.valueChanged, this);
|
|
this.toStore.on('load', this.valueChanged, this);
|
|
this.valueChanged(this.toStore);
|
|
},
|
|
|
|
toTop : function() {
|
|
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
|
|
var records = [];
|
|
if (selectionsArray.length > 0) {
|
|
selectionsArray.sort();
|
|
for (var i=0; i<selectionsArray.length; i++) {
|
|
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
|
|
records.push(record);
|
|
}
|
|
selectionsArray = [];
|
|
for (var i=records.length-1; i>-1; i--) {
|
|
record = records[i];
|
|
this.toMultiselect.view.store.remove(record);
|
|
this.toMultiselect.view.store.insert(0, record);
|
|
selectionsArray.push(((records.length - 1) - i));
|
|
}
|
|
}
|
|
this.toMultiselect.view.refresh();
|
|
this.toMultiselect.view.select(selectionsArray);
|
|
},
|
|
|
|
toBottom : function() {
|
|
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
|
|
var records = [];
|
|
if (selectionsArray.length > 0) {
|
|
selectionsArray.sort();
|
|
for (var i=0; i<selectionsArray.length; i++) {
|
|
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
|
|
records.push(record);
|
|
}
|
|
selectionsArray = [];
|
|
for (var i=0; i<records.length; i++) {
|
|
record = records[i];
|
|
this.toMultiselect.view.store.remove(record);
|
|
this.toMultiselect.view.store.add(record);
|
|
selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));
|
|
}
|
|
}
|
|
this.toMultiselect.view.refresh();
|
|
this.toMultiselect.view.select(selectionsArray);
|
|
},
|
|
|
|
up : function() {
|
|
var record = null;
|
|
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
|
|
selectionsArray.sort();
|
|
var newSelectionsArray = [];
|
|
if (selectionsArray.length > 0) {
|
|
for (var i=0; i<selectionsArray.length; i++) {
|
|
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
|
|
if ((selectionsArray[i] - 1) >= 0) {
|
|
this.toMultiselect.view.store.remove(record);
|
|
this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
|
|
newSelectionsArray.push(selectionsArray[i] - 1);
|
|
}
|
|
}
|
|
this.toMultiselect.view.refresh();
|
|
this.toMultiselect.view.select(newSelectionsArray);
|
|
}
|
|
},
|
|
|
|
down : function() {
|
|
var record = null;
|
|
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
|
|
selectionsArray.sort();
|
|
selectionsArray.reverse();
|
|
var newSelectionsArray = [];
|
|
if (selectionsArray.length > 0) {
|
|
for (var i=0; i<selectionsArray.length; i++) {
|
|
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
|
|
if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {
|
|
this.toMultiselect.view.store.remove(record);
|
|
this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);
|
|
newSelectionsArray.push(selectionsArray[i] + 1);
|
|
}
|
|
}
|
|
this.toMultiselect.view.refresh();
|
|
this.toMultiselect.view.select(newSelectionsArray);
|
|
}
|
|
},
|
|
|
|
fromTo : function() {
|
|
var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();
|
|
var records = [];
|
|
if (selectionsArray.length > 0) {
|
|
for (var i=0; i<selectionsArray.length; i++) {
|
|
record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);
|
|
records.push(record);
|
|
}
|
|
if(!this.allowDup)selectionsArray = [];
|
|
for (var i=0; i<records.length; i++) {
|
|
record = records[i];
|
|
if(this.allowDup){
|
|
var x=new Ext.data.Record();
|
|
record.id=x.id;
|
|
delete x;
|
|
this.toMultiselect.view.store.add(record);
|
|
}else{
|
|
this.fromMultiselect.view.store.remove(record);
|
|
this.toMultiselect.view.store.add(record);
|
|
selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
|
|
}
|
|
}
|
|
}
|
|
this.toMultiselect.view.refresh();
|
|
this.fromMultiselect.view.refresh();
|
|
var si = this.toMultiselect.store.sortInfo;
|
|
if(si){
|
|
this.toMultiselect.store.sort(si.field, si.direction);
|
|
}
|
|
this.toMultiselect.view.select(selectionsArray);
|
|
},
|
|
|
|
toFrom : function() {
|
|
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
|
|
var records = [];
|
|
if (selectionsArray.length > 0) {
|
|
for (var i=0; i<selectionsArray.length; i++) {
|
|
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
|
|
records.push(record);
|
|
}
|
|
selectionsArray = [];
|
|
for (var i=0; i<records.length; i++) {
|
|
record = records[i];
|
|
this.toMultiselect.view.store.remove(record);
|
|
if(!this.allowDup){
|
|
this.fromMultiselect.view.store.add(record);
|
|
selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
|
|
}
|
|
}
|
|
}
|
|
this.fromMultiselect.view.refresh();
|
|
this.toMultiselect.view.refresh();
|
|
var si = this.fromMultiselect.store.sortInfo;
|
|
if (si){
|
|
this.fromMultiselect.store.sort(si.field, si.direction);
|
|
}
|
|
this.fromMultiselect.view.select(selectionsArray);
|
|
},
|
|
|
|
valueChanged: function(store) {
|
|
var record = null;
|
|
var values = [];
|
|
for (var i=0; i<store.getCount(); i++) {
|
|
record = store.getAt(i);
|
|
values.push(record.get(this.toMultiselect.valueField));
|
|
}
|
|
this.hiddenField.dom.value = values.join(this.delimiter);
|
|
this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
|
|
},
|
|
|
|
getValue : function() {
|
|
return this.hiddenField.dom.value;
|
|
},
|
|
|
|
onRowDblClick : function(vw, index, node, e) {
|
|
if (vw == this.toMultiselect.view){
|
|
this.toFrom();
|
|
} else if (vw == this.fromMultiselect.view) {
|
|
this.fromTo();
|
|
}
|
|
return this.fireEvent('rowdblclick', vw, index, node, e);
|
|
},
|
|
|
|
reset: function(){
|
|
range = this.toMultiselect.store.getRange();
|
|
this.toMultiselect.store.removeAll();
|
|
this.fromMultiselect.store.add(range);
|
|
var si = this.fromMultiselect.store.sortInfo;
|
|
if (si){
|
|
this.fromMultiselect.store.sort(si.field, si.direction);
|
|
}
|
|
this.valueChanged(this.toMultiselect.store);
|
|
}
|
|
});
|
|
|
|
Ext.reg('itemselector', Ext.ux.form.ItemSelector);
|
|
|
|
//backwards compat
|
|
Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;
|
|
Ext.ns('Ext.ux.form');
|
|
|
|
/**
|
|
* @class Ext.ux.form.MultiSelect
|
|
* @extends Ext.form.Field
|
|
* A control that allows selection and form submission of multiple list items.
|
|
*
|
|
* @history
|
|
* 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
|
|
* 2008-06-19 bpm Docs and demo code clean up
|
|
*
|
|
* @constructor
|
|
* Create a new MultiSelect
|
|
* @param {Object} config Configuration options
|
|
* @xtype multiselect
|
|
*/
|
|
Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field, {
|
|
/**
|
|
* @cfg {String} legend Wraps the object with a fieldset and specified legend.
|
|
*/
|
|
/**
|
|
* @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.
|
|
*/
|
|
/**
|
|
* @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).
|
|
*/
|
|
/**
|
|
* @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).
|
|
*/
|
|
ddReorder:false,
|
|
/**
|
|
* @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a
|
|
* toolbar config, or an array of buttons/button configs to be added to the toolbar.
|
|
*/
|
|
/**
|
|
* @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled
|
|
* (use for lists which are sorted, defaults to false).
|
|
*/
|
|
appendOnly:false,
|
|
/**
|
|
* @cfg {Number} width Width in pixels of the control (defaults to 100).
|
|
*/
|
|
width:100,
|
|
/**
|
|
* @cfg {Number} height Height in pixels of the control (defaults to 100).
|
|
*/
|
|
height:100,
|
|
/**
|
|
* @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).
|
|
*/
|
|
displayField:0,
|
|
/**
|
|
* @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).
|
|
*/
|
|
valueField:1,
|
|
/**
|
|
* @cfg {Boolean} allowBlank False to require at least one item in the list to be selected, true to allow no
|
|
* selection (defaults to true).
|
|
*/
|
|
allowBlank:true,
|
|
/**
|
|
* @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).
|
|
*/
|
|
minSelections:0,
|
|
/**
|
|
* @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).
|
|
*/
|
|
maxSelections:Number.MAX_VALUE,
|
|
/**
|
|
* @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as
|
|
* {@link Ext.form.TextField#blankText}.
|
|
*/
|
|
blankText:Ext.form.TextField.prototype.blankText,
|
|
/**
|
|
* @cfg {String} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}
|
|
* item(s) required'). The {0} token will be replaced by the value of {@link #minSelections}.
|
|
*/
|
|
minSelectionsText:'Minimum {0} item(s) required',
|
|
/**
|
|
* @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}
|
|
* item(s) allowed'). The {0} token will be replaced by the value of {@link #maxSelections}.
|
|
*/
|
|
maxSelectionsText:'Maximum {0} item(s) allowed',
|
|
/**
|
|
* @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values
|
|
* (defaults to ',').
|
|
*/
|
|
delimiter:',',
|
|
/**
|
|
* @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect is bound (defaults to <tt>undefined</tt>).
|
|
* Acceptable values for this property are:
|
|
* <div class="mdetail-params"><ul>
|
|
* <li><b>any {@link Ext.data.Store Store} subclass</b></li>
|
|
* <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.
|
|
* <div class="mdetail-params"><ul>
|
|
* <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">
|
|
* A 1-dimensional array will automatically be expanded (each array item will be the combo
|
|
* {@link #valueField value} and {@link #displayField text})</div></li>
|
|
* <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">
|
|
* For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo
|
|
* {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.
|
|
* </div></li></ul></div></li></ul></div>
|
|
*/
|
|
|
|
// private
|
|
defaultAutoCreate : {tag: "div"},
|
|
|
|
// private
|
|
initComponent: function(){
|
|
Ext.ux.form.MultiSelect.superclass.initComponent.call(this);
|
|
|
|
if(Ext.isArray(this.store)){
|
|
if (Ext.isArray(this.store[0])){
|
|
this.store = new Ext.data.ArrayStore({
|
|
fields: ['value','text'],
|
|
data: this.store
|
|
});
|
|
this.valueField = 'value';
|
|
}else{
|
|
this.store = new Ext.data.ArrayStore({
|
|
fields: ['text'],
|
|
data: this.store,
|
|
expandData: true
|
|
});
|
|
this.valueField = 'text';
|
|
}
|
|
this.displayField = 'text';
|
|
} else {
|
|
this.store = Ext.StoreMgr.lookup(this.store);
|
|
}
|
|
|
|
this.addEvents({
|
|
'dblclick' : true,
|
|
'click' : true,
|
|
'change' : true,
|
|
'drop' : true
|
|
});
|
|
},
|
|
|
|
// private
|
|
onRender: function(ct, position){
|
|
Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);
|
|
|
|
var fs = this.fs = new Ext.form.FieldSet({
|
|
renderTo: this.el,
|
|
title: this.legend,
|
|
height: this.height,
|
|
width: this.width,
|
|
style: "padding:0;",
|
|
tbar: this.tbar
|
|
});
|
|
fs.body.addClass('ux-mselect');
|
|
|
|
this.view = new Ext.ListView({
|
|
multiSelect: true,
|
|
store: this.store,
|
|
columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],
|
|
hideHeaders: true
|
|
});
|
|
|
|
fs.add(this.view);
|
|
|
|
this.view.on('click', this.onViewClick, this);
|
|
this.view.on('beforeclick', this.onViewBeforeClick, this);
|
|
this.view.on('dblclick', this.onViewDblClick, this);
|
|
|
|
this.hiddenName = this.name || Ext.id();
|
|
var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };
|
|
this.hiddenField = this.el.createChild(hiddenTag);
|
|
this.hiddenField.dom.disabled = this.hiddenName != this.name;
|
|
fs.doLayout();
|
|
},
|
|
|
|
// private
|
|
afterRender: function(){
|
|
Ext.ux.form.MultiSelect.superclass.afterRender.call(this);
|
|
|
|
if (this.ddReorder && !this.dragGroup && !this.dropGroup){
|
|
this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();
|
|
}
|
|
|
|
if (this.draggable || this.dragGroup){
|
|
this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {
|
|
ddGroup: this.dragGroup
|
|
});
|
|
}
|
|
if (this.droppable || this.dropGroup){
|
|
this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {
|
|
ddGroup: this.dropGroup
|
|
});
|
|
}
|
|
},
|
|
|
|
// private
|
|
onViewClick: function(vw, index, node, e) {
|
|
this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
|
|
this.hiddenField.dom.value = this.getValue();
|
|
this.fireEvent('click', this, e);
|
|
this.validate();
|
|
},
|
|
|
|
// private
|
|
onViewBeforeClick: function(vw, index, node, e) {
|
|
if (this.disabled) {return false;}
|
|
},
|
|
|
|
// private
|
|
onViewDblClick : function(vw, index, node, e) {
|
|
return this.fireEvent('dblclick', vw, index, node, e);
|
|
},
|
|
|
|
/**
|
|
* Returns an array of data values for the selected items in the list. The values will be separated
|
|
* by {@link #delimiter}.
|
|
* @return {Array} value An array of string data values
|
|
*/
|
|
getValue: function(valueField){
|
|
var returnArray = [];
|
|
var selectionsArray = this.view.getSelectedIndexes();
|
|
if (selectionsArray.length == 0) {return '';}
|
|
for (var i=0; i<selectionsArray.length; i++) {
|
|
returnArray.push(this.store.getAt(selectionsArray[i]).get((valueField != null) ? valueField : this.valueField));
|
|
}
|
|
return returnArray.join(this.delimiter);
|
|
},
|
|
|
|
/**
|
|
* Sets a delimited string (using {@link #delimiter}) or array of data values into the list.
|
|
* @param {String/Array} values The values to set
|
|
*/
|
|
setValue: function(values) {
|
|
var index;
|
|
var selections = [];
|
|
this.view.clearSelections();
|
|
this.hiddenField.dom.value = '';
|
|
|
|
if (!values || (values == '')) { return; }
|
|
|
|
if (!Ext.isArray(values)) { values = values.split(this.delimiter); }
|
|
for (var i=0; i<values.length; i++) {
|
|
index = this.view.store.indexOf(this.view.store.query(this.valueField,
|
|
new RegExp('^' + values[i] + '$', "i")).itemAt(0));
|
|
selections.push(index);
|
|
}
|
|
this.view.select(selections);
|
|
this.hiddenField.dom.value = this.getValue();
|
|
this.validate();
|
|
},
|
|
|
|
// inherit docs
|
|
reset : function() {
|
|
this.setValue('');
|
|
},
|
|
|
|
// inherit docs
|
|
getRawValue: function(valueField) {
|
|
var tmp = this.getValue(valueField);
|
|
if (tmp.length) {
|
|
tmp = tmp.split(this.delimiter);
|
|
}
|
|
else {
|
|
tmp = [];
|
|
}
|
|
return tmp;
|
|
},
|
|
|
|
// inherit docs
|
|
setRawValue: function(values){
|
|
setValue(values);
|
|
},
|
|
|
|
// inherit docs
|
|
validateValue : function(value){
|
|
if (value.length < 1) { // if it has no value
|
|
if (this.allowBlank) {
|
|
this.clearInvalid();
|
|
return true;
|
|
} else {
|
|
this.markInvalid(this.blankText);
|
|
return false;
|
|
}
|
|
}
|
|
if (value.length < this.minSelections) {
|
|
this.markInvalid(String.format(this.minSelectionsText, this.minSelections));
|
|
return false;
|
|
}
|
|
if (value.length > this.maxSelections) {
|
|
this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
|
|
// inherit docs
|
|
disable: function(){
|
|
this.disabled = true;
|
|
this.hiddenField.dom.disabled = true;
|
|
this.fs.disable();
|
|
},
|
|
|
|
// inherit docs
|
|
enable: function(){
|
|
this.disabled = false;
|
|
this.hiddenField.dom.disabled = false;
|
|
this.fs.enable();
|
|
},
|
|
|
|
// inherit docs
|
|
destroy: function(){
|
|
Ext.destroy(this.fs, this.dragZone, this.dropZone);
|
|
Ext.ux.form.MultiSelect.superclass.destroy.call(this);
|
|
}
|
|
});
|
|
|
|
|
|
Ext.reg('multiselect', Ext.ux.form.MultiSelect);
|
|
|
|
//backwards compat
|
|
Ext.ux.Multiselect = Ext.ux.form.MultiSelect;
|
|
|
|
|
|
Ext.ux.form.MultiSelect.DragZone = function(ms, config){
|
|
this.ms = ms;
|
|
this.view = ms.view;
|
|
var ddGroup = config.ddGroup || 'MultiselectDD';
|
|
var dd;
|
|
if (Ext.isArray(ddGroup)){
|
|
dd = ddGroup.shift();
|
|
} else {
|
|
dd = ddGroup;
|
|
ddGroup = null;
|
|
}
|
|
Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
|
|
this.setDraggable(ddGroup);
|
|
};
|
|
|
|
Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {
|
|
onInitDrag : function(x, y){
|
|
var el = Ext.get(this.dragData.ddel.cloneNode(true));
|
|
this.proxy.update(el.dom);
|
|
el.setWidth(el.child('em').getWidth());
|
|
this.onStartDrag(x, y);
|
|
return true;
|
|
},
|
|
|
|
// private
|
|
collectSelection: function(data) {
|
|
data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();
|
|
var i = 0;
|
|
this.view.store.each(function(rec){
|
|
if (this.view.isSelected(i)) {
|
|
var n = this.view.getNode(i);
|
|
var dragNode = n.cloneNode(true);
|
|
dragNode.id = Ext.id();
|
|
data.ddel.appendChild(dragNode);
|
|
data.records.push(this.view.store.getAt(i));
|
|
data.viewNodes.push(n);
|
|
}
|
|
i++;
|
|
}, this);
|
|
},
|
|
|
|
// override
|
|
onEndDrag: function(data, e) {
|
|
var d = Ext.get(this.dragData.ddel);
|
|
if (d && d.hasClass("multi-proxy")) {
|
|
d.remove();
|
|
}
|
|
},
|
|
|
|
// override
|
|
getDragData: function(e){
|
|
var target = this.view.findItemFromChild(e.getTarget());
|
|
if(target) {
|
|
if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {
|
|
this.view.select(target);
|
|
this.ms.setValue(this.ms.getValue());
|
|
}
|
|
if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;
|
|
var dragData = {
|
|
sourceView: this.view,
|
|
viewNodes: [],
|
|
records: []
|
|
};
|
|
if (this.view.getSelectionCount() == 1) {
|
|
var i = this.view.getSelectedIndexes()[0];
|
|
var n = this.view.getNode(i);
|
|
dragData.viewNodes.push(dragData.ddel = n);
|
|
dragData.records.push(this.view.store.getAt(i));
|
|
dragData.repairXY = Ext.fly(n).getXY();
|
|
} else {
|
|
dragData.ddel = document.createElement('div');
|
|
dragData.ddel.className = 'multi-proxy';
|
|
this.collectSelection(dragData);
|
|
}
|
|
return dragData;
|
|
}
|
|
return false;
|
|
},
|
|
|
|
// override the default repairXY.
|
|
getRepairXY : function(e){
|
|
return this.dragData.repairXY;
|
|
},
|
|
|
|
// private
|
|
setDraggable: function(ddGroup){
|
|
if (!ddGroup) return;
|
|
if (Ext.isArray(ddGroup)) {
|
|
Ext.each(ddGroup, this.setDraggable, this);
|
|
return;
|
|
}
|
|
this.addToGroup(ddGroup);
|
|
}
|
|
});
|
|
|
|
Ext.ux.form.MultiSelect.DropZone = function(ms, config){
|
|
this.ms = ms;
|
|
this.view = ms.view;
|
|
var ddGroup = config.ddGroup || 'MultiselectDD';
|
|
var dd;
|
|
if (Ext.isArray(ddGroup)){
|
|
dd = ddGroup.shift();
|
|
} else {
|
|
dd = ddGroup;
|
|
ddGroup = null;
|
|
}
|
|
Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
|
|
this.setDroppable(ddGroup);
|
|
};
|
|
|
|
Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {
|
|
/**
|
|
* Part of the Ext.dd.DropZone interface. If no target node is found, the
|
|
* whole Element becomes the target, and this causes the drop gesture to append.
|
|
*/
|
|
getTargetFromEvent : function(e) {
|
|
var target = e.getTarget();
|
|
return target;
|
|
},
|
|
|
|
// private
|
|
getDropPoint : function(e, n, dd){
|
|
if (n == this.ms.fs.body.dom) { return "below"; }
|
|
var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;
|
|
var c = t + (b - t) / 2;
|
|
var y = Ext.lib.Event.getPageY(e);
|
|
if(y <= c) {
|
|
return "above";
|
|
}else{
|
|
return "below";
|
|
}
|
|
},
|
|
|
|
// private
|
|
isValidDropPoint: function(pt, n, data) {
|
|
if (!data.viewNodes || (data.viewNodes.length != 1)) {
|
|
return true;
|
|
}
|
|
var d = data.viewNodes[0];
|
|
if (d == n) {
|
|
return false;
|
|
}
|
|
if ((pt == "below") && (n.nextSibling == d)) {
|
|
return false;
|
|
}
|
|
if ((pt == "above") && (n.previousSibling == d)) {
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
|
|
// override
|
|
onNodeEnter : function(n, dd, e, data){
|
|
return false;
|
|
},
|
|
|
|
// override
|
|
onNodeOver : function(n, dd, e, data){
|
|
var dragElClass = this.dropNotAllowed;
|
|
var pt = this.getDropPoint(e, n, dd);
|
|
if (this.isValidDropPoint(pt, n, data)) {
|
|
if (this.ms.appendOnly) {
|
|
return "x-tree-drop-ok-below";
|
|
}
|
|
|
|
// set the insert point style on the target node
|
|
if (pt) {
|
|
var targetElClass;
|
|
if (pt == "above"){
|
|
dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
|
|
targetElClass = "x-view-drag-insert-above";
|
|
} else {
|
|
dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
|
|
targetElClass = "x-view-drag-insert-below";
|
|
}
|
|
if (this.lastInsertClass != targetElClass){
|
|
Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);
|
|
this.lastInsertClass = targetElClass;
|
|
}
|
|
}
|
|
}
|
|
return dragElClass;
|
|
},
|
|
|
|
// private
|
|
onNodeOut : function(n, dd, e, data){
|
|
this.removeDropIndicators(n);
|
|
},
|
|
|
|
// private
|
|
onNodeDrop : function(n, dd, e, data){
|
|
if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {
|
|
return false;
|
|
}
|
|
var pt = this.getDropPoint(e, n, dd);
|
|
if (n != this.ms.fs.body.dom)
|
|
n = this.view.findItemFromChild(n);
|
|
var insertAt = (this.ms.appendOnly || (n == this.ms.fs.body.dom)) ? this.view.store.getCount() : this.view.indexOf(n);
|
|
if (pt == "below") {
|
|
insertAt++;
|
|
}
|
|
|
|
var dir = false;
|
|
|
|
// Validate if dragging within the same MultiSelect
|
|
if (data.sourceView == this.view) {
|
|
// If the first element to be inserted below is the target node, remove it
|
|
if (pt == "below") {
|
|
if (data.viewNodes[0] == n) {
|
|
data.viewNodes.shift();
|
|
}
|
|
} else { // If the last element to be inserted above is the target node, remove it
|
|
if (data.viewNodes[data.viewNodes.length - 1] == n) {
|
|
data.viewNodes.pop();
|
|
}
|
|
}
|
|
|
|
// Nothing to drop...
|
|
if (!data.viewNodes.length) {
|
|
return false;
|
|
}
|
|
|
|
// If we are moving DOWN, then because a store.remove() takes place first,
|
|
// the insertAt must be decremented.
|
|
if (insertAt > this.view.store.indexOf(data.records[0])) {
|
|
dir = 'down';
|
|
insertAt--;
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < data.records.length; i++) {
|
|
var r = data.records[i];
|
|
if (data.sourceView) {
|
|
data.sourceView.store.remove(r);
|
|
}
|
|
this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);
|
|
var si = this.view.store.sortInfo;
|
|
if(si){
|
|
this.view.store.sort(si.field, si.direction);
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
|
|
// private
|
|
removeDropIndicators : function(n){
|
|
if(n){
|
|
Ext.fly(n).removeClass([
|
|
"x-view-drag-insert-above",
|
|
"x-view-drag-insert-left",
|
|
"x-view-drag-insert-right",
|
|
"x-view-drag-insert-below"]);
|
|
this.lastInsertClass = "_noclass";
|
|
}
|
|
},
|
|
|
|
// private
|
|
setDroppable: function(ddGroup){
|
|
if (!ddGroup) return;
|
|
if (Ext.isArray(ddGroup)) {
|
|
Ext.each(ddGroup, this.setDroppable, this);
|
|
return;
|
|
}
|
|
this.addToGroup(ddGroup);
|
|
}
|
|
});
|
|
|
|
/* Fix for Opera, which does not seem to include the map function on Array's */
|
|
if (!Array.prototype.map) {
|
|
Array.prototype.map = function(fun){
|
|
var len = this.length;
|
|
if (typeof fun != 'function') {
|
|
throw new TypeError();
|
|
}
|
|
var res = new Array(len);
|
|
var thisp = arguments[1];
|
|
for (var i = 0; i < len; i++) {
|
|
if (i in this) {
|
|
res[i] = fun.call(thisp, this[i], i, this);
|
|
}
|
|
}
|
|
return res;
|
|
};
|
|
}
|
|
|
|
Ext.ns('Ext.ux.data');
|
|
|
|
/**
|
|
* @class Ext.ux.data.PagingMemoryProxy
|
|
* @extends Ext.data.MemoryProxy
|
|
* <p>Paging Memory Proxy, allows to use paging grid with in memory dataset</p>
|
|
*/
|
|
Ext.ux.data.PagingMemoryProxy = Ext.extend(Ext.data.MemoryProxy, {
|
|
constructor : function(data){
|
|
Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this);
|
|
this.data = data;
|
|
},
|
|
doRequest : function(action, rs, params, reader, callback, scope, options){
|
|
params = params ||
|
|
{};
|
|
var result;
|
|
try {
|
|
result = reader.readRecords(this.data);
|
|
}
|
|
catch (e) {
|
|
this.fireEvent('loadexception', this, options, null, e);
|
|
callback.call(scope, null, options, false);
|
|
return;
|
|
}
|
|
|
|
// filtering
|
|
if (params.filter !== undefined) {
|
|
result.records = result.records.filter(function(el){
|
|
if (typeof(el) == 'object') {
|
|
var att = params.filterCol || 0;
|
|
return String(el.data[att]).match(params.filter) ? true : false;
|
|
}
|
|
else {
|
|
return String(el).match(params.filter) ? true : false;
|
|
}
|
|
});
|
|
result.totalRecords = result.records.length;
|
|
}
|
|
|
|
// sorting
|
|
if (params.sort !== undefined) {
|
|
// use integer as params.sort to specify column, since arrays are not named
|
|
// params.sort=0; would also match a array without columns
|
|
var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1;
|
|
var fn = function(r1, r2){
|
|
return r1 < r2;
|
|
};
|
|
result.records.sort(function(a, b){
|
|
var v = 0;
|
|
if (typeof(a) == 'object') {
|
|
v = fn(a.data[params.sort], b.data[params.sort]) * dir;
|
|
}
|
|
else {
|
|
v = fn(a, b) * dir;
|
|
}
|
|
if (v == 0) {
|
|
v = (a.index < b.index ? -1 : 1);
|
|
}
|
|
return v;
|
|
});
|
|
}
|
|
// paging (use undefined cause start can also be 0 (thus false))
|
|
if (params.start !== undefined && params.limit !== undefined) {
|
|
result.records = result.records.slice(params.start, params.start + params.limit);
|
|
}
|
|
callback.call(scope, result, options, true);
|
|
}
|
|
});
|
|
|
|
//backwards compat.
|
|
Ext.data.PagingMemoryProxy = Ext.ux.data.PagingMemoryProxy;
|
|
Ext.ux.PanelResizer = Ext.extend(Ext.util.Observable, {
|
|
minHeight: 0,
|
|
maxHeight:10000000,
|
|
|
|
constructor: function(config){
|
|
Ext.apply(this, config);
|
|
this.events = {};
|
|
Ext.ux.PanelResizer.superclass.constructor.call(this, config);
|
|
},
|
|
|
|
init : function(p){
|
|
this.panel = p;
|
|
|
|
if(this.panel.elements.indexOf('footer')==-1){
|
|
p.elements += ',footer';
|
|
}
|
|
p.on('render', this.onRender, this);
|
|
},
|
|
|
|
onRender : function(p){
|
|
this.handle = p.footer.createChild({cls:'x-panel-resize'});
|
|
|
|
this.tracker = new Ext.dd.DragTracker({
|
|
onStart: this.onDragStart.createDelegate(this),
|
|
onDrag: this.onDrag.createDelegate(this),
|
|
onEnd: this.onDragEnd.createDelegate(this),
|
|
tolerance: 3,
|
|
autoStart: 300
|
|
});
|
|
this.tracker.initEl(this.handle);
|
|
p.on('beforedestroy', this.tracker.destroy, this.tracker);
|
|
},
|
|
|
|
// private
|
|
onDragStart: function(e){
|
|
this.dragging = true;
|
|
this.startHeight = this.panel.el.getHeight();
|
|
this.fireEvent('dragstart', this, e);
|
|
},
|
|
|
|
// private
|
|
onDrag: function(e){
|
|
this.panel.setHeight((this.startHeight-this.tracker.getOffset()[1]).constrain(this.minHeight, this.maxHeight));
|
|
this.fireEvent('drag', this, e);
|
|
},
|
|
|
|
// private
|
|
onDragEnd: function(e){
|
|
this.dragging = false;
|
|
this.fireEvent('dragend', this, e);
|
|
}
|
|
});
|
|
Ext.preg('panelresizer', Ext.ux.PanelResizer);Ext.ux.Portal = Ext.extend(Ext.Panel, {
|
|
layout : 'column',
|
|
autoScroll : true,
|
|
cls : 'x-portal',
|
|
defaultType : 'portalcolumn',
|
|
|
|
initComponent : function(){
|
|
Ext.ux.Portal.superclass.initComponent.call(this);
|
|
this.addEvents({
|
|
validatedrop:true,
|
|
beforedragover:true,
|
|
dragover:true,
|
|
beforedrop:true,
|
|
drop:true
|
|
});
|
|
},
|
|
|
|
initEvents : function(){
|
|
Ext.ux.Portal.superclass.initEvents.call(this);
|
|
this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);
|
|
},
|
|
|
|
beforeDestroy : function() {
|
|
if(this.dd){
|
|
this.dd.unreg();
|
|
}
|
|
Ext.ux.Portal.superclass.beforeDestroy.call(this);
|
|
}
|
|
});
|
|
|
|
Ext.reg('portal', Ext.ux.Portal);
|
|
|
|
|
|
Ext.ux.Portal.DropZone = function(portal, cfg){
|
|
this.portal = portal;
|
|
Ext.dd.ScrollManager.register(portal.body);
|
|
Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
|
|
portal.body.ddScrollConfig = this.ddScrollConfig;
|
|
};
|
|
|
|
Ext.extend(Ext.ux.Portal.DropZone, Ext.dd.DropTarget, {
|
|
ddScrollConfig : {
|
|
vthresh: 50,
|
|
hthresh: -1,
|
|
animate: true,
|
|
increment: 200
|
|
},
|
|
|
|
createEvent : function(dd, e, data, col, c, pos){
|
|
return {
|
|
portal: this.portal,
|
|
panel: data.panel,
|
|
columnIndex: col,
|
|
column: c,
|
|
position: pos,
|
|
data: data,
|
|
source: dd,
|
|
rawEvent: e,
|
|
status: this.dropAllowed
|
|
};
|
|
},
|
|
|
|
notifyOver : function(dd, e, data){
|
|
var xy = e.getXY(), portal = this.portal, px = dd.proxy;
|
|
|
|
// case column widths
|
|
if(!this.grid){
|
|
this.grid = this.getGrid();
|
|
}
|
|
|
|
// handle case scroll where scrollbars appear during drag
|
|
var cw = portal.body.dom.clientWidth;
|
|
if(!this.lastCW){
|
|
this.lastCW = cw;
|
|
}else if(this.lastCW != cw){
|
|
this.lastCW = cw;
|
|
portal.doLayout();
|
|
this.grid = this.getGrid();
|
|
}
|
|
|
|
// determine column
|
|
var col = 0, xs = this.grid.columnX, cmatch = false;
|
|
for(var len = xs.length; col < len; col++){
|
|
if(xy[0] < (xs[col].x + xs[col].w)){
|
|
cmatch = true;
|
|
break;
|
|
}
|
|
}
|
|
// no match, fix last index
|
|
if(!cmatch){
|
|
col--;
|
|
}
|
|
|
|
// find insert position
|
|
var p, match = false, pos = 0,
|
|
c = portal.items.itemAt(col),
|
|
items = c.items.items, overSelf = false;
|
|
|
|
for(var len = items.length; pos < len; pos++){
|
|
p = items[pos];
|
|
var h = p.el.getHeight();
|
|
if(h === 0){
|
|
overSelf = true;
|
|
}
|
|
else if((p.el.getY()+(h/2)) > xy[1]){
|
|
match = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
pos = (match && p ? pos : c.items.getCount()) + (overSelf ? -1 : 0);
|
|
var overEvent = this.createEvent(dd, e, data, col, c, pos);
|
|
|
|
if(portal.fireEvent('validatedrop', overEvent) !== false &&
|
|
portal.fireEvent('beforedragover', overEvent) !== false){
|
|
|
|
// make sure proxy width is fluid
|
|
px.getProxy().setWidth('auto');
|
|
|
|
if(p){
|
|
px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);
|
|
}else{
|
|
px.moveProxy(c.el.dom, null);
|
|
}
|
|
|
|
this.lastPos = {c: c, col: col, p: overSelf || (match && p) ? pos : false};
|
|
this.scrollPos = portal.body.getScroll();
|
|
|
|
portal.fireEvent('dragover', overEvent);
|
|
|
|
return overEvent.status;
|
|
}else{
|
|
return overEvent.status;
|
|
}
|
|
|
|
},
|
|
|
|
notifyOut : function(){
|
|
delete this.grid;
|
|
},
|
|
|
|
notifyDrop : function(dd, e, data){
|
|
delete this.grid;
|
|
if(!this.lastPos){
|
|
return;
|
|
}
|
|
var c = this.lastPos.c, col = this.lastPos.col, pos = this.lastPos.p;
|
|
|
|
var dropEvent = this.createEvent(dd, e, data, col, c,
|
|
pos !== false ? pos : c.items.getCount());
|
|
|
|
if(this.portal.fireEvent('validatedrop', dropEvent) !== false &&
|
|
this.portal.fireEvent('beforedrop', dropEvent) !== false){
|
|
|
|
dd.proxy.getProxy().remove();
|
|
dd.panel.el.dom.parentNode.removeChild(dd.panel.el.dom);
|
|
|
|
if(pos !== false){
|
|
if(c == dd.panel.ownerCt && (c.items.items.indexOf(dd.panel) <= pos)){
|
|
pos++;
|
|
}
|
|
c.insert(pos, dd.panel);
|
|
}else{
|
|
c.add(dd.panel);
|
|
}
|
|
|
|
c.doLayout();
|
|
|
|
this.portal.fireEvent('drop', dropEvent);
|
|
|
|
// scroll position is lost on drop, fix it
|
|
var st = this.scrollPos.top;
|
|
if(st){
|
|
var d = this.portal.body.dom;
|
|
setTimeout(function(){
|
|
d.scrollTop = st;
|
|
}, 10);
|
|
}
|
|
|
|
}
|
|
delete this.lastPos;
|
|
},
|
|
|
|
// internal cache of body and column coords
|
|
getGrid : function(){
|
|
var box = this.portal.bwrap.getBox();
|
|
box.columnX = [];
|
|
this.portal.items.each(function(c){
|
|
box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
|
|
});
|
|
return box;
|
|
},
|
|
|
|
// unregister the dropzone from ScrollManager
|
|
unreg: function() {
|
|
//Ext.dd.ScrollManager.unregister(this.portal.body);
|
|
Ext.ux.Portal.DropZone.superclass.unreg.call(this);
|
|
}
|
|
});
|
|
Ext.ux.PortalColumn = Ext.extend(Ext.Container, {
|
|
layout : 'anchor',
|
|
//autoEl : 'div',//already defined by Ext.Component
|
|
defaultType : 'portlet',
|
|
cls : 'x-portal-column'
|
|
});
|
|
|
|
Ext.reg('portalcolumn', Ext.ux.PortalColumn);
|
|
Ext.ux.Portlet = Ext.extend(Ext.Panel, {
|
|
anchor : '100%',
|
|
frame : true,
|
|
collapsible : true,
|
|
draggable : true,
|
|
cls : 'x-portlet'
|
|
});
|
|
|
|
Ext.reg('portlet', Ext.ux.Portlet);
|
|
/**
|
|
* @class Ext.ux.ProgressBarPager
|
|
* @extends Object
|
|
* Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
|
|
*
|
|
* @ptype progressbarpager
|
|
* @constructor
|
|
* Create a new ItemSelector
|
|
* @param {Object} config Configuration options
|
|
* @xtype itemselector
|
|
*/
|
|
Ext.ux.ProgressBarPager = Ext.extend(Object, {
|
|
/**
|
|
* @cfg {Integer} progBarWidth
|
|
* <p>The default progress bar width. Default is 225.</p>
|
|
*/
|
|
progBarWidth : 225,
|
|
/**
|
|
* @cfg {String} defaultText
|
|
* <p>The text to display while the store is loading. Default is 'Loading...'</p>
|
|
*/
|
|
defaultText : 'Loading...',
|
|
/**
|
|
* @cfg {Object} defaultAnimCfg
|
|
* <p>A {@link Ext.Fx Ext.Fx} configuration object. Default is { duration : 1, easing : 'bounceOut' }.</p>
|
|
*/
|
|
defaultAnimCfg : {
|
|
duration : 1,
|
|
easing : 'bounceOut'
|
|
},
|
|
constructor : function(config) {
|
|
if (config) {
|
|
Ext.apply(this, config);
|
|
}
|
|
},
|
|
//public
|
|
init : function (parent) {
|
|
|
|
if(parent.displayInfo){
|
|
this.parent = parent;
|
|
var ind = parent.items.indexOf(parent.displayItem);
|
|
parent.remove(parent.displayItem, true);
|
|
this.progressBar = new Ext.ProgressBar({
|
|
text : this.defaultText,
|
|
width : this.progBarWidth,
|
|
animate : this.defaultAnimCfg
|
|
});
|
|
|
|
parent.displayItem = this.progressBar;
|
|
|
|
parent.add(parent.displayItem);
|
|
parent.doLayout();
|
|
Ext.apply(parent, this.parentOverrides);
|
|
|
|
this.progressBar.on('render', function(pb) {
|
|
pb.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
|
|
}, this, {single: true});
|
|
|
|
}
|
|
|
|
},
|
|
// private
|
|
// This method handles the click for the progress bar
|
|
handleProgressBarClick : function(e){
|
|
var parent = this.parent;
|
|
var displayItem = parent.displayItem;
|
|
|
|
var box = this.progressBar.getBox();
|
|
var xy = e.getXY();
|
|
var position = xy[0]-box.x;
|
|
var pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize);
|
|
|
|
var newpage = Math.ceil(position/(displayItem.width/pages));
|
|
parent.changePage(newpage);
|
|
},
|
|
|
|
// private, overriddes
|
|
parentOverrides : {
|
|
// private
|
|
// This method updates the information via the progress bar.
|
|
updateInfo : function(){
|
|
if(this.displayItem){
|
|
var count = this.store.getCount();
|
|
var pgData = this.getPageData();
|
|
var pageNum = this.readPage(pgData);
|
|
|
|
var msg = count == 0 ?
|
|
this.emptyMsg :
|
|
String.format(
|
|
this.displayMsg,
|
|
this.cursor+1, this.cursor+count, this.store.getTotalCount()
|
|
);
|
|
|
|
pageNum = pgData.activePage; ;
|
|
|
|
var pct = pageNum / pgData.pages;
|
|
|
|
this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);
|
|
|
|
Ext.ns('Ext.ux.grid');
|
|
|
|
/**
|
|
* @class Ext.ux.grid.RowEditor
|
|
* @extends Ext.Panel
|
|
* Plugin (ptype = 'roweditor') that adds the ability to rapidly edit full rows in a grid.
|
|
* A validation mode may be enabled which uses AnchorTips to notify the user of all
|
|
* validation errors at once.
|
|
*
|
|
* @ptype roweditor
|
|
*/
|
|
Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
|
|
floating: true,
|
|
shadow: false,
|
|
layout: 'hbox',
|
|
cls: 'x-small-editor',
|
|
buttonAlign: 'center',
|
|
baseCls: 'x-row-editor',
|
|
elements: 'header,footer,body',
|
|
frameWidth: 5,
|
|
buttonPad: 3,
|
|
clicksToEdit: 'auto',
|
|
monitorValid: true,
|
|
focusDelay: 250,
|
|
errorSummary: true,
|
|
|
|
saveText: 'Save',
|
|
cancelText: 'Cancel',
|
|
commitChangesText: 'You need to commit or cancel your changes',
|
|
errorText: 'Errors',
|
|
|
|
defaults: {
|
|
normalWidth: true
|
|
},
|
|
|
|
initComponent: function(){
|
|
Ext.ux.grid.RowEditor.superclass.initComponent.call(this);
|
|
this.addEvents(
|
|
/**
|
|
* @event beforeedit
|
|
* Fired before the row editor is activated.
|
|
* If the listener returns <tt>false</tt> the editor will not be activated.
|
|
* @param {Ext.ux.grid.RowEditor} roweditor This object
|
|
* @param {Number} rowIndex The rowIndex of the row just edited
|
|
*/
|
|
'beforeedit',
|
|
/**
|
|
* @event canceledit
|
|
* Fired when the editor is cancelled.
|
|
* @param {Ext.ux.grid.RowEditor} roweditor This object
|
|
* @param {Boolean} forced True if the cancel button is pressed, false is the editor was invalid.
|
|
*/
|
|
'canceledit',
|
|
/**
|
|
* @event validateedit
|
|
* Fired after a row is edited and passes validation.
|
|
* If the listener returns <tt>false</tt> changes to the record will not be set.
|
|
* @param {Ext.ux.grid.RowEditor} roweditor This object
|
|
* @param {Object} changes Object with changes made to the record.
|
|
* @param {Ext.data.Record} r The Record that was edited.
|
|
* @param {Number} rowIndex The rowIndex of the row just edited
|
|
*/
|
|
'validateedit',
|
|
/**
|
|
* @event afteredit
|
|
* Fired after a row is edited and passes validation. This event is fired
|
|
* after the store's update event is fired with this edit.
|
|
* @param {Ext.ux.grid.RowEditor} roweditor This object
|
|
* @param {Object} changes Object with changes made to the record.
|
|
* @param {Ext.data.Record} r The Record that was edited.
|
|
* @param {Number} rowIndex The rowIndex of the row just edited
|
|
*/
|
|
'afteredit'
|
|
);
|
|
},
|
|
|
|
init: function(grid){
|
|
this.grid = grid;
|
|
this.ownerCt = grid;
|
|
if(this.clicksToEdit === 2){
|
|
grid.on('rowdblclick', this.onRowDblClick, this);
|
|
}else{
|
|
grid.on('rowclick', this.onRowClick, this);
|
|
if(Ext.isIE){
|
|
grid.on('rowdblclick', this.onRowDblClick, this);
|
|
}
|
|
}
|
|
|
|
// stopEditing without saving when a record is removed from Store.
|
|
grid.getStore().on('remove', function() {
|
|
this.stopEditing(false);
|
|
},this);
|
|
|
|
grid.on({
|
|
scope: this,
|
|
keydown: this.onGridKey,
|
|
columnresize: this.verifyLayout,
|
|
columnmove: this.refreshFields,
|
|
reconfigure: this.refreshFields,
|
|
beforedestroy : this.beforedestroy,
|
|
destroy : this.destroy,
|
|
bodyscroll: {
|
|
buffer: 250,
|
|
fn: this.positionButtons
|
|
}
|
|
});
|
|
grid.getColumnModel().on('hiddenchange', this.verifyLayout, this, {delay:1});
|
|
grid.getView().on('refresh', this.stopEditing.createDelegate(this, []));
|
|
},
|
|
|
|
beforedestroy: function() {
|
|
this.grid.getStore().un('remove', this.onStoreRemove, this);
|
|
this.stopEditing(false);
|
|
Ext.destroy(this.btns);
|
|
},
|
|
|
|
refreshFields: function(){
|
|
this.initFields();
|
|
this.verifyLayout();
|
|
},
|
|
|
|
isDirty: function(){
|
|
var dirty;
|
|
this.items.each(function(f){
|
|
if(String(this.values[f.id]) !== String(f.getValue())){
|
|
dirty = true;
|
|
return false;
|
|
}
|
|
}, this);
|
|
return dirty;
|
|
},
|
|
|
|
startEditing: function(rowIndex, doFocus){
|
|
if(this.editing && this.isDirty()){
|
|
this.showTooltip(this.commitChangesText);
|
|
return;
|
|
}
|
|
if(Ext.isObject(rowIndex)){
|
|
rowIndex = this.grid.getStore().indexOf(rowIndex);
|
|
}
|
|
if(this.fireEvent('beforeedit', this, rowIndex) !== false){
|
|
this.editing = true;
|
|
var g = this.grid, view = g.getView(),
|
|
row = view.getRow(rowIndex),
|
|
record = g.store.getAt(rowIndex);
|
|
|
|
this.record = record;
|
|
this.rowIndex = rowIndex;
|
|
this.values = {};
|
|
if(!this.rendered){
|
|
this.render(view.getEditorParent());
|
|
}
|
|
var w = Ext.fly(row).getWidth();
|
|
this.setSize(w);
|
|
if(!this.initialized){
|
|
this.initFields();
|
|
}
|
|
var cm = g.getColumnModel(), fields = this.items.items, f, val;
|
|
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
|
|
val = this.preEditValue(record, cm.getDataIndex(i));
|
|
f = fields[i];
|
|
f.setValue(val);
|
|
this.values[f.id] = Ext.isEmpty(val) ? '' : val;
|
|
}
|
|
this.verifyLayout(true);
|
|
if(!this.isVisible()){
|
|
this.setPagePosition(Ext.fly(row).getXY());
|
|
} else{
|
|
this.el.setXY(Ext.fly(row).getXY(), {duration:0.15});
|
|
}
|
|
if(!this.isVisible()){
|
|
this.show().doLayout();
|
|
}
|
|
if(doFocus !== false){
|
|
this.doFocus.defer(this.focusDelay, this);
|
|
}
|
|
}
|
|
},
|
|
|
|
stopEditing : function(saveChanges){
|
|
this.editing = false;
|
|
if(!this.isVisible()){
|
|
return;
|
|
}
|
|
if(saveChanges === false || !this.isValid()){
|
|
this.hide();
|
|
this.fireEvent('canceledit', this, saveChanges === false);
|
|
return;
|
|
}
|
|
var changes = {},
|
|
r = this.record,
|
|
hasChange = false,
|
|
cm = this.grid.colModel,
|
|
fields = this.items.items;
|
|
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
|
|
if(!cm.isHidden(i)){
|
|
var dindex = cm.getDataIndex(i);
|
|
if(!Ext.isEmpty(dindex)){
|
|
var oldValue = r.data[dindex],
|
|
value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
|
|
if(String(oldValue) !== String(value)){
|
|
changes[dindex] = value;
|
|
hasChange = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
|
|
r.beginEdit();
|
|
Ext.iterate(changes, function(name, value){
|
|
r.set(name, value);
|
|
});
|
|
r.endEdit();
|
|
this.fireEvent('afteredit', this, changes, r, this.rowIndex);
|
|
}
|
|
this.hide();
|
|
},
|
|
|
|
verifyLayout: function(force){
|
|
if(this.el && (this.isVisible() || force === true)){
|
|
var row = this.grid.getView().getRow(this.rowIndex);
|
|
this.setSize(Ext.fly(row).getWidth(), Ext.fly(row).getHeight() + 9);
|
|
var cm = this.grid.colModel, fields = this.items.items;
|
|
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
|
|
if(!cm.isHidden(i)){
|
|
var adjust = 0;
|
|
if(i === (len - 1)){
|
|
adjust += 3; // outer padding
|
|
} else{
|
|
adjust += 1;
|
|
}
|
|
fields[i].show();
|
|
fields[i].setWidth(cm.getColumnWidth(i) - adjust);
|
|
} else{
|
|
fields[i].hide();
|
|
}
|
|
}
|
|
this.doLayout();
|
|
this.positionButtons();
|
|
}
|
|
},
|
|
|
|
slideHide : function(){
|
|
this.hide();
|
|
},
|
|
|
|
initFields: function(){
|
|
var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
|
|
this.removeAll(false);
|
|
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
|
|
var c = cm.getColumnAt(i),
|
|
ed = c.getEditor();
|
|
if(!ed){
|
|
ed = c.displayEditor || new Ext.form.DisplayField();
|
|
}
|
|
if(i == 0){
|
|
ed.margins = pm('0 1 2 1');
|
|
} else if(i == len - 1){
|
|
ed.margins = pm('0 0 2 1');
|
|
} else{
|
|
ed.margins = pm('0 1 2');
|
|
}
|
|
ed.setWidth(cm.getColumnWidth(i));
|
|
ed.column = c;
|
|
if(ed.ownerCt !== this){
|
|
ed.on('focus', this.ensureVisible, this);
|
|
ed.on('specialkey', this.onKey, this);
|
|
}
|
|
this.insert(i, ed);
|
|
}
|
|
this.initialized = true;
|
|
},
|
|
|
|
onKey: function(f, e){
|
|
if(e.getKey() === e.ENTER){
|
|
this.stopEditing(true);
|
|
e.stopPropagation();
|
|
}
|
|
},
|
|
|
|
onGridKey: function(e){
|
|
if(e.getKey() === e.ENTER && !this.isVisible()){
|
|
var r = this.grid.getSelectionModel().getSelected();
|
|
if(r){
|
|
var index = this.grid.store.indexOf(r);
|
|
this.startEditing(index);
|
|
e.stopPropagation();
|
|
}
|
|
}
|
|
},
|
|
|
|
ensureVisible: function(editor){
|
|
if(this.isVisible()){
|
|
this.grid.getView().ensureVisible(this.rowIndex, this.grid.colModel.getIndexById(editor.column.id), true);
|
|
}
|
|
},
|
|
|
|
onRowClick: function(g, rowIndex, e){
|
|
if(this.clicksToEdit == 'auto'){
|
|
var li = this.lastClickIndex;
|
|
this.lastClickIndex = rowIndex;
|
|
if(li != rowIndex && !this.isVisible()){
|
|
return;
|
|
}
|
|
}
|
|
this.startEditing(rowIndex, false);
|
|
this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
|
|
},
|
|
|
|
onRowDblClick: function(g, rowIndex, e){
|
|
this.startEditing(rowIndex, false);
|
|
this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
|
|
},
|
|
|
|
onRender: function(){
|
|
Ext.ux.grid.RowEditor.superclass.onRender.apply(this, arguments);
|
|
this.el.swallowEvent(['keydown', 'keyup', 'keypress']);
|
|
this.btns = new Ext.Panel({
|
|
baseCls: 'x-plain',
|
|
cls: 'x-btns',
|
|
elements:'body',
|
|
layout: 'table',
|
|
width: (this.minButtonWidth * 2) + (this.frameWidth * 2) + (this.buttonPad * 4), // width must be specified for IE
|
|
items: [{
|
|
ref: 'saveBtn',
|
|
itemId: 'saveBtn',
|
|
xtype: 'button',
|
|
text: this.saveText,
|
|
width: this.minButtonWidth,
|
|
handler: this.stopEditing.createDelegate(this, [true])
|
|
}, {
|
|
xtype: 'button',
|
|
text: this.cancelText,
|
|
width: this.minButtonWidth,
|
|
handler: this.stopEditing.createDelegate(this, [false])
|
|
}]
|
|
});
|
|
this.btns.render(this.bwrap);
|
|
},
|
|
|
|
afterRender: function(){
|
|
Ext.ux.grid.RowEditor.superclass.afterRender.apply(this, arguments);
|
|
this.positionButtons();
|
|
if(this.monitorValid){
|
|
this.startMonitoring();
|
|
}
|
|
},
|
|
|
|
onShow: function(){
|
|
if(this.monitorValid){
|
|
this.startMonitoring();
|
|
}
|
|
Ext.ux.grid.RowEditor.superclass.onShow.apply(this, arguments);
|
|
},
|
|
|
|
onHide: function(){
|
|
Ext.ux.grid.RowEditor.superclass.onHide.apply(this, arguments);
|
|
this.stopMonitoring();
|
|
this.grid.getView().focusRow(this.rowIndex);
|
|
},
|
|
|
|
positionButtons: function(){
|
|
if(this.btns){
|
|
var g = this.grid,
|
|
h = this.el.dom.clientHeight,
|
|
view = g.getView(),
|
|
scroll = view.scroller.dom.scrollLeft,
|
|
bw = this.btns.getWidth(),
|
|
width = Math.min(g.getWidth(), g.getColumnModel().getTotalWidth());
|
|
|
|
this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
|
|
}
|
|
},
|
|
|
|
// private
|
|
preEditValue : function(r, field){
|
|
var value = r.data[field];
|
|
return this.autoEncode && typeof value === 'string' ? Ext.util.Format.htmlDecode(value) : value;
|
|
},
|
|
|
|
// private
|
|
postEditValue : function(value, originalValue, r, field){
|
|
return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
|
|
},
|
|
|
|
doFocus: function(pt){
|
|
if(this.isVisible()){
|
|
var index = 0,
|
|
cm = this.grid.getColumnModel(),
|
|
c;
|
|
if(pt){
|
|
index = this.getTargetColumnIndex(pt);
|
|
}
|
|
for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
|
|
c = cm.getColumnAt(i);
|
|
if(!c.hidden && c.getEditor()){
|
|
c.getEditor().focus();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
getTargetColumnIndex: function(pt){
|
|
var grid = this.grid,
|
|
v = grid.view,
|
|
x = pt.left,
|
|
cms = grid.colModel.config,
|
|
i = 0,
|
|
match = false;
|
|
for(var len = cms.length, c; c = cms[i]; i++){
|
|
if(!c.hidden){
|
|
if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){
|
|
match = i;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return match;
|
|
},
|
|
|
|
startMonitoring : function(){
|
|
if(!this.bound && this.monitorValid){
|
|
this.bound = true;
|
|
Ext.TaskMgr.start({
|
|
run : this.bindHandler,
|
|
interval : this.monitorPoll || 200,
|
|
scope: this
|
|
});
|
|
}
|
|
},
|
|
|
|
stopMonitoring : function(){
|
|
this.bound = false;
|
|
if(this.tooltip){
|
|
this.tooltip.hide();
|
|
}
|
|
},
|
|
|
|
isValid: function(){
|
|
var valid = true;
|
|
this.items.each(function(f){
|
|
if(!f.isValid(true)){
|
|
valid = false;
|
|
return false;
|
|
}
|
|
});
|
|
return valid;
|
|
},
|
|
|
|
// private
|
|
bindHandler : function(){
|
|
if(!this.bound){
|
|
return false; // stops binding
|
|
}
|
|
var valid = this.isValid();
|
|
if(!valid && this.errorSummary){
|
|
this.showTooltip(this.getErrorText().join(''));
|
|
}
|
|
this.btns.saveBtn.setDisabled(!valid);
|
|
this.fireEvent('validation', this, valid);
|
|
},
|
|
|
|
showTooltip: function(msg){
|
|
var t = this.tooltip;
|
|
if(!t){
|
|
t = this.tooltip = new Ext.ToolTip({
|
|
maxWidth: 600,
|
|
cls: 'errorTip',
|
|
width: 300,
|
|
title: this.errorText,
|
|
autoHide: false,
|
|
anchor: 'left',
|
|
anchorToTarget: true,
|
|
mouseOffset: [40,0]
|
|
});
|
|
}
|
|
var v = this.grid.getView(),
|
|
top = parseInt(this.el.dom.style.top, 10),
|
|
scroll = v.scroller.dom.scrollTop,
|
|
h = this.el.getHeight();
|
|
|
|
if(top + h >= scroll){
|
|
t.initTarget(this.items.last().getEl());
|
|
if(!t.rendered){
|
|
t.show();
|
|
t.hide();
|
|
}
|
|
t.body.update(msg);
|
|
t.doAutoWidth();
|
|
t.show();
|
|
}else if(t.rendered){
|
|
t.hide();
|
|
}
|
|
},
|
|
|
|
getErrorText: function(){
|
|
var data = ['<ul>'];
|
|
this.items.each(function(f){
|
|
if(!f.isValid(true)){
|
|
data.push('<li>', f.activeError, '</li>');
|
|
}
|
|
});
|
|
data.push('</ul>');
|
|
return data;
|
|
}
|
|
});
|
|
Ext.preg('roweditor', Ext.ux.grid.RowEditor);
|
|
|
|
Ext.override(Ext.form.Field, {
|
|
markInvalid : function(msg){
|
|
if(!this.rendered || this.preventMark){ // not rendered
|
|
return;
|
|
}
|
|
msg = msg || this.invalidText;
|
|
|
|
var mt = this.getMessageHandler();
|
|
if(mt){
|
|
mt.mark(this, msg);
|
|
}else if(this.msgTarget){
|
|
this.el.addClass(this.invalidClass);
|
|
var t = Ext.getDom(this.msgTarget);
|
|
if(t){
|
|
t.innerHTML = msg;
|
|
t.style.display = this.msgDisplay;
|
|
}
|
|
}
|
|
this.activeError = msg;
|
|
this.fireEvent('invalid', this, msg);
|
|
}
|
|
});
|
|
|
|
Ext.override(Ext.ToolTip, {
|
|
doAutoWidth : function(){
|
|
var bw = this.body.getTextWidth();
|
|
if(this.title){
|
|
bw = Math.max(bw, this.header.child('span').getTextWidth(this.title));
|
|
}
|
|
bw += this.getFrameWidth() + (this.closable ? 20 : 0) + this.body.getPadding("lr") + 20;
|
|
this.setWidth(bw.constrain(this.minWidth, this.maxWidth));
|
|
|
|
// IE7 repaint bug on initial show
|
|
if(Ext.isIE7 && !this.repainted){
|
|
this.el.repaint();
|
|
this.repainted = true;
|
|
}
|
|
}
|
|
});
|
|
Ext.ns('Ext.ux.grid');
|
|
|
|
/**
|
|
* @class Ext.ux.grid.RowExpander
|
|
* @extends Ext.util.Observable
|
|
* Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
|
|
* a second row body which expands/contracts. The expand/contract behavior is configurable to react
|
|
* on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
|
|
*
|
|
* @ptype rowexpander
|
|
*/
|
|
Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {
|
|
/**
|
|
* @cfg {Boolean} expandOnEnter
|
|
* <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
|
|
* key is pressed (defaults to <tt>true</tt>).
|
|
*/
|
|
expandOnEnter : true,
|
|
/**
|
|
* @cfg {Boolean} expandOnDblClick
|
|
* <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
|
|
* (defaults to <tt>true</tt>).
|
|
*/
|
|
expandOnDblClick : true,
|
|
|
|
header : '',
|
|
width : 20,
|
|
sortable : false,
|
|
fixed : true,
|
|
menuDisabled : true,
|
|
dataIndex : '',
|
|
id : 'expander',
|
|
lazyRender : true,
|
|
enableCaching : true,
|
|
|
|
constructor: function(config){
|
|
Ext.apply(this, config);
|
|
|
|
this.addEvents({
|
|
/**
|
|
* @event beforeexpand
|
|
* Fires before the row expands. Have the listener return false to prevent the row from expanding.
|
|
* @param {Object} this RowExpander object.
|
|
* @param {Object} Ext.data.Record Record for the selected row.
|
|
* @param {Object} body body element for the secondary row.
|
|
* @param {Number} rowIndex The current row index.
|
|
*/
|
|
beforeexpand: true,
|
|
/**
|
|
* @event expand
|
|
* Fires after the row expands.
|
|
* @param {Object} this RowExpander object.
|
|
* @param {Object} Ext.data.Record Record for the selected row.
|
|
* @param {Object} body body element for the secondary row.
|
|
* @param {Number} rowIndex The current row index.
|
|
*/
|
|
expand: true,
|
|
/**
|
|
* @event beforecollapse
|
|
* Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
|
|
* @param {Object} this RowExpander object.
|
|
* @param {Object} Ext.data.Record Record for the selected row.
|
|
* @param {Object} body body element for the secondary row.
|
|
* @param {Number} rowIndex The current row index.
|
|
*/
|
|
beforecollapse: true,
|
|
/**
|
|
* @event collapse
|
|
* Fires after the row collapses.
|
|
* @param {Object} this RowExpander object.
|
|
* @param {Object} Ext.data.Record Record for the selected row.
|
|
* @param {Object} body body element for the secondary row.
|
|
* @param {Number} rowIndex The current row index.
|
|
*/
|
|
collapse: true
|
|
});
|
|
|
|
Ext.ux.grid.RowExpander.superclass.constructor.call(this);
|
|
|
|
if(this.tpl){
|
|
if(typeof this.tpl == 'string'){
|
|
this.tpl = new Ext.Template(this.tpl);
|
|
}
|
|
this.tpl.compile();
|
|
}
|
|
|
|
this.state = {};
|
|
this.bodyContent = {};
|
|
},
|
|
|
|
getRowClass : function(record, rowIndex, p, ds){
|
|
p.cols = p.cols-1;
|
|
var content = this.bodyContent[record.id];
|
|
if(!content && !this.lazyRender){
|
|
content = this.getBodyContent(record, rowIndex);
|
|
}
|
|
if(content){
|
|
p.body = content;
|
|
}
|
|
return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
|
|
},
|
|
|
|
init : function(grid){
|
|
this.grid = grid;
|
|
|
|
var view = grid.getView();
|
|
view.getRowClass = this.getRowClass.createDelegate(this);
|
|
|
|
view.enableRowBody = true;
|
|
|
|
|
|
grid.on('render', this.onRender, this);
|
|
grid.on('destroy', this.onDestroy, this);
|
|
},
|
|
|
|
// @private
|
|
onRender: function() {
|
|
var grid = this.grid;
|
|
var mainBody = grid.getView().mainBody;
|
|
mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});
|
|
if (this.expandOnEnter) {
|
|
this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {
|
|
'enter' : this.onEnter,
|
|
scope: this
|
|
});
|
|
}
|
|
if (this.expandOnDblClick) {
|
|
grid.on('rowdblclick', this.onRowDblClick, this);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onDestroy: function() {
|
|
if(this.keyNav){
|
|
this.keyNav.disable();
|
|
delete this.keyNav;
|
|
}
|
|
/*
|
|
* A majority of the time, the plugin will be destroyed along with the grid,
|
|
* which means the mainBody won't be available. On the off chance that the plugin
|
|
* isn't destroyed with the grid, take care of removing the listener.
|
|
*/
|
|
var mainBody = this.grid.getView().mainBody;
|
|
if(mainBody){
|
|
mainBody.un('mousedown', this.onMouseDown, this);
|
|
}
|
|
},
|
|
// @private
|
|
onRowDblClick: function(grid, rowIdx, e) {
|
|
this.toggleRow(rowIdx);
|
|
},
|
|
|
|
onEnter: function(e) {
|
|
var g = this.grid;
|
|
var sm = g.getSelectionModel();
|
|
var sels = sm.getSelections();
|
|
for (var i = 0, len = sels.length; i < len; i++) {
|
|
var rowIdx = g.getStore().indexOf(sels[i]);
|
|
this.toggleRow(rowIdx);
|
|
}
|
|
},
|
|
|
|
getBodyContent : function(record, index){
|
|
if(!this.enableCaching){
|
|
return this.tpl.apply(record.data);
|
|
}
|
|
var content = this.bodyContent[record.id];
|
|
if(!content){
|
|
content = this.tpl.apply(record.data);
|
|
this.bodyContent[record.id] = content;
|
|
}
|
|
return content;
|
|
},
|
|
|
|
onMouseDown : function(e, t){
|
|
e.stopEvent();
|
|
var row = e.getTarget('.x-grid3-row');
|
|
this.toggleRow(row);
|
|
},
|
|
|
|
renderer : function(v, p, record){
|
|
p.cellAttr = 'rowspan="2"';
|
|
return '<div class="x-grid3-row-expander"> </div>';
|
|
},
|
|
|
|
beforeExpand : function(record, body, rowIndex){
|
|
if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
|
|
if(this.tpl && this.lazyRender){
|
|
body.innerHTML = this.getBodyContent(record, rowIndex);
|
|
}
|
|
return true;
|
|
}else{
|
|
return false;
|
|
}
|
|
},
|
|
|
|
toggleRow : function(row){
|
|
if(typeof row == 'number'){
|
|
row = this.grid.view.getRow(row);
|
|
}
|
|
this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
|
|
},
|
|
|
|
expandRow : function(row){
|
|
if(typeof row == 'number'){
|
|
row = this.grid.view.getRow(row);
|
|
}
|
|
var record = this.grid.store.getAt(row.rowIndex);
|
|
var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
|
|
if(this.beforeExpand(record, body, row.rowIndex)){
|
|
this.state[record.id] = true;
|
|
Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
|
|
this.fireEvent('expand', this, record, body, row.rowIndex);
|
|
}
|
|
},
|
|
|
|
collapseRow : function(row){
|
|
if(typeof row == 'number'){
|
|
row = this.grid.view.getRow(row);
|
|
}
|
|
var record = this.grid.store.getAt(row.rowIndex);
|
|
var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
|
|
if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
|
|
this.state[record.id] = false;
|
|
Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
|
|
this.fireEvent('collapse', this, record, body, row.rowIndex);
|
|
}
|
|
}
|
|
});
|
|
|
|
Ext.preg('rowexpander', Ext.ux.grid.RowExpander);
|
|
|
|
//backwards compat
|
|
Ext.grid.RowExpander = Ext.ux.grid.RowExpander;// We are adding these custom layouts to a namespace that does not
|
|
// exist by default in Ext, so we have to add the namespace first:
|
|
Ext.ns('Ext.ux.layout');
|
|
|
|
/**
|
|
* @class Ext.ux.layout.RowLayout
|
|
* @extends Ext.layout.ContainerLayout
|
|
* <p>This is the layout style of choice for creating structural layouts in a multi-row format where the height of
|
|
* each row can be specified as a percentage or fixed height. Row widths can also be fixed, percentage or auto.
|
|
* This class is intended to be extended or created via the layout:'ux.row' {@link Ext.Container#layout} config,
|
|
* and should generally not need to be created directly via the new keyword.</p>
|
|
* <p>RowLayout does not have any direct config options (other than inherited ones), but it does support a
|
|
* specific config property of <b><tt>rowHeight</tt></b> that can be included in the config of any panel added to it. The
|
|
* layout will use the rowHeight (if present) or height of each panel during layout to determine how to size each panel.
|
|
* If height or rowHeight is not specified for a given panel, its height will default to the panel's height (or auto).</p>
|
|
* <p>The height property is always evaluated as pixels, and must be a number greater than or equal to 1.
|
|
* The rowHeight property is always evaluated as a percentage, and must be a decimal value greater than 0 and
|
|
* less than 1 (e.g., .25).</p>
|
|
* <p>The basic rules for specifying row heights are pretty simple. The logic makes two passes through the
|
|
* set of contained panels. During the first layout pass, all panels that either have a fixed height or none
|
|
* specified (auto) are skipped, but their heights are subtracted from the overall container height. During the second
|
|
* pass, all panels with rowHeights are assigned pixel heights in proportion to their percentages based on
|
|
* the total <b>remaining</b> container height. In other words, percentage height panels are designed to fill the space
|
|
* left over by all the fixed-height and/or auto-height panels. Because of this, while you can specify any number of rows
|
|
* with different percentages, the rowHeights must always add up to 1 (or 100%) when added together, otherwise your
|
|
* layout may not render as expected. Example usage:</p>
|
|
* <pre><code>
|
|
// All rows are percentages -- they must add up to 1
|
|
var p = new Ext.Panel({
|
|
title: 'Row Layout - Percentage Only',
|
|
layout:'ux.row',
|
|
items: [{
|
|
title: 'Row 1',
|
|
rowHeight: .25
|
|
},{
|
|
title: 'Row 2',
|
|
rowHeight: .6
|
|
},{
|
|
title: 'Row 3',
|
|
rowHeight: .15
|
|
}]
|
|
});
|
|
|
|
// Mix of height and rowHeight -- all rowHeight values must add
|
|
// up to 1. The first row will take up exactly 120px, and the last two
|
|
// rows will fill the remaining container height.
|
|
var p = new Ext.Panel({
|
|
title: 'Row Layout - Mixed',
|
|
layout:'ux.row',
|
|
items: [{
|
|
title: 'Row 1',
|
|
height: 120,
|
|
// standard panel widths are still supported too:
|
|
width: '50%' // or 200
|
|
},{
|
|
title: 'Row 2',
|
|
rowHeight: .8,
|
|
width: 300
|
|
},{
|
|
title: 'Row 3',
|
|
rowHeight: .2
|
|
}]
|
|
});
|
|
</code></pre>
|
|
*/
|
|
Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, {
|
|
// private
|
|
monitorResize:true,
|
|
|
|
// private
|
|
isValidParent : function(c, target){
|
|
return c.getEl().dom.parentNode == this.innerCt.dom;
|
|
},
|
|
|
|
// private
|
|
onLayout : function(ct, target){
|
|
var rs = ct.items.items, len = rs.length, r, i;
|
|
|
|
if(!this.innerCt){
|
|
target.addClass('ux-row-layout-ct');
|
|
this.innerCt = target.createChild({cls:'x-row-inner'});
|
|
}
|
|
this.renderAll(ct, this.innerCt);
|
|
|
|
var size = target.getViewSize();
|
|
|
|
if(size.width < 1 && size.height < 1){ // display none?
|
|
return;
|
|
}
|
|
|
|
var h = size.height - target.getPadding('tb'),
|
|
ph = h;
|
|
|
|
this.innerCt.setSize({height:h});
|
|
|
|
// some rows can be percentages while others are fixed
|
|
// so we need to make 2 passes
|
|
|
|
for(i = 0; i < len; i++){
|
|
r = rs[i];
|
|
if(!r.rowHeight){
|
|
ph -= (r.getSize().height + r.getEl().getMargins('tb'));
|
|
}
|
|
}
|
|
|
|
ph = ph < 0 ? 0 : ph;
|
|
|
|
for(i = 0; i < len; i++){
|
|
r = rs[i];
|
|
if(r.rowHeight){
|
|
r.setSize({height: Math.floor(r.rowHeight*ph) - r.getEl().getMargins('tb')});
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @property activeItem
|
|
* @hide
|
|
*/
|
|
});
|
|
|
|
Ext.Container.LAYOUTS['ux.row'] = Ext.ux.layout.RowLayout;
|
|
Ext.ns('Ext.ux.form');
|
|
|
|
Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
|
|
initComponent : function(){
|
|
Ext.ux.form.SearchField.superclass.initComponent.call(this);
|
|
this.on('specialkey', function(f, e){
|
|
if(e.getKey() == e.ENTER){
|
|
this.onTrigger2Click();
|
|
}
|
|
}, this);
|
|
},
|
|
|
|
validationEvent:false,
|
|
validateOnBlur:false,
|
|
trigger1Class:'x-form-clear-trigger',
|
|
trigger2Class:'x-form-search-trigger',
|
|
hideTrigger1:true,
|
|
width:180,
|
|
hasSearch : false,
|
|
paramName : 'query',
|
|
|
|
onTrigger1Click : function(){
|
|
if(this.hasSearch){
|
|
this.el.dom.value = '';
|
|
var o = {start: 0};
|
|
this.store.baseParams = this.store.baseParams || {};
|
|
this.store.baseParams[this.paramName] = '';
|
|
this.store.reload({params:o});
|
|
this.triggers[0].hide();
|
|
this.hasSearch = false;
|
|
}
|
|
},
|
|
|
|
onTrigger2Click : function(){
|
|
var v = this.getRawValue();
|
|
if(v.length < 1){
|
|
this.onTrigger1Click();
|
|
return;
|
|
}
|
|
var o = {start: 0};
|
|
this.store.baseParams = this.store.baseParams || {};
|
|
this.store.baseParams[this.paramName] = v;
|
|
this.store.reload({params:o});
|
|
this.hasSearch = true;
|
|
this.triggers[0].show();
|
|
}
|
|
});Ext.ns('Ext.ux.form');
|
|
|
|
/**
|
|
* @class Ext.ux.form.SelectBox
|
|
* @extends Ext.form.ComboBox
|
|
* <p>Makes a ComboBox more closely mimic an HTML SELECT. Supports clicking and dragging
|
|
* through the list, with item selection occurring when the mouse button is released.
|
|
* When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
|
|
* on inner elements. Re-enabling editable after calling this will NOT work.</p>
|
|
* @author Corey Gilmore http://extjs.com/forum/showthread.php?t=6392
|
|
* @history 2007-07-08 jvs
|
|
* Slight mods for Ext 2.0
|
|
* @xtype selectbox
|
|
*/
|
|
Ext.ux.form.SelectBox = Ext.extend(Ext.form.ComboBox, {
|
|
constructor: function(config){
|
|
this.searchResetDelay = 1000;
|
|
config = config || {};
|
|
config = Ext.apply(config || {}, {
|
|
editable: false,
|
|
forceSelection: true,
|
|
rowHeight: false,
|
|
lastSearchTerm: false,
|
|
triggerAction: 'all',
|
|
mode: 'local'
|
|
});
|
|
|
|
Ext.ux.form.SelectBox.superclass.constructor.apply(this, arguments);
|
|
|
|
this.lastSelectedIndex = this.selectedIndex || 0;
|
|
},
|
|
|
|
initEvents : function(){
|
|
Ext.ux.form.SelectBox.superclass.initEvents.apply(this, arguments);
|
|
// you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE
|
|
this.el.on('keydown', this.keySearch, this, true);
|
|
this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);
|
|
},
|
|
|
|
keySearch : function(e, target, options) {
|
|
var raw = e.getKey();
|
|
var key = String.fromCharCode(raw);
|
|
var startIndex = 0;
|
|
|
|
if( !this.store.getCount() ) {
|
|
return;
|
|
}
|
|
|
|
switch(raw) {
|
|
case Ext.EventObject.HOME:
|
|
e.stopEvent();
|
|
this.selectFirst();
|
|
return;
|
|
|
|
case Ext.EventObject.END:
|
|
e.stopEvent();
|
|
this.selectLast();
|
|
return;
|
|
|
|
case Ext.EventObject.PAGEDOWN:
|
|
this.selectNextPage();
|
|
e.stopEvent();
|
|
return;
|
|
|
|
case Ext.EventObject.PAGEUP:
|
|
this.selectPrevPage();
|
|
e.stopEvent();
|
|
return;
|
|
}
|
|
|
|
// skip special keys other than the shift key
|
|
if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
|
|
return;
|
|
}
|
|
if( this.lastSearchTerm == key ) {
|
|
startIndex = this.lastSelectedIndex;
|
|
}
|
|
this.search(this.displayField, key, startIndex);
|
|
this.cshTask.delay(this.searchResetDelay);
|
|
},
|
|
|
|
onRender : function(ct, position) {
|
|
this.store.on('load', this.calcRowsPerPage, this);
|
|
Ext.ux.form.SelectBox.superclass.onRender.apply(this, arguments);
|
|
if( this.mode == 'local' ) {
|
|
this.initList();
|
|
this.calcRowsPerPage();
|
|
}
|
|
},
|
|
|
|
onSelect : function(record, index, skipCollapse){
|
|
if(this.fireEvent('beforeselect', this, record, index) !== false){
|
|
this.setValue(record.data[this.valueField || this.displayField]);
|
|
if( !skipCollapse ) {
|
|
this.collapse();
|
|
}
|
|
this.lastSelectedIndex = index + 1;
|
|
this.fireEvent('select', this, record, index);
|
|
}
|
|
},
|
|
|
|
afterRender : function() {
|
|
Ext.ux.form.SelectBox.superclass.afterRender.apply(this, arguments);
|
|
if(Ext.isWebKit) {
|
|
this.el.swallowEvent('mousedown', true);
|
|
}
|
|
this.el.unselectable();
|
|
this.innerList.unselectable();
|
|
this.trigger.unselectable();
|
|
this.innerList.on('mouseup', function(e, target, options) {
|
|
if( target.id && target.id == this.innerList.id ) {
|
|
return;
|
|
}
|
|
this.onViewClick();
|
|
}, this);
|
|
|
|
this.innerList.on('mouseover', function(e, target, options) {
|
|
if( target.id && target.id == this.innerList.id ) {
|
|
return;
|
|
}
|
|
this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
|
|
this.cshTask.delay(this.searchResetDelay);
|
|
}, this);
|
|
|
|
this.trigger.un('click', this.onTriggerClick, this);
|
|
this.trigger.on('mousedown', function(e, target, options) {
|
|
e.preventDefault();
|
|
this.onTriggerClick();
|
|
}, this);
|
|
|
|
this.on('collapse', function(e, target, options) {
|
|
Ext.getDoc().un('mouseup', this.collapseIf, this);
|
|
}, this, true);
|
|
|
|
this.on('expand', function(e, target, options) {
|
|
Ext.getDoc().on('mouseup', this.collapseIf, this);
|
|
}, this, true);
|
|
},
|
|
|
|
clearSearchHistory : function() {
|
|
this.lastSelectedIndex = 0;
|
|
this.lastSearchTerm = false;
|
|
},
|
|
|
|
selectFirst : function() {
|
|
this.focusAndSelect(this.store.data.first());
|
|
},
|
|
|
|
selectLast : function() {
|
|
this.focusAndSelect(this.store.data.last());
|
|
},
|
|
|
|
selectPrevPage : function() {
|
|
if( !this.rowHeight ) {
|
|
return;
|
|
}
|
|
var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
|
|
this.focusAndSelect(this.store.getAt(index));
|
|
},
|
|
|
|
selectNextPage : function() {
|
|
if( !this.rowHeight ) {
|
|
return;
|
|
}
|
|
var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
|
|
this.focusAndSelect(this.store.getAt(index));
|
|
},
|
|
|
|
search : function(field, value, startIndex) {
|
|
field = field || this.displayField;
|
|
this.lastSearchTerm = value;
|
|
var index = this.store.find.apply(this.store, arguments);
|
|
if( index !== -1 ) {
|
|
this.focusAndSelect(index);
|
|
}
|
|
},
|
|
|
|
focusAndSelect : function(record) {
|
|
var index = Ext.isNumber(record) ? record : this.store.indexOf(record);
|
|
this.select(index, this.isExpanded());
|
|
this.onSelect(this.store.getAt(index), index, this.isExpanded());
|
|
},
|
|
|
|
calcRowsPerPage : function() {
|
|
if( this.store.getCount() ) {
|
|
this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
|
|
this.rowsPerPage = this.maxHeight / this.rowHeight;
|
|
} else {
|
|
this.rowHeight = false;
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
Ext.reg('selectbox', Ext.ux.form.SelectBox);
|
|
|
|
//backwards compat
|
|
Ext.ux.SelectBox = Ext.ux.form.SelectBox;
|
|
/**
|
|
* @class Ext.ux.SliderTip
|
|
* @extends Ext.Tip
|
|
* Simple plugin for using an Ext.Tip with a slider to show the slider value
|
|
*/
|
|
Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
|
|
minWidth: 10,
|
|
offsets : [0, -10],
|
|
init : function(slider){
|
|
slider.on('dragstart', this.onSlide, this);
|
|
slider.on('drag', this.onSlide, this);
|
|
slider.on('dragend', this.hide, this);
|
|
slider.on('destroy', this.destroy, this);
|
|
},
|
|
|
|
onSlide : function(slider){
|
|
this.show();
|
|
this.body.update(this.getText(slider));
|
|
this.doAutoWidth();
|
|
this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
|
|
},
|
|
|
|
getText : function(slider){
|
|
return String(slider.getValue());
|
|
}
|
|
});
|
|
Ext.ux.SlidingPager = Ext.extend(Object, {
|
|
init : function(pbar){
|
|
Ext.each(pbar.items.getRange(2,6), function(c){
|
|
c.hide();
|
|
});
|
|
var slider = new Ext.Slider({
|
|
width: 114,
|
|
minValue: 1,
|
|
maxValue: 1,
|
|
plugins: new Ext.ux.SliderTip({
|
|
getText : function(s){
|
|
return String.format('Page <b>{0}</b> of <b>{1}</b>', s.value, s.maxValue);
|
|
}
|
|
}),
|
|
listeners: {
|
|
changecomplete: function(s, v){
|
|
pbar.changePage(v);
|
|
}
|
|
}
|
|
});
|
|
pbar.insert(5, slider);
|
|
pbar.on({
|
|
change: function(pb, data){
|
|
slider.maxValue = data.pages;
|
|
slider.setValue(data.activePage);
|
|
},
|
|
beforedestroy: function(){
|
|
slider.destroy();
|
|
}
|
|
});
|
|
}
|
|
});Ext.ns('Ext.ux.form');
|
|
|
|
/**
|
|
* @class Ext.ux.form.SpinnerField
|
|
* @extends Ext.form.NumberField
|
|
* Creates a field utilizing Ext.ux.Spinner
|
|
* @xtype spinnerfield
|
|
*/
|
|
Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, {
|
|
actionMode: 'wrap',
|
|
deferHeight: true,
|
|
autoSize: Ext.emptyFn,
|
|
onBlur: Ext.emptyFn,
|
|
adjustSize: Ext.BoxComponent.prototype.adjustSize,
|
|
|
|
constructor: function(config) {
|
|
var spinnerConfig = Ext.copyTo({}, config, 'incrementValue,alternateIncrementValue,accelerate,defaultValue,triggerClass,splitterClass');
|
|
|
|
var spl = this.spinner = new Ext.ux.Spinner(spinnerConfig);
|
|
|
|
var plugins = config.plugins
|
|
? (Ext.isArray(config.plugins)
|
|
? config.plugins.push(spl)
|
|
: [config.plugins, spl])
|
|
: spl;
|
|
|
|
Ext.ux.form.SpinnerField.superclass.constructor.call(this, Ext.apply(config, {plugins: plugins}));
|
|
},
|
|
|
|
// private
|
|
getResizeEl: function(){
|
|
return this.wrap;
|
|
},
|
|
|
|
// private
|
|
getPositionEl: function(){
|
|
return this.wrap;
|
|
},
|
|
|
|
// private
|
|
alignErrorIcon: function(){
|
|
if (this.wrap) {
|
|
this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
|
|
}
|
|
},
|
|
|
|
validateBlur: function(){
|
|
return true;
|
|
}
|
|
});
|
|
|
|
Ext.reg('spinnerfield', Ext.ux.form.SpinnerField);
|
|
|
|
//backwards compat
|
|
Ext.form.SpinnerField = Ext.ux.form.SpinnerField;
|
|
/**
|
|
* @class Ext.ux.Spinner
|
|
* @extends Ext.util.Observable
|
|
* Creates a Spinner control utilized by Ext.ux.form.SpinnerField
|
|
*/
|
|
Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
|
|
incrementValue: 1,
|
|
alternateIncrementValue: 5,
|
|
triggerClass: 'x-form-spinner-trigger',
|
|
splitterClass: 'x-form-spinner-splitter',
|
|
alternateKey: Ext.EventObject.shiftKey,
|
|
defaultValue: 0,
|
|
accelerate: false,
|
|
|
|
constructor: function(config){
|
|
Ext.ux.Spinner.superclass.constructor.call(this, config);
|
|
Ext.apply(this, config);
|
|
this.mimicing = false;
|
|
},
|
|
|
|
init: function(field){
|
|
this.field = field;
|
|
|
|
field.afterMethod('onRender', this.doRender, this);
|
|
field.afterMethod('onEnable', this.doEnable, this);
|
|
field.afterMethod('onDisable', this.doDisable, this);
|
|
field.afterMethod('afterRender', this.doAfterRender, this);
|
|
field.afterMethod('onResize', this.doResize, this);
|
|
field.afterMethod('onFocus', this.doFocus, this);
|
|
field.beforeMethod('onDestroy', this.doDestroy, this);
|
|
},
|
|
|
|
doRender: function(ct, position){
|
|
var el = this.el = this.field.getEl();
|
|
var f = this.field;
|
|
|
|
if (!f.wrap) {
|
|
f.wrap = this.wrap = el.wrap({
|
|
cls: "x-form-field-wrap"
|
|
});
|
|
}
|
|
else {
|
|
this.wrap = f.wrap.addClass('x-form-field-wrap');
|
|
}
|
|
|
|
this.trigger = this.wrap.createChild({
|
|
tag: "img",
|
|
src: Ext.BLANK_IMAGE_URL,
|
|
cls: "x-form-trigger " + this.triggerClass
|
|
});
|
|
|
|
if (!f.width) {
|
|
this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
|
|
}
|
|
|
|
this.splitter = this.wrap.createChild({
|
|
tag: 'div',
|
|
cls: this.splitterClass,
|
|
style: 'width:13px; height:2px;'
|
|
});
|
|
this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();
|
|
|
|
this.proxy = this.trigger.createProxy('', this.splitter, true);
|
|
this.proxy.addClass("x-form-spinner-proxy");
|
|
this.proxy.setStyle('left', '0px');
|
|
this.proxy.setSize(14, 1);
|
|
this.proxy.hide();
|
|
this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
|
|
dragElId: this.proxy.id
|
|
});
|
|
|
|
this.initTrigger();
|
|
this.initSpinner();
|
|
},
|
|
|
|
doAfterRender: function(){
|
|
var y;
|
|
if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
|
|
this.el.position();
|
|
this.el.setY(y);
|
|
}
|
|
},
|
|
|
|
doEnable: function(){
|
|
if (this.wrap) {
|
|
this.wrap.removeClass(this.field.disabledClass);
|
|
}
|
|
},
|
|
|
|
doDisable: function(){
|
|
if (this.wrap) {
|
|
this.wrap.addClass(this.field.disabledClass);
|
|
this.el.removeClass(this.field.disabledClass);
|
|
}
|
|
},
|
|
|
|
doResize: function(w, h){
|
|
if (typeof w == 'number') {
|
|
this.el.setWidth(w - this.trigger.getWidth());
|
|
}
|
|
this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
|
|
},
|
|
|
|
doFocus: function(){
|
|
if (!this.mimicing) {
|
|
this.wrap.addClass('x-trigger-wrap-focus');
|
|
this.mimicing = true;
|
|
Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
|
|
delay: 10
|
|
});
|
|
this.el.on('keydown', this.checkTab, this);
|
|
}
|
|
},
|
|
|
|
// private
|
|
checkTab: function(e){
|
|
if (e.getKey() == e.TAB) {
|
|
this.triggerBlur();
|
|
}
|
|
},
|
|
|
|
// private
|
|
mimicBlur: function(e){
|
|
if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
|
|
this.triggerBlur();
|
|
}
|
|
},
|
|
|
|
// private
|
|
triggerBlur: function(){
|
|
this.mimicing = false;
|
|
Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
|
|
this.el.un("keydown", this.checkTab, this);
|
|
this.field.beforeBlur();
|
|
this.wrap.removeClass('x-trigger-wrap-focus');
|
|
this.field.onBlur.call(this.field);
|
|
},
|
|
|
|
initTrigger: function(){
|
|
this.trigger.addClassOnOver('x-form-trigger-over');
|
|
this.trigger.addClassOnClick('x-form-trigger-click');
|
|
},
|
|
|
|
initSpinner: function(){
|
|
this.field.addEvents({
|
|
'spin': true,
|
|
'spinup': true,
|
|
'spindown': true
|
|
});
|
|
|
|
this.keyNav = new Ext.KeyNav(this.el, {
|
|
"up": function(e){
|
|
e.preventDefault();
|
|
this.onSpinUp();
|
|
},
|
|
|
|
"down": function(e){
|
|
e.preventDefault();
|
|
this.onSpinDown();
|
|
},
|
|
|
|
"pageUp": function(e){
|
|
e.preventDefault();
|
|
this.onSpinUpAlternate();
|
|
},
|
|
|
|
"pageDown": function(e){
|
|
e.preventDefault();
|
|
this.onSpinDownAlternate();
|
|
},
|
|
|
|
scope: this
|
|
});
|
|
|
|
this.repeater = new Ext.util.ClickRepeater(this.trigger, {
|
|
accelerate: this.accelerate
|
|
});
|
|
this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
|
|
preventDefault: true
|
|
});
|
|
|
|
this.field.mon(this.trigger, {
|
|
mouseover: this.onMouseOver,
|
|
mouseout: this.onMouseOut,
|
|
mousemove: this.onMouseMove,
|
|
mousedown: this.onMouseDown,
|
|
mouseup: this.onMouseUp,
|
|
scope: this,
|
|
preventDefault: true
|
|
});
|
|
|
|
this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);
|
|
|
|
this.dd.setXConstraint(0, 0, 10)
|
|
this.dd.setYConstraint(1500, 1500, 10);
|
|
this.dd.endDrag = this.endDrag.createDelegate(this);
|
|
this.dd.startDrag = this.startDrag.createDelegate(this);
|
|
this.dd.onDrag = this.onDrag.createDelegate(this);
|
|
},
|
|
|
|
onMouseOver: function(){
|
|
if (this.disabled) {
|
|
return;
|
|
}
|
|
var middle = this.getMiddle();
|
|
this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
|
|
this.trigger.addClass(this.tmpHoverClass);
|
|
},
|
|
|
|
//private
|
|
onMouseOut: function(){
|
|
this.trigger.removeClass(this.tmpHoverClass);
|
|
},
|
|
|
|
//private
|
|
onMouseMove: function(){
|
|
if (this.disabled) {
|
|
return;
|
|
}
|
|
var middle = this.getMiddle();
|
|
if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
|
|
((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
|
|
}
|
|
},
|
|
|
|
//private
|
|
onMouseDown: function(){
|
|
if (this.disabled) {
|
|
return;
|
|
}
|
|
var middle = this.getMiddle();
|
|
this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
|
|
this.trigger.addClass(this.tmpClickClass);
|
|
},
|
|
|
|
//private
|
|
onMouseUp: function(){
|
|
this.trigger.removeClass(this.tmpClickClass);
|
|
},
|
|
|
|
//private
|
|
onTriggerClick: function(){
|
|
if (this.disabled || this.el.dom.readOnly) {
|
|
return;
|
|
}
|
|
var middle = this.getMiddle();
|
|
var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
|
|
this['onSpin' + ud]();
|
|
},
|
|
|
|
//private
|
|
getMiddle: function(){
|
|
var t = this.trigger.getTop();
|
|
var h = this.trigger.getHeight();
|
|
var middle = t + (h / 2);
|
|
return middle;
|
|
},
|
|
|
|
//private
|
|
//checks if control is allowed to spin
|
|
isSpinnable: function(){
|
|
if (this.disabled || this.el.dom.readOnly) {
|
|
Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
|
|
handleMouseWheel: function(e){
|
|
//disable scrolling when not focused
|
|
if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
|
|
return;
|
|
}
|
|
|
|
var delta = e.getWheelDelta();
|
|
if (delta > 0) {
|
|
this.onSpinUp();
|
|
e.stopEvent();
|
|
}
|
|
else
|
|
if (delta < 0) {
|
|
this.onSpinDown();
|
|
e.stopEvent();
|
|
}
|
|
},
|
|
|
|
//private
|
|
startDrag: function(){
|
|
this.proxy.show();
|
|
this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
|
|
},
|
|
|
|
//private
|
|
endDrag: function(){
|
|
this.proxy.hide();
|
|
},
|
|
|
|
//private
|
|
onDrag: function(){
|
|
if (this.disabled) {
|
|
return;
|
|
}
|
|
var y = Ext.fly(this.dd.getDragEl()).getTop();
|
|
var ud = '';
|
|
|
|
if (this._previousY > y) {
|
|
ud = 'Up';
|
|
} //up
|
|
if (this._previousY < y) {
|
|
ud = 'Down';
|
|
} //down
|
|
if (ud != '') {
|
|
this['onSpin' + ud]();
|
|
}
|
|
|
|
this._previousY = y;
|
|
},
|
|
|
|
//private
|
|
onSpinUp: function(){
|
|
if (this.isSpinnable() == false) {
|
|
return;
|
|
}
|
|
if (Ext.EventObject.shiftKey == true) {
|
|
this.onSpinUpAlternate();
|
|
return;
|
|
}
|
|
else {
|
|
this.spin(false, false);
|
|
}
|
|
this.field.fireEvent("spin", this);
|
|
this.field.fireEvent("spinup", this);
|
|
},
|
|
|
|
//private
|
|
onSpinDown: function(){
|
|
if (this.isSpinnable() == false) {
|
|
return;
|
|
}
|
|
if (Ext.EventObject.shiftKey == true) {
|
|
this.onSpinDownAlternate();
|
|
return;
|
|
}
|
|
else {
|
|
this.spin(true, false);
|
|
}
|
|
this.field.fireEvent("spin", this);
|
|
this.field.fireEvent("spindown", this);
|
|
},
|
|
|
|
//private
|
|
onSpinUpAlternate: function(){
|
|
if (this.isSpinnable() == false) {
|
|
return;
|
|
}
|
|
this.spin(false, true);
|
|
this.field.fireEvent("spin", this);
|
|
this.field.fireEvent("spinup", this);
|
|
},
|
|
|
|
//private
|
|
onSpinDownAlternate: function(){
|
|
if (this.isSpinnable() == false) {
|
|
return;
|
|
}
|
|
this.spin(true, true);
|
|
this.field.fireEvent("spin", this);
|
|
this.field.fireEvent("spindown", this);
|
|
},
|
|
|
|
spin: function(down, alternate){
|
|
var v = parseFloat(this.field.getValue());
|
|
var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
|
|
(down == true) ? v -= incr : v += incr;
|
|
|
|
v = (isNaN(v)) ? this.defaultValue : v;
|
|
v = this.fixBoundries(v);
|
|
this.field.setRawValue(v);
|
|
},
|
|
|
|
fixBoundries: function(value){
|
|
var v = value;
|
|
|
|
if (this.field.minValue != undefined && v < this.field.minValue) {
|
|
v = this.field.minValue;
|
|
}
|
|
if (this.field.maxValue != undefined && v > this.field.maxValue) {
|
|
v = this.field.maxValue;
|
|
}
|
|
|
|
return this.fixPrecision(v);
|
|
},
|
|
|
|
// private
|
|
fixPrecision: function(value){
|
|
var nan = isNaN(value);
|
|
if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
|
|
return nan ? '' : value;
|
|
}
|
|
return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
|
|
},
|
|
|
|
doDestroy: function(){
|
|
if (this.trigger) {
|
|
this.trigger.remove();
|
|
}
|
|
if (this.wrap) {
|
|
this.wrap.remove();
|
|
delete this.field.wrap;
|
|
}
|
|
|
|
if (this.splitter) {
|
|
this.splitter.remove();
|
|
}
|
|
|
|
if (this.dd) {
|
|
this.dd.unreg();
|
|
this.dd = null;
|
|
}
|
|
|
|
if (this.proxy) {
|
|
this.proxy.remove();
|
|
}
|
|
|
|
if (this.repeater) {
|
|
this.repeater.purgeListeners();
|
|
}
|
|
}
|
|
});
|
|
|
|
//backwards compat
|
|
Ext.form.Spinner = Ext.ux.Spinner;Ext.ux.Spotlight = function(config){
|
|
Ext.apply(this, config);
|
|
}
|
|
Ext.ux.Spotlight.prototype = {
|
|
active : false,
|
|
animate : true,
|
|
duration: .25,
|
|
easing:'easeNone',
|
|
|
|
// private
|
|
animated : false,
|
|
|
|
createElements : function(){
|
|
var bd = Ext.getBody();
|
|
|
|
this.right = bd.createChild({cls:'x-spotlight'});
|
|
this.left = bd.createChild({cls:'x-spotlight'});
|
|
this.top = bd.createChild({cls:'x-spotlight'});
|
|
this.bottom = bd.createChild({cls:'x-spotlight'});
|
|
|
|
this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
|
|
},
|
|
|
|
show : function(el, callback, scope){
|
|
if(this.animated){
|
|
this.show.defer(50, this, [el, callback, scope]);
|
|
return;
|
|
}
|
|
this.el = Ext.get(el);
|
|
if(!this.right){
|
|
this.createElements();
|
|
}
|
|
if(!this.active){
|
|
this.all.setDisplayed('');
|
|
this.applyBounds(true, false);
|
|
this.active = true;
|
|
Ext.EventManager.onWindowResize(this.syncSize, this);
|
|
this.applyBounds(false, this.animate, false, callback, scope);
|
|
}else{
|
|
this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous
|
|
}
|
|
},
|
|
|
|
hide : function(callback, scope){
|
|
if(this.animated){
|
|
this.hide.defer(50, this, [callback, scope]);
|
|
return;
|
|
}
|
|
Ext.EventManager.removeResizeListener(this.syncSize, this);
|
|
this.applyBounds(true, this.animate, true, callback, scope);
|
|
},
|
|
|
|
doHide : function(){
|
|
this.active = false;
|
|
this.all.setDisplayed(false);
|
|
},
|
|
|
|
syncSize : function(){
|
|
this.applyBounds(false, false);
|
|
},
|
|
|
|
applyBounds : function(basePts, anim, doHide, callback, scope){
|
|
|
|
var rg = this.el.getRegion();
|
|
|
|
var dw = Ext.lib.Dom.getViewWidth(true);
|
|
var dh = Ext.lib.Dom.getViewHeight(true);
|
|
|
|
var c = 0, cb = false;
|
|
if(anim){
|
|
cb = {
|
|
callback: function(){
|
|
c++;
|
|
if(c == 4){
|
|
this.animated = false;
|
|
if(doHide){
|
|
this.doHide();
|
|
}
|
|
Ext.callback(callback, scope, [this]);
|
|
}
|
|
},
|
|
scope: this,
|
|
duration: this.duration,
|
|
easing: this.easing
|
|
};
|
|
this.animated = true;
|
|
}
|
|
|
|
this.right.setBounds(
|
|
rg.right,
|
|
basePts ? dh : rg.top,
|
|
dw - rg.right,
|
|
basePts ? 0 : (dh - rg.top),
|
|
cb);
|
|
|
|
this.left.setBounds(
|
|
0,
|
|
0,
|
|
rg.left,
|
|
basePts ? 0 : rg.bottom,
|
|
cb);
|
|
|
|
this.top.setBounds(
|
|
basePts ? dw : rg.left,
|
|
0,
|
|
basePts ? 0 : dw - rg.left,
|
|
rg.top,
|
|
cb);
|
|
|
|
this.bottom.setBounds(
|
|
0,
|
|
rg.bottom,
|
|
basePts ? 0 : rg.right,
|
|
dh - rg.bottom,
|
|
cb);
|
|
|
|
if(!anim){
|
|
if(doHide){
|
|
this.doHide();
|
|
}
|
|
if(callback){
|
|
Ext.callback(callback, scope, [this]);
|
|
}
|
|
}
|
|
},
|
|
|
|
destroy : function(){
|
|
this.doHide();
|
|
Ext.destroy(
|
|
this.right,
|
|
this.left,
|
|
this.top,
|
|
this.bottom);
|
|
delete this.el;
|
|
delete this.all;
|
|
}
|
|
};
|
|
|
|
//backwards compat
|
|
Ext.Spotlight = Ext.ux.Spotlight;/**
|
|
* @class Ext.ux.StatusBar
|
|
* <p>Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}. In addition to
|
|
* supporting the standard {@link Ext.Toolbar} interface for adding buttons, menus and other items, the StatusBar
|
|
* provides a greedy status element that can be aligned to either side and has convenient methods for setting the
|
|
* status text and icon. You can also indicate that something is processing using the {@link #showBusy} method.</p>
|
|
* <pre><code>
|
|
new Ext.Panel({
|
|
title: 'StatusBar',
|
|
// etc.
|
|
bbar: new Ext.ux.StatusBar({
|
|
id: 'my-status',
|
|
|
|
// defaults to use when the status is cleared:
|
|
defaultText: 'Default status text',
|
|
defaultIconCls: 'default-icon',
|
|
|
|
// values to set initially:
|
|
text: 'Ready',
|
|
iconCls: 'ready-icon',
|
|
|
|
// any standard Toolbar items:
|
|
items: [{
|
|
text: 'A Button'
|
|
}, '-', 'Plain Text']
|
|
})
|
|
});
|
|
|
|
// Update the status bar later in code:
|
|
var sb = Ext.getCmp('my-status');
|
|
sb.setStatus({
|
|
text: 'OK',
|
|
iconCls: 'ok-icon',
|
|
clear: true // auto-clear after a set interval
|
|
});
|
|
|
|
// Set the status bar to show that something is processing:
|
|
sb.showBusy();
|
|
|
|
// processing....
|
|
|
|
sb.clearStatus(); // once completeed
|
|
</code></pre>
|
|
* @extends Ext.Toolbar
|
|
* @constructor
|
|
* Creates a new StatusBar
|
|
* @param {Object/Array} config A config object
|
|
*/
|
|
Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, {
|
|
/**
|
|
* @cfg {String} statusAlign
|
|
* The alignment of the status element within the overall StatusBar layout. When the StatusBar is rendered,
|
|
* it creates an internal div containing the status text and icon. Any additional Toolbar items added in the
|
|
* StatusBar's {@link #items} config, or added via {@link #add} or any of the supported add* methods, will be
|
|
* rendered, in added order, to the opposite side. The status element is greedy, so it will automatically
|
|
* expand to take up all sapce left over by any other items. Example usage:
|
|
* <pre><code>
|
|
// Create a left-aligned status bar containing a button,
|
|
// separator and text item that will be right-aligned (default):
|
|
new Ext.Panel({
|
|
title: 'StatusBar',
|
|
// etc.
|
|
bbar: new Ext.ux.StatusBar({
|
|
defaultText: 'Default status text',
|
|
id: 'status-id',
|
|
items: [{
|
|
text: 'A Button'
|
|
}, '-', 'Plain Text']
|
|
})
|
|
});
|
|
|
|
// By adding the statusAlign config, this will create the
|
|
// exact same toolbar, except the status and toolbar item
|
|
// layout will be reversed from the previous example:
|
|
new Ext.Panel({
|
|
title: 'StatusBar',
|
|
// etc.
|
|
bbar: new Ext.ux.StatusBar({
|
|
defaultText: 'Default status text',
|
|
id: 'status-id',
|
|
statusAlign: 'right',
|
|
items: [{
|
|
text: 'A Button'
|
|
}, '-', 'Plain Text']
|
|
})
|
|
});
|
|
</code></pre>
|
|
*/
|
|
/**
|
|
* @cfg {String} defaultText
|
|
* The default {@link #text} value. This will be used anytime the status bar is cleared with the
|
|
* <tt>useDefaults:true</tt> option (defaults to '').
|
|
*/
|
|
/**
|
|
* @cfg {String} defaultIconCls
|
|
* The default {@link #iconCls} value (see the iconCls docs for additional details about customizing the icon).
|
|
* This will be used anytime the status bar is cleared with the <tt>useDefaults:true</tt> option (defaults to '').
|
|
*/
|
|
/**
|
|
* @cfg {String} text
|
|
* A string that will be <b>initially</b> set as the status message. This string
|
|
* will be set as innerHTML (html tags are accepted) for the toolbar item.
|
|
* If not specified, the value set for <code>{@link #defaultText}</code>
|
|
* will be used.
|
|
*/
|
|
/**
|
|
* @cfg {String} iconCls
|
|
* A CSS class that will be <b>initially</b> set as the status bar icon and is
|
|
* expected to provide a background image (defaults to '').
|
|
* Example usage:<pre><code>
|
|
// Example CSS rule:
|
|
.x-statusbar .x-status-custom {
|
|
padding-left: 25px;
|
|
background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
|
|
}
|
|
|
|
// Setting a default icon:
|
|
var sb = new Ext.ux.StatusBar({
|
|
defaultIconCls: 'x-status-custom'
|
|
});
|
|
|
|
// Changing the icon:
|
|
sb.setStatus({
|
|
text: 'New status',
|
|
iconCls: 'x-status-custom'
|
|
});
|
|
</code></pre>
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} cls
|
|
* The base class applied to the containing element for this component on render (defaults to 'x-statusbar')
|
|
*/
|
|
cls : 'x-statusbar',
|
|
/**
|
|
* @cfg {String} busyIconCls
|
|
* The default <code>{@link #iconCls}</code> applied when calling
|
|
* <code>{@link #showBusy}</code> (defaults to <tt>'x-status-busy'</tt>).
|
|
* It can be overridden at any time by passing the <code>iconCls</code>
|
|
* argument into <code>{@link #showBusy}</code>.
|
|
*/
|
|
busyIconCls : 'x-status-busy',
|
|
/**
|
|
* @cfg {String} busyText
|
|
* The default <code>{@link #text}</code> applied when calling
|
|
* <code>{@link #showBusy}</code> (defaults to <tt>'Loading...'</tt>).
|
|
* It can be overridden at any time by passing the <code>text</code>
|
|
* argument into <code>{@link #showBusy}</code>.
|
|
*/
|
|
busyText : 'Loading...',
|
|
/**
|
|
* @cfg {Number} autoClear
|
|
* The number of milliseconds to wait after setting the status via
|
|
* <code>{@link #setStatus}</code> before automatically clearing the status
|
|
* text and icon (defaults to <tt>5000</tt>). Note that this only applies
|
|
* when passing the <tt>clear</tt> argument to <code>{@link #setStatus}</code>
|
|
* since that is the only way to defer clearing the status. This can
|
|
* be overridden by specifying a different <tt>wait</tt> value in
|
|
* <code>{@link #setStatus}</code>. Calls to <code>{@link #clearStatus}</code>
|
|
* always clear the status bar immediately and ignore this value.
|
|
*/
|
|
autoClear : 5000,
|
|
|
|
/**
|
|
* @cfg {String} emptyText
|
|
* The text string to use if no text has been set. Defaults to
|
|
* <tt>' '</tt>). If there are no other items in the toolbar using
|
|
* an empty string (<tt>''</tt>) for this value would end up in the toolbar
|
|
* height collapsing since the empty string will not maintain the toolbar
|
|
* height. Use <tt>''</tt> if the toolbar should collapse in height
|
|
* vertically when no text is specified and there are no other items in
|
|
* the toolbar.
|
|
*/
|
|
emptyText : ' ',
|
|
|
|
// private
|
|
activeThreadId : 0,
|
|
|
|
// private
|
|
initComponent : function(){
|
|
if(this.statusAlign=='right'){
|
|
this.cls += ' x-status-right';
|
|
}
|
|
Ext.ux.StatusBar.superclass.initComponent.call(this);
|
|
},
|
|
|
|
// private
|
|
afterRender : function(){
|
|
Ext.ux.StatusBar.superclass.afterRender.call(this);
|
|
|
|
var right = this.statusAlign == 'right';
|
|
this.currIconCls = this.iconCls || this.defaultIconCls;
|
|
this.statusEl = new Ext.Toolbar.TextItem({
|
|
cls: 'x-status-text ' + (this.currIconCls || ''),
|
|
text: this.text || this.defaultText || ''
|
|
});
|
|
|
|
if(right){
|
|
this.add('->');
|
|
this.add(this.statusEl);
|
|
}else{
|
|
this.insert(0, this.statusEl);
|
|
this.insert(1, '->');
|
|
}
|
|
|
|
// this.statusEl = td.createChild({
|
|
// cls: 'x-status-text ' + (this.iconCls || this.defaultIconCls || ''),
|
|
// html: this.text || this.defaultText || ''
|
|
// });
|
|
// this.statusEl.unselectable();
|
|
|
|
// this.spacerEl = td.insertSibling({
|
|
// tag: 'td',
|
|
// style: 'width:100%',
|
|
// cn: [{cls:'ytb-spacer'}]
|
|
// }, right ? 'before' : 'after');
|
|
},
|
|
|
|
/**
|
|
* Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing the
|
|
* status that was set after a specified interval.
|
|
* @param {Object/String} config A config object specifying what status to set, or a string assumed
|
|
* to be the status text (and all other options are defaulted as explained below). A config
|
|
* object containing any or all of the following properties can be passed:<ul>
|
|
* <li><tt>text</tt> {String} : (optional) The status text to display. If not specified, any current
|
|
* status text will remain unchanged.</li>
|
|
* <li><tt>iconCls</tt> {String} : (optional) The CSS class used to customize the status icon (see
|
|
* {@link #iconCls} for details). If not specified, any current iconCls will remain unchanged.</li>
|
|
* <li><tt>clear</tt> {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will
|
|
* automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not
|
|
* specified, the new status will not be auto-cleared and will stay until updated again or cleared using
|
|
* {@link #clearStatus}. If <tt>true</tt> is passed, the status will be cleared using {@link #autoClear},
|
|
* {@link #defaultText} and {@link #defaultIconCls} via a fade out animation. If a numeric value is passed,
|
|
* it will be used as the callback interval (in milliseconds), overriding the {@link #autoClear} value.
|
|
* All other options will be defaulted as with the boolean option. To customize any other options,
|
|
* you can pass an object in the format:<ul>
|
|
* <li><tt>wait</tt> {Number} : (optional) The number of milliseconds to wait before clearing
|
|
* (defaults to {@link #autoClear}).</li>
|
|
* <li><tt>anim</tt> {Number} : (optional) False to clear the status immediately once the callback
|
|
* executes (defaults to true which fades the status out).</li>
|
|
* <li><tt>useDefaults</tt> {Number} : (optional) False to completely clear the status text and iconCls
|
|
* (defaults to true which uses {@link #defaultText} and {@link #defaultIconCls}).</li>
|
|
* </ul></li></ul>
|
|
* Example usage:<pre><code>
|
|
// Simple call to update the text
|
|
statusBar.setStatus('New status');
|
|
|
|
// Set the status and icon, auto-clearing with default options:
|
|
statusBar.setStatus({
|
|
text: 'New status',
|
|
iconCls: 'x-status-custom',
|
|
clear: true
|
|
});
|
|
|
|
// Auto-clear with custom options:
|
|
statusBar.setStatus({
|
|
text: 'New status',
|
|
iconCls: 'x-status-custom',
|
|
clear: {
|
|
wait: 8000,
|
|
anim: false,
|
|
useDefaults: false
|
|
}
|
|
});
|
|
</code></pre>
|
|
* @return {Ext.ux.StatusBar} this
|
|
*/
|
|
setStatus : function(o){
|
|
o = o || {};
|
|
|
|
if(typeof o == 'string'){
|
|
o = {text:o};
|
|
}
|
|
if(o.text !== undefined){
|
|
this.setText(o.text);
|
|
}
|
|
if(o.iconCls !== undefined){
|
|
this.setIcon(o.iconCls);
|
|
}
|
|
|
|
if(o.clear){
|
|
var c = o.clear,
|
|
wait = this.autoClear,
|
|
defaults = {useDefaults: true, anim: true};
|
|
|
|
if(typeof c == 'object'){
|
|
c = Ext.applyIf(c, defaults);
|
|
if(c.wait){
|
|
wait = c.wait;
|
|
}
|
|
}else if(typeof c == 'number'){
|
|
wait = c;
|
|
c = defaults;
|
|
}else if(typeof c == 'boolean'){
|
|
c = defaults;
|
|
}
|
|
|
|
c.threadId = this.activeThreadId;
|
|
this.clearStatus.defer(wait, this, [c]);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional fade out animation.
|
|
* @param {Object} config (optional) A config object containing any or all of the following properties. If this
|
|
* object is not specified the status will be cleared using the defaults below:<ul>
|
|
* <li><tt>anim</tt> {Boolean} : (optional) True to clear the status by fading out the status element (defaults
|
|
* to false which clears immediately).</li>
|
|
* <li><tt>useDefaults</tt> {Boolean} : (optional) True to reset the text and icon using {@link #defaultText} and
|
|
* {@link #defaultIconCls} (defaults to false which sets the text to '' and removes any existing icon class).</li>
|
|
* </ul>
|
|
* @return {Ext.ux.StatusBar} this
|
|
*/
|
|
clearStatus : function(o){
|
|
o = o || {};
|
|
|
|
if(o.threadId && o.threadId !== this.activeThreadId){
|
|
// this means the current call was made internally, but a newer
|
|
// thread has set a message since this call was deferred. Since
|
|
// we don't want to overwrite a newer message just ignore.
|
|
return this;
|
|
}
|
|
|
|
var text = o.useDefaults ? this.defaultText : this.emptyText,
|
|
iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';
|
|
|
|
if(o.anim){
|
|
// animate the statusEl Ext.Element
|
|
this.statusEl.el.fadeOut({
|
|
remove: false,
|
|
useDisplay: true,
|
|
scope: this,
|
|
callback: function(){
|
|
this.setStatus({
|
|
text: text,
|
|
iconCls: iconCls
|
|
});
|
|
|
|
this.statusEl.el.show();
|
|
}
|
|
});
|
|
}else{
|
|
// hide/show the el to avoid jumpy text or icon
|
|
this.statusEl.hide();
|
|
this.setStatus({
|
|
text: text,
|
|
iconCls: iconCls
|
|
});
|
|
this.statusEl.show();
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Convenience method for setting the status text directly. For more flexible options see {@link #setStatus}.
|
|
* @param {String} text (optional) The text to set (defaults to '')
|
|
* @return {Ext.ux.StatusBar} this
|
|
*/
|
|
setText : function(text){
|
|
this.activeThreadId++;
|
|
this.text = text || '';
|
|
if(this.rendered){
|
|
this.statusEl.setText(this.text);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns the current status text.
|
|
* @return {String} The status text
|
|
*/
|
|
getText : function(){
|
|
return this.text;
|
|
},
|
|
|
|
/**
|
|
* Convenience method for setting the status icon directly. For more flexible options see {@link #setStatus}.
|
|
* See {@link #iconCls} for complete details about customizing the icon.
|
|
* @param {String} iconCls (optional) The icon class to set (defaults to '', and any current icon class is removed)
|
|
* @return {Ext.ux.StatusBar} this
|
|
*/
|
|
setIcon : function(cls){
|
|
this.activeThreadId++;
|
|
cls = cls || '';
|
|
|
|
if(this.rendered){
|
|
if(this.currIconCls){
|
|
this.statusEl.removeClass(this.currIconCls);
|
|
this.currIconCls = null;
|
|
}
|
|
if(cls.length > 0){
|
|
this.statusEl.addClass(cls);
|
|
this.currIconCls = cls;
|
|
}
|
|
}else{
|
|
this.currIconCls = cls;
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Convenience method for setting the status text and icon to special values that are pre-configured to indicate
|
|
* a "busy" state, usually for loading or processing activities.
|
|
* @param {Object/String} config (optional) A config object in the same format supported by {@link #setStatus}, or a
|
|
* string to use as the status text (in which case all other options for setStatus will be defaulted). Use the
|
|
* <tt>text</tt> and/or <tt>iconCls</tt> properties on the config to override the default {@link #busyText}
|
|
* and {@link #busyIconCls} settings. If the config argument is not specified, {@link #busyText} and
|
|
* {@link #busyIconCls} will be used in conjunction with all of the default options for {@link #setStatus}.
|
|
* @return {Ext.ux.StatusBar} this
|
|
*/
|
|
showBusy : function(o){
|
|
if(typeof o == 'string'){
|
|
o = {text:o};
|
|
}
|
|
o = Ext.applyIf(o || {}, {
|
|
text: this.busyText,
|
|
iconCls: this.busyIconCls
|
|
});
|
|
return this.setStatus(o);
|
|
}
|
|
});
|
|
Ext.reg('statusbar', Ext.ux.StatusBar);
|
|
/**
|
|
* @class Ext.ux.TabCloseMenu
|
|
* @extends Object
|
|
* Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs.
|
|
*
|
|
* @ptype tabclosemenu
|
|
*/
|
|
Ext.ux.TabCloseMenu = function(){
|
|
var tabs, menu, ctxItem;
|
|
this.init = function(tp){
|
|
tabs = tp;
|
|
tabs.on('contextmenu', onContextMenu);
|
|
};
|
|
|
|
function onContextMenu(ts, item, e){
|
|
if(!menu){ // create context menu on first right click
|
|
menu = new Ext.menu.Menu({
|
|
items: [{
|
|
id: tabs.id + '-close',
|
|
text: 'Close Tab',
|
|
handler : function(){
|
|
tabs.remove(ctxItem);
|
|
}
|
|
},{
|
|
id: tabs.id + '-close-others',
|
|
text: 'Close Other Tabs',
|
|
handler : function(){
|
|
tabs.items.each(function(item){
|
|
if(item.closable && item != ctxItem){
|
|
tabs.remove(item);
|
|
}
|
|
});
|
|
}
|
|
}]});
|
|
}
|
|
ctxItem = item;
|
|
var items = menu.items;
|
|
items.get(tabs.id + '-close').setDisabled(!item.closable);
|
|
var disableOthers = true;
|
|
tabs.items.each(function(){
|
|
if(this != item && this.closable){
|
|
disableOthers = false;
|
|
return false;
|
|
}
|
|
});
|
|
items.get(tabs.id + '-close-others').setDisabled(disableOthers);
|
|
e.stopEvent();
|
|
menu.showAt(e.getPoint());
|
|
}
|
|
};
|
|
|
|
Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);
|
|
Ext.ns('Ext.ux.grid');
|
|
|
|
/**
|
|
* @class Ext.ux.grid.TableGrid
|
|
* @extends Ext.grid.GridPanel
|
|
* A Grid which creates itself from an existing HTML table element.
|
|
* @history
|
|
* 2007-03-01 Original version by Nige "Animal" White
|
|
* 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor
|
|
* @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
|
|
* The table MUST have some type of size defined for the grid to fill. The container will be
|
|
* automatically set to position relative if it isn't already.
|
|
* @param {Object} config A config object that sets properties on this grid and has two additional (optional)
|
|
* properties: fields and columns which allow for customizing data fields and columns for this grid.
|
|
*/
|
|
Ext.ux.grid.TableGrid = function(table, config){
|
|
config = config ||
|
|
{};
|
|
Ext.apply(this, config);
|
|
var cf = config.fields || [], ch = config.columns || [];
|
|
table = Ext.get(table);
|
|
|
|
var ct = table.insertSibling();
|
|
|
|
var fields = [], cols = [];
|
|
var headers = table.query("thead th");
|
|
for (var i = 0, h; h = headers[i]; i++) {
|
|
var text = h.innerHTML;
|
|
var name = 'tcol-' + i;
|
|
|
|
fields.push(Ext.applyIf(cf[i] ||
|
|
{}, {
|
|
name: name,
|
|
mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
|
|
}));
|
|
|
|
cols.push(Ext.applyIf(ch[i] ||
|
|
{}, {
|
|
'header': text,
|
|
'dataIndex': name,
|
|
'width': h.offsetWidth,
|
|
'tooltip': h.title,
|
|
'sortable': true
|
|
}));
|
|
}
|
|
|
|
var ds = new Ext.data.Store({
|
|
reader: new Ext.data.XmlReader({
|
|
record: 'tbody tr'
|
|
}, fields)
|
|
});
|
|
|
|
ds.loadData(table.dom);
|
|
|
|
var cm = new Ext.grid.ColumnModel(cols);
|
|
|
|
if (config.width || config.height) {
|
|
ct.setSize(config.width || 'auto', config.height || 'auto');
|
|
}
|
|
else {
|
|
ct.setWidth(table.getWidth());
|
|
}
|
|
|
|
if (config.remove !== false) {
|
|
table.remove();
|
|
}
|
|
|
|
Ext.applyIf(this, {
|
|
'ds': ds,
|
|
'cm': cm,
|
|
'sm': new Ext.grid.RowSelectionModel(),
|
|
autoHeight: true,
|
|
autoWidth: false
|
|
});
|
|
Ext.ux.grid.TableGrid.superclass.constructor.call(this, ct, {});
|
|
};
|
|
|
|
Ext.extend(Ext.ux.grid.TableGrid, Ext.grid.GridPanel);
|
|
|
|
//backwards compat
|
|
Ext.grid.TableGrid = Ext.ux.grid.TableGrid;
|
|
|
|
|
|
Ext.ux.TabScrollerMenu = Ext.extend(Object, {
|
|
pageSize : 10,
|
|
maxText : 15,
|
|
menuPrefixText : 'Items',
|
|
constructor : function(config) {
|
|
config = config || {};
|
|
Ext.apply(this, config);
|
|
},
|
|
init : function(tabPanel) {
|
|
Ext.apply(tabPanel, this.tabPanelMethods);
|
|
|
|
tabPanel.tabScrollerMenu = this;
|
|
var thisRef = this;
|
|
|
|
tabPanel.on({
|
|
render : {
|
|
scope : tabPanel,
|
|
single : true,
|
|
fn : function() {
|
|
var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
|
|
tabPanel.createScrollers = newFn;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// private && sequeneced
|
|
createPanelsMenu : function() {
|
|
var h = this.stripWrap.dom.offsetHeight;
|
|
|
|
//move the right menu item to the left 18px
|
|
var rtScrBtn = this.header.dom.firstChild;
|
|
Ext.fly(rtScrBtn).applyStyles({
|
|
right : '18px'
|
|
});
|
|
|
|
var stripWrap = Ext.get(this.strip.dom.parentNode);
|
|
stripWrap.applyStyles({
|
|
'margin-right' : '36px'
|
|
});
|
|
|
|
// Add the new righthand menu
|
|
var scrollMenu = this.header.insertFirst({
|
|
cls:'x-tab-tabmenu-right'
|
|
});
|
|
scrollMenu.setHeight(h);
|
|
scrollMenu.addClassOnOver('x-tab-tabmenu-over');
|
|
scrollMenu.on('click', this.showTabsMenu, this);
|
|
|
|
this.scrollLeft.show = this.scrollLeft.show.createSequence(function() {
|
|
scrollMenu.show();
|
|
});
|
|
|
|
this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() {
|
|
scrollMenu.hide();
|
|
});
|
|
|
|
},
|
|
// public
|
|
getPageSize : function() {
|
|
return this.pageSize;
|
|
},
|
|
// public
|
|
setPageSize : function(pageSize) {
|
|
this.pageSize = pageSize;
|
|
},
|
|
// public
|
|
getMaxText : function() {
|
|
return this.maxText;
|
|
},
|
|
// public
|
|
setMaxText : function(t) {
|
|
this.maxText = t;
|
|
},
|
|
getMenuPrefixText : function() {
|
|
return this.menuPrefixText;
|
|
},
|
|
setMenuPrefixText : function(t) {
|
|
this.menuPrefixText = t;
|
|
},
|
|
// private && applied to the tab panel itself.
|
|
tabPanelMethods : {
|
|
// all execute within the scope of the tab panel
|
|
// private
|
|
showTabsMenu : function(e) {
|
|
if (! this.tabsMenu) {
|
|
this.tabsMenu = new Ext.menu.Menu();
|
|
this.on('beforedestroy', this.tabsMenu.destroy, this.tabsMenu);
|
|
}
|
|
|
|
this.tabsMenu.removeAll();
|
|
|
|
this.generateTabMenuItems();
|
|
|
|
var target = Ext.get(e.getTarget());
|
|
var xy = target.getXY();
|
|
|
|
//Y param + 24 pixels
|
|
xy[1] += 24;
|
|
|
|
this.tabsMenu.showAt(xy);
|
|
},
|
|
// private
|
|
generateTabMenuItems : function() {
|
|
var curActive = this.getActiveTab();
|
|
var totalItems = this.items.getCount();
|
|
var pageSize = this.tabScrollerMenu.getPageSize();
|
|
|
|
|
|
if (totalItems > pageSize) {
|
|
var numSubMenus = Math.floor(totalItems / pageSize);
|
|
var remainder = totalItems % pageSize;
|
|
|
|
// Loop through all of the items and create submenus in chunks of 10
|
|
for (var i = 0 ; i < numSubMenus; i++) {
|
|
var curPage = (i + 1) * pageSize;
|
|
var menuItems = [];
|
|
|
|
|
|
for (var x = 0; x < pageSize; x++) {
|
|
index = x + curPage - pageSize;
|
|
var item = this.items.get(index);
|
|
menuItems.push(this.autoGenMenuItem(item));
|
|
}
|
|
|
|
this.tabsMenu.add({
|
|
text : this.tabScrollerMenu.getMenuPrefixText() + ' ' + (curPage - pageSize + 1) + ' - ' + curPage,
|
|
menu : menuItems
|
|
});
|
|
|
|
}
|
|
// remaining items
|
|
if (remainder > 0) {
|
|
var start = numSubMenus * pageSize;
|
|
menuItems = [];
|
|
for (var i = start ; i < totalItems; i ++ ) {
|
|
var item = this.items.get(i);
|
|
menuItems.push(this.autoGenMenuItem(item));
|
|
}
|
|
|
|
|
|
this.tabsMenu.add({
|
|
text : this.tabScrollerMenu.menuPrefixText + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
|
|
menu : menuItems
|
|
});
|
|
|
|
|
|
}
|
|
}
|
|
else {
|
|
this.items.each(function(item) {
|
|
if (item.id != curActive.id && ! item.hidden) {
|
|
menuItems.push(this.autoGenMenuItem(item));
|
|
}
|
|
}, this);
|
|
}
|
|
},
|
|
// private
|
|
autoGenMenuItem : function(item) {
|
|
var maxText = this.tabScrollerMenu.getMaxText();
|
|
var text = Ext.util.Format.ellipsis(item.title, maxText);
|
|
|
|
return {
|
|
text : text,
|
|
handler : this.showTabFromMenu,
|
|
scope : this,
|
|
disabled : item.disabled,
|
|
tabToShow : item,
|
|
iconCls : item.iconCls
|
|
}
|
|
|
|
},
|
|
// private
|
|
showTabFromMenu : function(menuItem) {
|
|
this.setActiveTab(menuItem.tabToShow);
|
|
}
|
|
}
|
|
});
|
|
Ext.ns('Ext.ux.tree');
|
|
|
|
/**
|
|
* @class Ext.ux.tree.XmlTreeLoader
|
|
* @extends Ext.tree.TreeLoader
|
|
* <p>A TreeLoader that can convert an XML document into a hierarchy of {@link Ext.tree.TreeNode}s.
|
|
* Any text value included as a text node in the XML will be added to the parent node as an attribute
|
|
* called <tt>innerText</tt>. Also, the tag name of each XML node will be added to the tree node as
|
|
* an attribute called <tt>tagName</tt>.</p>
|
|
* <p>By default, this class expects that your source XML will provide the necessary attributes on each
|
|
* node as expected by the {@link Ext.tree.TreePanel} to display and load properly. However, you can
|
|
* provide your own custom processing of node attributes by overriding the {@link #processNode} method
|
|
* and modifying the attributes as needed before they are used to create the associated TreeNode.</p>
|
|
* @constructor
|
|
* Creates a new XmlTreeloader.
|
|
* @param {Object} config A config object containing config properties.
|
|
*/
|
|
Ext.ux.tree.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
|
|
/**
|
|
* @property XML_NODE_ELEMENT
|
|
* XML element node (value 1, read-only)
|
|
* @type Number
|
|
*/
|
|
XML_NODE_ELEMENT : 1,
|
|
/**
|
|
* @property XML_NODE_TEXT
|
|
* XML text node (value 3, read-only)
|
|
* @type Number
|
|
*/
|
|
XML_NODE_TEXT : 3,
|
|
|
|
// private override
|
|
processResponse : function(response, node, callback){
|
|
var xmlData = response.responseXML;
|
|
var root = xmlData.documentElement || xmlData;
|
|
|
|
try{
|
|
node.beginUpdate();
|
|
node.appendChild(this.parseXml(root));
|
|
node.endUpdate();
|
|
|
|
if(typeof callback == "function"){
|
|
callback(this, node);
|
|
}
|
|
}catch(e){
|
|
this.handleFailure(response);
|
|
}
|
|
},
|
|
|
|
// private
|
|
parseXml : function(node) {
|
|
var nodes = [];
|
|
Ext.each(node.childNodes, function(n){
|
|
if(n.nodeType == this.XML_NODE_ELEMENT){
|
|
var treeNode = this.createNode(n);
|
|
if(n.childNodes.length > 0){
|
|
var child = this.parseXml(n);
|
|
if(typeof child == 'string'){
|
|
treeNode.attributes.innerText = child;
|
|
}else{
|
|
treeNode.appendChild(child);
|
|
}
|
|
}
|
|
nodes.push(treeNode);
|
|
}
|
|
else if(n.nodeType == this.XML_NODE_TEXT){
|
|
var text = n.nodeValue.trim();
|
|
if(text.length > 0){
|
|
return nodes = text;
|
|
}
|
|
}
|
|
}, this);
|
|
|
|
return nodes;
|
|
},
|
|
|
|
// private override
|
|
createNode : function(node){
|
|
var attr = {
|
|
tagName: node.tagName
|
|
};
|
|
|
|
Ext.each(node.attributes, function(a){
|
|
attr[a.nodeName] = a.nodeValue;
|
|
});
|
|
|
|
this.processAttributes(attr);
|
|
|
|
return Ext.ux.tree.XmlTreeLoader.superclass.createNode.call(this, attr);
|
|
},
|
|
|
|
/*
|
|
* Template method intended to be overridden by subclasses that need to provide
|
|
* custom attribute processing prior to the creation of each TreeNode. This method
|
|
* will be passed a config object containing existing TreeNode attribute name/value
|
|
* pairs which can be modified as needed directly (no need to return the object).
|
|
*/
|
|
processAttributes: Ext.emptyFn
|
|
});
|
|
|
|
//backwards compat
|
|
Ext.ux.XmlTreeLoader = Ext.ux.tree.XmlTreeLoader;
|
|
/**
|
|
* @class Ext.ux.ValidationStatus
|
|
* A {@link Ext.StatusBar} plugin that provides automatic error notification when the
|
|
* associated form contains validation errors.
|
|
* @extends Ext.Component
|
|
* @constructor
|
|
* Creates a new ValiationStatus plugin
|
|
* @param {Object} config A config object
|
|
*/
|
|
Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
|
|
/**
|
|
* @cfg {String} errorIconCls
|
|
* The {@link #iconCls} value to be applied to the status message when there is a
|
|
* validation error. Defaults to <tt>'x-status-error'</tt>.
|
|
*/
|
|
errorIconCls : 'x-status-error',
|
|
/**
|
|
* @cfg {String} errorListCls
|
|
* The css class to be used for the error list when there are validation errors.
|
|
* Defaults to <tt>'x-status-error-list'</tt>.
|
|
*/
|
|
errorListCls : 'x-status-error-list',
|
|
/**
|
|
* @cfg {String} validIconCls
|
|
* The {@link #iconCls} value to be applied to the status message when the form
|
|
* validates. Defaults to <tt>'x-status-valid'</tt>.
|
|
*/
|
|
validIconCls : 'x-status-valid',
|
|
|
|
/**
|
|
* @cfg {String} showText
|
|
* The {@link #text} value to be applied when there is a form validation error.
|
|
* Defaults to <tt>'The form has errors (click for details...)'</tt>.
|
|
*/
|
|
showText : 'The form has errors (click for details...)',
|
|
/**
|
|
* @cfg {String} showText
|
|
* The {@link #text} value to display when the error list is displayed.
|
|
* Defaults to <tt>'Click again to hide the error list'</tt>.
|
|
*/
|
|
hideText : 'Click again to hide the error list',
|
|
/**
|
|
* @cfg {String} submitText
|
|
* The {@link #text} value to be applied when the form is being submitted.
|
|
* Defaults to <tt>'Saving...'</tt>.
|
|
*/
|
|
submitText : 'Saving...',
|
|
|
|
// private
|
|
init : function(sb){
|
|
sb.on('render', function(){
|
|
this.statusBar = sb;
|
|
this.monitor = true;
|
|
this.errors = new Ext.util.MixedCollection();
|
|
this.listAlign = (sb.statusAlign=='right' ? 'br-tr?' : 'bl-tl?');
|
|
|
|
if(this.form){
|
|
this.form = Ext.getCmp(this.form).getForm();
|
|
this.startMonitoring();
|
|
this.form.on('beforeaction', function(f, action){
|
|
if(action.type == 'submit'){
|
|
// Ignore monitoring while submitting otherwise the field validation
|
|
// events cause the status message to reset too early
|
|
this.monitor = false;
|
|
}
|
|
}, this);
|
|
var startMonitor = function(){
|
|
this.monitor = true;
|
|
};
|
|
this.form.on('actioncomplete', startMonitor, this);
|
|
this.form.on('actionfailed', startMonitor, this);
|
|
}
|
|
}, this, {single:true});
|
|
sb.on({
|
|
scope: this,
|
|
afterlayout:{
|
|
single: true,
|
|
fn: function(){
|
|
// Grab the statusEl after the first layout.
|
|
sb.statusEl.getEl().on('click', this.onStatusClick, this, {buffer:200});
|
|
}
|
|
},
|
|
beforedestroy:{
|
|
single: true,
|
|
fn: this.onDestroy
|
|
}
|
|
});
|
|
},
|
|
|
|
// private
|
|
startMonitoring : function(){
|
|
this.form.items.each(function(f){
|
|
f.on('invalid', this.onFieldValidation, this);
|
|
f.on('valid', this.onFieldValidation, this);
|
|
}, this);
|
|
},
|
|
|
|
// private
|
|
stopMonitoring : function(){
|
|
this.form.items.each(function(f){
|
|
f.un('invalid', this.onFieldValidation, this);
|
|
f.un('valid', this.onFieldValidation, this);
|
|
}, this);
|
|
},
|
|
|
|
// private
|
|
onDestroy : function(){
|
|
this.stopMonitoring();
|
|
this.statusBar.statusEl.un('click', this.onStatusClick, this);
|
|
Ext.ux.ValidationStatus.superclass.onDestroy.call(this);
|
|
},
|
|
|
|
// private
|
|
onFieldValidation : function(f, msg){
|
|
if(!this.monitor){
|
|
return false;
|
|
}
|
|
if(msg){
|
|
this.errors.add(f.id, {field:f, msg:msg});
|
|
}else{
|
|
this.errors.removeKey(f.id);
|
|
}
|
|
this.updateErrorList();
|
|
if(this.errors.getCount() > 0){
|
|
if(this.statusBar.getText() != this.showText){
|
|
this.statusBar.setStatus({text:this.showText, iconCls:this.errorIconCls});
|
|
}
|
|
}else{
|
|
this.statusBar.clearStatus().setIcon(this.validIconCls);
|
|
}
|
|
},
|
|
|
|
// private
|
|
updateErrorList : function(){
|
|
if(this.errors.getCount() > 0){
|
|
var msg = '<ul>';
|
|
this.errors.each(function(err){
|
|
msg += ('<li id="x-err-'+ err.field.id +'"><a href="#">' + err.msg + '</a></li>');
|
|
}, this);
|
|
this.getMsgEl().update(msg+'</ul>');
|
|
}else{
|
|
this.getMsgEl().update('');
|
|
}
|
|
},
|
|
|
|
// private
|
|
getMsgEl : function(){
|
|
if(!this.msgEl){
|
|
this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
|
|
cls: this.errorListCls+' x-hide-offsets'
|
|
}, true);
|
|
|
|
this.msgEl.on('click', function(e){
|
|
var t = e.getTarget('li', 10, true);
|
|
if(t){
|
|
Ext.getCmp(t.id.split('x-err-')[1]).focus();
|
|
this.hideErrors();
|
|
}
|
|
}, this, {stopEvent:true}); // prevent anchor click navigation
|
|
}
|
|
return this.msgEl;
|
|
},
|
|
|
|
// private
|
|
showErrors : function(){
|
|
this.updateErrorList();
|
|
this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn('b', {duration:0.3, easing:'easeOut'});
|
|
this.statusBar.setText(this.hideText);
|
|
this.form.getEl().on('click', this.hideErrors, this, {single:true}); // hide if the user clicks directly into the form
|
|
},
|
|
|
|
// private
|
|
hideErrors : function(){
|
|
var el = this.getMsgEl();
|
|
if(el.isVisible()){
|
|
el.slideOut('b', {duration:0.2, easing:'easeIn'});
|
|
this.statusBar.setText(this.showText);
|
|
}
|
|
this.form.getEl().un('click', this.hideErrors, this);
|
|
},
|
|
|
|
// private
|
|
onStatusClick : function(){
|
|
if(this.getMsgEl().isVisible()){
|
|
this.hideErrors();
|
|
}else if(this.errors.getCount() > 0){
|
|
this.showErrors();
|
|
}
|
|
}
|
|
}); |