'
/**
* Called at the end of processActions. Override this if you need it.
* @param {Object} c Column model configuration object
* @param {Object} data See this.processActions method for details
*/
,userProcessing:Ext.emptyFn
// {{{
/**
* Init function
* @param {Ext.grid.GridPanel} grid Grid this plugin is in
*/
,init:function(grid) {
this.grid = grid;
// grid.on({scope:this, render:this.onRenderGrid});
grid.afterRender = grid.afterRender.createSequence(this.onRenderGrid, this);
var cm = this.grid.getColumnModel();
Ext.each(cm.config, function(c, idx) {
if('object' === typeof c.cellActions) {
c.origRenderer = cm.getRenderer(idx);
c.renderer = this.renderActions.createDelegate(this);
}
}, this);
} // eo function init
// }}}
// {{{
/**
* grid render event handler, install actionEvent handler on view.mainBody
* @private
*/
,onRenderGrid:function() {
// install click event handler on view mainBody
this.view = this.grid.getView();
var cfg = {scope:this};
cfg[this.actionEvent] = this.onClick;
this.view.mainBody.on(cfg);
} // eo function onRender
// }}}
// {{{
/**
* Returns data to apply to template. Override this if needed
* @param {Mixed} value
* @param {Object} cell object to set some attributes of the grid cell
* @param {Ext.data.Record} record from which the data is extracted
* @param {Number} row row index
* @param {Number} col col index
* @param {Ext.data.Store} store object from which the record is extracted
* @returns {Object} data to apply to template
*/
,getData:function(value, cell, record, row, col, store) {
return record.data || {};
}
// }}}
// {{{
/**
* replaces (but calls) the original renderer from column model
* @private
* @param {Mixed} value
* @param {Object} cell object to set some attributes of the grid cell
* @param {Ext.data.Record} record from which the data is extracted
* @param {Number} row row index
* @param {Number} col col index
* @param {Ext.data.Store} store object from which the record is extracted
* @returns {String} markup of cell content
*/
,renderActions:function(value, cell, record, row, col, store) {
// get column config from column model
var c = this.grid.getColumnModel().config[col];
// get output of the original renderer
var val = c.origRenderer(value, cell, record, row, col, store);
// get actions template if we need but don't have one
if(c.cellActions && !c.actionsTpl) {
c.actionsTpl = this.processActions(c);
c.actionsTpl.compile();
}
// return original renderer output if we don't have actions
else if(!c.cellActions) {
return val;
}
// get and return final markup
var data = this.getData.apply(this, arguments);
data.value = val;
return c.actionsTpl.apply(data);
} // eo function renderActions
// }}}
// {{{
/**
* processes the actions configs from column model column, saves callbacks and creates template
* @param {Object} c column model config of one column
* @private
*/
,processActions:function(c) {
// callbacks holder
this.callbacks = this.callbacks || {};
// data for intermediate template
var data = {
align:this.align || 'right'
,width:this.actionWidth * c.cellActions.length
,padding:'left' === this.align ? this.actionWidth * c.cellActions.length : 0
,value:'{value}'
,actions:[]
};
// cellActions loop
Ext.each(c.cellActions, function(a, i) {
// save callback
if(a.iconCls && 'function' === typeof (a.callback || a.cb)) {
this.callbacks[a.iconCls] = a.callback || a.cb;
}
// data for intermediate xtemplate action
var o = {
cls:a.iconIndex ? '{' + a.iconIndex + '}' : (a.iconCls ? a.iconCls : '')
,qtip:a.qtipIndex ? '{' + a.qtipIndex + '}' : (a.tooltip || a.qtip ? a.tooltip || a.qtip : '')
,style:a.style ? a.style : ''
};
data.actions.push(o);
}, this); // eo cellActions loop
this.userProcessing(c, data);
// get and return final template
var xt = new Ext.XTemplate(this.tpl);
return new Ext.Template(xt.apply(data));
} // eo function processActions
// }}}
// {{{
/**
* Grid body actionEvent event handler
* @private
*/
,onClick:function(e, target) {
// collect all variables for callback and/or events
var t = e.getTarget('div.ux-cell-action');
var row = e.getTarget('.x-grid3-row');
var col = this.view.findCellIndex(target.parentNode.parentNode);
var c = this.grid.getColumnModel().config[col];
var record, dataIndex, value, action;
if(t) {
record = this.grid.store.getAt(row.rowIndex);
dataIndex = c.dataIndex;
value = record.get(dataIndex);
action = t.className.replace(/ux-cell-action /, '');
}
// check if we've collected all necessary variables
if(false !== row && false !== col && record && dataIndex && action) {
// call callback if any
if(this.callbacks && 'function' === typeof this.callbacks[action]) {
this.callbacks[action](this.grid, record, action, value, row.rowIndex, col);
}
// fire events
if(true !== this.eventsSuspended && false === this.fireEvent('beforeaction', this.grid, record, action, value, dataIndex, row.rowIndex, col)) {
return;
}
else if(true !== this.eventsSuspended) {
this.fireEvent('action', this.grid, record, action, value, dataIndex, row.rowIndex, col);
}
}
} // eo function onClick
// }}}
});
// register xtype
Ext.reg('cellactions', Ext.ux.grid.CellActions);
// eof
// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* Ext.ux.grid.Search
*
* Search plugin
*
* @author Ing. Jozef Sakalos
* @copyright (c) 2008, by Ing. Jozef Sakalos
* @date 17. January 2008
* @version $Id: ext-ux-grid-search.js,v 1.1 2008/03/06 18:56:02 u0083428 Exp $
*/
Ext.namespace('Ext.ux', 'Ext.ux.grid');
/**
* @constructor
*/
Ext.ux.grid.Search = function(config) {
Ext.apply(this, config);
Ext.ux.grid.Search.superclass.constructor.call(this);
}; // end of constructor
Ext.extend(Ext.ux.grid.Search, Ext.util.Observable, {
// defaults
searchText:'Search'
,searchTipText:'Type a text to search and press Enter'
,position:'bottom'
,iconCls:false//'icon-magnifier'
,checkIndexes:'all'
,disableIndexes:[]
,dateFormat:undefined
,mode:'remote'
,xtype:'gridsearch'
,paramNames: {
fields:'fields'
,query:'query'
}
// {{{
,init:function(grid) {
this.grid = grid;
grid.onRender = grid.onRender.createSequence(this.onRender, this);
grid.reconfigure = grid.reconfigure.createSequence(this.reconfigure, this);
} // end of function init
// }}}
// {{{
,onRender:function() {
var grid = this.grid;
var tb = 'bottom' == this.position ? grid.bottomToolbar : grid.topToolbar;
// add menu
this.menu = new Ext.menu.Menu();
//tb.addSeparator();
tb.add({
text:this.searchText
,menu:this.menu
,iconCls:this.iconCls
});
// add filter field
this.field = new Ext.form.TwinTriggerField({
width:this.width
,selectOnFocus:undefined === this.selectOnFocus ? true : this.selectOnFocus
,trigger1Class:'x-form-clear-trigger'
,trigger2Class:'x-form-search-trigger'
,onTrigger1Click:this.onTriggerClear.createDelegate(this)
,onTrigger2Click:this.onTriggerSearch.createDelegate(this)
});
this.field.on('render', function() {
this.field.el.dom.qtip = this.searchTipText;
var map = new Ext.KeyMap(this.field.el, [{
key:Ext.EventObject.ENTER
,scope:this
,fn:this.onTriggerSearch
},{
key:Ext.EventObject.ESC
,scope:this
,fn:this.onTriggerClear
}]);
map.stopEvent = true;
}, this, {single:true});
tb.add(this.field);
// reconfigure
this.reconfigure();
} // end of function onRender
// }}}
// {{{
,onTriggerClear:function() {
this.field.setValue('');
this.field.focus();
this.onTriggerSearch();
} // end of function onTriggerClear
// }}}
// {{{
,onTriggerSearch:function() {
var val = this.field.getValue();
var store = this.grid.store;
if('local' === this.mode) {
store.clearFilter();
if(val) {
store.filterBy(function(r) {
var retval = false;
this.menu.items.each(function(item) {
if(!item.checked || retval) {
return;
}
var rv = r.get(item.dataIndex);
if(!(rv instanceof Date) || (this.dateFormat || r.fields.get(item.dataIndex).dateFormat)) {
rv = rv instanceof Date ? rv.format(this.dateFormat || r.fields.get(item.dataIndex).dateFormat) : rv;
var re = new RegExp(val, 'gi');
retval = re.test(rv);
}
}, this);
if(retval) {
return true;
}
return retval;
}, this);
}
else {
}
}
else {
// clear start (necessary if we have paging)
if(store.lastOptions && store.lastOptions.params) {
store.lastOptions.params[store.paramNames.start] = 0;
}
// get fields to search array
var fields = [];
this.menu.items.each(function(item) {
if(item.checked) {
fields.push(item.dataIndex);
}
});
// add fields and query to baseParams of store
delete(store.baseParams[this.paramNames.fields]);
delete(store.baseParams[this.paramNames.query]);
if (store.lastOptions && store.lastOptions.params) {
delete(store.lastOptions.params[this.paramNames.fields]);
delete(store.lastOptions.params[this.paramNames.query]);
}
if(fields.length) {
store.baseParams[this.paramNames.fields] = Ext.encode(fields);
store.baseParams[this.paramNames.query] = val;
}
// reload store
store.reload();
}
} // end of function onTriggerSearch
// }}}
// {{{
,setDisabled:function() {
this.field.setDisabled.apply(this.field, arguments);
} // end of function setDisabled
// }}}
// {{{
,enable:function() {
this.setDisabled(false);
} // end of function enable
// }}}
// {{{
,disable:function() {
this.setDisabled(true);
} // end of function disable
// }}}
// {{{
,reconfigure:function() {
// {{{
// remove old items
var menu = this.menu;
menu.removeAll();
// }}}
// {{{
// add new items
var cm = this.grid.colModel;
Ext.each(cm.config, function(config) {
var disable = false;
if(config.header && config.dataIndex) {
Ext.each(this.disableIndexes, function(item) {
disable = disable ? disable : item === config.dataIndex;
});
if(!disable) {
menu.add(new Ext.menu.CheckItem({
text:config.header
,hideOnClick:false
,checked:'all' === this.checkIndexes
,dataIndex:config.dataIndex
}));
}
}
}, this);
// }}}
// {{{
// check items
if(this.checkIndexes instanceof Array) {
Ext.each(this.checkIndexes, function(di) {
var item = menu.items.find(function(itm) {
return itm.dataIndex === di;
});
if(item) {
item.setChecked(true, true);
}
}, this);
}
// }}}
} // end of function reconfigure
// }}}
}); // end of extend
Ext.ns("Ext.ux.grid.GridSummary"); // namespace Ext.ux.grid.GridSummary
Ext.ux.grid.GridSummary = function(config) {
Ext.apply(this, config);
};
Ext.extend(Ext.ux.grid.GridSummary, Ext.util.Observable, {
init : function(grid) {
this.grid = grid;
this.cm = grid.getColumnModel();
this.view = grid.getView();
var v = this.view;
v.onLayout = this.onLayout; // override GridView's onLayout() method
v.afterMethod('render', this.refreshSummary, this);
v.afterMethod('refresh', this.refreshSummary, this);
v.afterMethod('syncScroll', this.syncSummaryScroll, this);
v.afterMethod('onColumnWidthUpdated', this.doWidth, this);
v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
v.afterMethod('onUpdate', this.refreshSummary, this);
v.afterMethod('onRemove', this.refreshSummary, this);
// update summary row on store's add / remove / clear events
grid.store.on('add', this.refreshSummary, this);
grid.store.on('remove', this.refreshSummary, this);
grid.store.on('clear', this.refreshSummary, this);
if (!this.rowTpl) {
this.rowTpl = new Ext.Template(
'
'
);
this.rowTpl.disableFormats = true;
}
this.rowTpl.compile();
if (!this.cellTpl) {
this.cellTpl = new Ext.Template(
'
',
' {value} ',
" | "
);
this.cellTpl.disableFormats = true;
}
this.cellTpl.compile();
},
calculate : function(rs, cs) {
var data = {}, r, c, cfg = this.cm.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 && cf.summaryType) {
data[c.name] = Ext.ux.grid.GridSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);
}
}
}
return data;
},
onLayout : function(vw, vh) {
// note: this method is scoped to the GridView
if (!this.grid.getGridEl().hasClass('x-grid-hide-gridsummary')) {
// readjust gridview's height only if grid summary row is visible
this.scroller.setHeight(vh - this.summary.getHeight());
}
},
syncSummaryScroll : function() {
var mb = this.view.scroller.dom;
this.view.summaryWrap.dom.scrollLeft = mb.scrollLeft;
this.view.summaryWrap.dom.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore)
},
doWidth : function(col, w, tw) {
var s = this.view.summary.dom;
s.firstChild.style.width = tw;
s.firstChild.rows[0].childNodes[col].style.width = w;
},
doAllWidths : function(ws, tw) {
var s = this.view.summary.dom, wlen = ws.length;
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 s = this.view.summary.dom;
var display = hidden ? 'none' : '';
s.firstChild.style.width = tw;
s.firstChild.rows[0].childNodes[col].style.display = display;
},
renderSummary : function(o, cs) {
cs = cs || this.view.getColumnData();
var cfg = this.cm.config;
var 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, new Ext.data.Record(o.data), -1, i, this.grid.store);
} 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('')
});
},
refreshSummary : function() {
if(!this.grid.rendered) {
return;
}
var g = this.grid, ds = g.store;
var cs = this.view.getColumnData();
var rs = ds.getRange();
var data = this.calculate(rs, cs);
var buf = this.renderSummary({data: data}, cs);
if (!this.view.summaryWrap) {
this.view.summaryWrap = Ext.DomHelper.insertAfter(this.view.scroller, {
tag: 'div',
cls: 'x-grid3-gridsummary-row-inner'
}, true);
} else {
this.view.summary.remove();
}
this.view.summary = this.view.summaryWrap.insertHtml('afterbegin', buf, true);
},
toggleSummary : function(visible) { // true to display summary row
var el = this.grid.getGridEl();
if (el) {
if (visible === undefined) {
visible = el.hasClass('x-grid-hide-gridsummary');
}
el[visible ? 'removeClass' : 'addClass']('x-grid-hide-gridsummary');
this.view.layout(); // readjust gridview height
}
},
getSummaryNode : function() {
return this.view.summary
}
});
Ext.ux.grid.GridSummary.Calculations = {
'sum' : function(v, record, field) {
return v + Ext.num(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.ux.grid.BufferedGridDragZone V0.1
* Copyright(c) 2007, http://www.siteartwork.de
*
* Licensed under the terms of the Open Source LGPL 3.0
* http://www.gnu.org/licenses/lgpl.html
*
* @author Thorsten Suckow-Homberg
*/
// private
// This is a support class used internally by the Grid components
Ext.namespace('Ext.ux.grid');
Ext.ux.grid.BufferedGridDragZone = function(grid, config){
this.view = grid.getView();
Ext.ux.grid.BufferedGridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);
// this.addEvents({
// 'startdrag' : true
//});
if(this.view.lockedBody){
this.setHandleElId(Ext.id(this.view.mainBody.dom));
this.setOuterHandleElId(Ext.id(this.view.lockedBody.dom));
}
this.scroll = false;
this.grid = grid;
this.ddel = document.createElement('div');
this.ddel.className = 'x-grid-dd-wrap';
this.view.ds.on('beforeselectionsload', this.onBeforeSelectionsLoad, this);
this.view.ds.on('selectionsload', this.onSelectionsLoad, this);
};
Ext.extend(Ext.ux.grid.BufferedGridDragZone, Ext.dd.DragZone, {
ddGroup : "GridDD",
isDropValid : true,
getDragData : function(e)
{
var t = Ext.lib.Event.getTarget(e);
var rowIndex = this.view.findRowIndex(t);
if(rowIndex !== false){
var sm = this.grid.selModel;
if(!sm.isSelected(rowIndex) || e.hasModifier()){
sm.handleMouseDown(this.grid, rowIndex, e);
}
return {grid: this.grid, ddel: this.ddel, rowIndex: rowIndex, selections:sm.getSelections()};
}
return false;
},
onInitDrag : function(e)
{
this.view.ds.loadSelections(this.grid.selModel.getPendingSelections(true));
var data = this.dragData;
this.ddel.innerHTML = this.grid.getDragDropText();
this.proxy.update(this.ddel);
// fire start drag?
},
onBeforeSelectionsLoad : function()
{
this.isDropValid = false;
Ext.fly(this.proxy.el.dom.firstChild).addClass('x-dd-drop-waiting');
},
onSelectionsLoad : function()
{
this.isDropValid = true;
this.ddel.innerHTML = this.grid.getDragDropText();
Ext.fly(this.proxy.el.dom.firstChild).removeClass('x-dd-drop-waiting');
},
afterRepair : function()
{
this.dragging = false;
},
getRepairXY : function(e, data)
{
return false;
},
onStartDrag : function()
{
},
onEndDrag : function(data, e)
{
// fire end drag?
},
onValidDrop : function(dd, e, id)
{
// fire drag drop?
this.hideProxy();
},
beforeInvalidDrop : function(e, id)
{
}
});
/*
* Ext.ux.BufferedGridToolbar V1.0
* Copyright(c) 2007, http://www.siteartwork.de
*
* Licensed under the terms of the Open Source LGPL 3.0
* http://www.gnu.org/licenses/lgpl.html
*
*
* @author Thorsten Suckow-Homberg
*/
/**
* @class Ext.ux.BufferedGridToolbar
* @extends Ext.Toolbar
* A specialized toolbar that is bound to a {@link Ext.ux.grid.BufferedGridView}
* and provides information about the indexes of the requested data and the buffer
* state.
* @constructor
* @param {Object} config
*/
Ext.namespace('Ext.ux');
Ext.ux.BufferedGridToolbar = Ext.extend(Ext.Toolbar, {
/**
* @cfg {Boolean} displayInfo
* True to display the displayMsg (defaults to false)
*/
/**
* @cfg {String} displayMsg
* The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
*/
displayMsg : 'Displaying {0} - {1} of {2}',
/**
* @cfg {String} emptyMsg
* The message to display when no records are found (defaults to "No data to display")
*/
emptyMsg : 'No data to display',
/**
* Value to display as the tooltip text for the refresh button. Defaults to
* "Refresh"
* @param {String}
*/
refreshText : "Refresh",
initComponent : function()
{
Ext.ux.BufferedGridToolbar.superclass.initComponent.call(this);
this.bind(this.view);
},
// private
updateInfo : function(rowIndex, visibleRows, totalCount)
{
if(this.displayEl){
var msg = totalCount == 0 ?
this.emptyMsg :
String.format(this.displayMsg, rowIndex+1,
rowIndex+visibleRows, totalCount);
this.displayEl.update(msg);
}
},
/**
* Unbinds the toolbar from the specified {@link Ext.ux.grid.BufferedGridView}
* @param {@link Ext.ux.grid.BufferedGridView} view The view to unbind
*/
unbind : function(view)
{
view.un('rowremoved', this.onRowRemoved, this);
view.un('rowsinserted', this.onRowsInserted, this);
view.un('beforebuffer', this.beforeBuffer, this);
view.un('cursormove', this.onCursorMove, this);
view.un('buffer', this.onBuffer, this);
this.view = undefined;
},
/**
* Binds the toolbar to the specified {@link Ext.ux.grid.BufferedGridView}
* @param {Ext.grid.GridPanel} view The view to bind
*/
bind : function(view)
{
view.on('rowremoved', this.onRowRemoved, this);
view.on('rowsinserted', this.onRowsInserted, this);
view.on('beforebuffer', this.beforeBuffer, this);
view.on('cursormove', this.onCursorMove, this);
view.on('buffer', this.onBuffer, this);
this.view = view;
},
// ----------------------------------- Listeners -------------------------------
onCursorMove : function(view, rowIndex, visibleRows, totalCount)
{
this.updateInfo(rowIndex, visibleRows, totalCount);
},
// private
onRowsInserted : function(view, start, end)
{
this.updateInfo(view.rowIndex, Math.min(view.ds.totalLength, view.visibleRows),
view.ds.totalLength);
},
// private
onRowRemoved : function(view, index, record)
{
this.updateInfo(view.rowIndex, Math.min(view.ds.totalLength, view.visibleRows),
view.ds.totalLength);
},
// private
beforeBuffer : function(view, store, rowIndex, visibleRows, totalCount)
{
this.loading.disable();
this.updateInfo(rowIndex, visibleRows, totalCount);
},
// private
onBuffer : function(view, store, rowIndex, visibleRows, totalCount)
{
this.loading.enable();
this.updateInfo(rowIndex, visibleRows, totalCount);
},
// private
onClick : function(type)
{
switch (type) {
case 'refresh':
this.view.reset(true);
break;
}
},
// private
onRender : function(ct, position)
{
Ext.PagingToolbar.superclass.onRender.call(this, ct, position);
this.loading = this.addButton({
tooltip : this.refreshText,
iconCls : "x-tbar-loading",
handler : this.onClick.createDelegate(this, ["refresh"])
});
this.addSeparator();
if(this.displayInfo){
this.displayEl = Ext.fly(this.el.dom).createChild({cls:'x-paging-info'});
}
}
});
/*
* Ext.ux.grid.BufferedGridView V0.1
* Copyright(c) 2007, http://www.siteartwork.de
*
* Licensed under the terms of the Open Source LGPL 3.0
* http://www.gnu.org/licenses/lgpl.html
*
* @author Thorsten Suckow-Homberg
*/
/**
* @class Ext.ux.grid.BufferedGridView
* @extends Ext.grid.GridView
*
*
* @constructor
* @param {Object} config
*/
Ext.namespace('Ext.ux.grid');
Ext.ux.grid.BufferedGridView = function(config) {
this.addEvents({
/**
* @event beforebuffer
* Fires when the store is about to buffer new data.
* @param {Ext.ux.BufferedGridView} this
* @param {Ext.data.Store} store The store
* @param {Number} rowIndex
* @param {Number} visibleRows
* @param {Number} totalCount
*/
'beforebuffer' : true,
/**
* @event buffer
* Fires when the store is finsihed buffering new data.
* @param {Ext.ux.BufferedGridView} this
* @param {Ext.data.Store} store The store
* @param {Number} rowIndex
* @param {Number} visibleRows
* @param {Number} totalCount
*/
'buffer' : true,
/**
* @event cursormove
* Fires when the the user scrolls through the data.
* @param {Ext.ux.BufferedGridView} this
* @param {Number} rowIndex The index of the first visible row in the
* grid absolute to it's position in the model.
* @param {Number} visibleRows The number of rows visible in the grid.
* @param {Number} totalCount
*/
'cursormove' : true
});
/**
* @cfg {Number} bufferSize The number of records that will at least always
* be available in the store for rendering. This value will be send to the
* server as the limit parameter and should not change during the
* lifetime of a grid component. Note: In a paging grid, this number would
* indicate the page size.
* The value should be set high enough to make a userfirendly scrolling
* possible and should be greater than the sum of {nearLimit} and
* {visibleRows}. Usually, a value in between 150 and 200 is good enough.
* A lesser value will more often make the store re-request new data, while
* a larger number will make loading times higher.
*/
/**
* @cfg {Number} nearLimit This value represents a near value that is responsible
* for deciding if a request for new data is needed. The lesser the number, the
* more often new data will be requested. The number should be set to a value
* that lies in between 1/4 to 1/2 of the {bufferSize}.
*/
/**
* @cfg {Number} horizontalScrollOffset The height of a horizontal aligned
* scrollbar. The scrollbar is shown if the total width of all visible
* columns exceeds the width of the grid component.
* On Windows XP (IE7, FF2), this value defaults to 16.
*/
this.horizontalScrollOffset = 16;
/**
* @cfg {Object} loadMaskConfig The config of the load mask that will be shown
* by the view if a request for new data is underway.
*/
this.loadMask = false;
Ext.apply(this, config);
/**
* The array represents the range of rows available in the buffer absolute to
* the indexes of the data model.
* @param {Array}
*/
this.bufferRange = [0, -1];
this.templates = {};
/**
* The master template adds an addiiotnal scrollbar to make cursoring in the
* data possible.
*/
this.templates.master = new Ext.Template(
'"
);
Ext.ux.grid.BufferedGridView.superclass.constructor.call(this);
};
Ext.extend(Ext.ux.grid.BufferedGridView, Ext.grid.GridView, {
// {{{ --------------------------properties-------------------------------------
/**
* This is the actual y-scroller that does control sending request to the server
* based upon the position of the scrolling cursor.
* @param {Ext.Element}
*/
liveScroller : null,
/**
* This is the panel that represents the amount of data in a given repository.
* The height gets computed via the total amount of records multiplied with
* the fixed(!) row height
* @param {native HTMLObject}
*/
liveScrollerInset : null,
/**
* The fixed row height for every row in the grid. The value is
* computed once the store has been loaded for the first time and used for
* various calculations during the lifetime of the grid component, such as
* the height of the scroller and the number of visible rows.
* @param {Number}
*/
rowHeight : -1,
/**
* Stores the number of visible rows that have to be rendered.
* @param {Number}
*/
visibleRows : 1,
/**
* Stores the last offset relative to a previously scroll action. This is
* needed for deciding wether the user scrolls up or down.
* @param {Number}
*/
lastIndex : -1,
/**
* Stores the last visible row at position "0" in the table view before
* a new scroll event was created and fired.
* @param {Number}
*/
lastRowIndex : 0,
/**
* Stores the value of the liveScroller's scrollTop DOM
* property.
* @param {Number}
*/
lastScrollPos : 0,
/**
* The current index of the row in the model that is displayed as the first
* visible row in the view.
* @param {Number}
*/
rowIndex : 0,
/**
* Set to true if the store is busy with loading new data.
* @param {Boolean}
*/
isBuffering : false,
/**
* If a request for new data was made and the user scrolls to a new position
* that lays not within the requested range of the new data, the queue will
* hold the latest requested position. If the buffering succeeds and the value
* of requestQueue is not within the range of the current buffer, data may be
* re-requested.
*
* @param {Number}
*/
requestQueue : -1,
/**
* The view's own load mask that will be shown when a request to data was made
* and there are no rows in the buffer left to render.
* @see {loadMaskConfig}
* @param {Ext.LoadMask}
*/
loadMask : null,
/**
* Set to true if a request for new data has been made while there
* are still rows in the buffer that can be rendered before the request
* finishes.
* @param {Boolean}
*/
isPrebuffering : false,
// }}}
// {{{ --------------------------public API methods-----------------------------
/**
* Resets the view to display the first row in the data model. This will
* change the scrollTop property of the scroller and may trigger a request
* to buffer new data, if the row index "0" is not within the buffer range and
* forceReload is set to true.
*
* @param {Boolean} forceReload true to reload the buffers contents,
* othwerwise false
*/
reset : function(forceReload)
{
if (forceReload === false) {
this.ds.modified = [];
this.grid.selModel.clearSelections(true);
this.rowIndex = 0;
this.lastScrollPos = 0;
this.lastRowIndex = 0;
this.lastIndex = 0;
this.bufferRange = [0, this.ds.bufferSize];
this.adjustScrollerPos(-this.liveScroller.dom.scrollTop, true);
this.showLoadMask(false);
this.refresh(true);
//this.replaceLiveRows(0, true);
this.fireEvent('cursormove', this, 0,
Math.min(this.ds.totalLength, this.visibleRows),
this.ds.totalLength);
} else {
var params = {
start : 0,
limit : this.ds.bufferSize
};
var sInfo = this.ds.sortInfo;
if (sInfo) {
params.dir = sInfo.direction;
params.sort = sInfo.field;
}
this.ds.load({
callback : function(){this.reset(false);},
scope : this,
params : params
});
}
},
// {{{ ------------adjusted methods for applying custom behavior----------------
/**
* Overwritten so the {@link Ext.ux.grid.BufferedGridDragZone} can be used
* with this view implementation.
*
* Since detaching a previously created DragZone from a grid panel seems to
* be impossible, a little workaround will tell the parent implementation
* that drad/drop is not enabled for this view's grid, and right after that
* the custom DragZone will be created, if neccessary.
*/
renderUI : function()
{
var g = this.grid;
var dEnabled = g.enableDragDrop || g.enableDrag;
g.enableDragDrop = false;
g.enableDrag = false;
Ext.ux.grid.BufferedGridView.superclass.renderUI.call(this);
var g = this.grid;
g.enableDragDrop = dEnabled;
g.enableDrag = dEnabled;
if(dEnabled){
var dd = new Ext.ux.grid.BufferedGridDragZone(g, {
ddGroup : g.ddGroup || 'GridDD'
});
}
if (this.loadMask) {
this.loadMask = new Ext.LoadMask(
this.mainBody.dom.parentNode.parentNode,
this.loadMask
);
}
},
/**
* The extended implementation attaches an listener to the beforeload
* event of the store of the grid. It is guaranteed that the listener will
* only be executed upon reloading of the store, sorting and initial loading
* of data. When the store does "buffer", all events are suspended and the
* beforeload event will not be triggered.
*
* @param {Ext.grid.GridPanel} grid The grid panel this view is attached to
*/
init: function(grid)
{
Ext.ux.grid.BufferedGridView.superclass.init.call(this, grid);
this.bufferRange = [0, this.ds.bufferSize];
this.ds.on('beforeload', this.onBeforeLoad, this);
},
/**
* Only render the viewable rect of the table. The number of rows visible to
* the user is defined in visibleRows.
* This implementation does completely overwrite the parent's implementation.
*/
// private
renderBody : function()
{
var markup = this.renderRows(0, this.visibleRows-1);
return this.templates.body.apply({rows: markup});
},
/**
* Inits the DOM native elements for this component.
* The properties liveScroller and liveScrollerInset will
* be respected as provided by the master template.
* The scroll listener for the liverScroller will also be
* added here as the mousewheel listener.
* This method overwrites the parents implementation.
*/
// private
initElements : function()
{
var E = Ext.Element;
var el = this.grid.getGridEl().dom.firstChild;
var cs = el.childNodes;
this.el = new E(el);
this.mainWrap = new E(cs[1]);
// liveScroller and liveScrollerInset
this.liveScroller = new E(cs[0]);
this.liveScrollerInset = this.liveScroller.dom.firstChild;
this.liveScroller.on('scroll', this.onLiveScroll, this);
this.mainHd = new E(this.mainWrap.dom.firstChild);
this.innerHd = this.mainHd.dom.firstChild;
this.scroller = new E(this.mainWrap.dom.childNodes[1]);
if(this.forceFit){
this.scroller.setStyle('overflow-x', 'hidden');
}
this.mainBody = new E(this.scroller.dom.firstChild);
// addd the mousewheel event to the table's body
this.mainBody.on('mousewheel', this.handleWheel, this);
this.focusEl = new E(this.scroller.dom.childNodes[1]);
this.focusEl.swallowEvent("click", true);
this.resizeMarker = new E(cs[2]);
this.resizeProxy = new E(cs[3]);
},
/**
* Layouts the grid's view taking the scroller into account. The height
* of the scroller gets adjusted depending on the total width of the columns.
* The width of the grid view will be adjusted so the header and the rows do
* not overlap the scroller.
* This method will also compute the row-height based on the first row this
* grid displays and will adjust the number of visible rows if a resize
* of the grid component happened.
* This method overwrites the parents implementation.
*/
//private
layout : function()
{
if(!this.mainBody){
return; // not rendered
}
var g = this.grid;
var c = g.getGridEl(), cm = this.cm,
expandCol = g.autoExpandColumn,
gv = this;
var csize = c.getSize(true);
// set vw to 19 to take scrollbar width into account!
var vw = csize.width-this.scrollOffset;
if(vw < 20 || csize.height < 20){ // display: none?
return;
}
if(g.autoHeight){
this.scroller.dom.style.overflow = 'visible';
}else{
this.el.setSize(csize.width, csize.height);
var hdHeight = this.mainHd.getHeight();
var vh = csize.height - (hdHeight);
this.scroller.setSize(vw, vh);
if(this.innerHd){
this.innerHd.style.width = (vw)+'px';
}
}
if(this.forceFit){
if(this.lastViewWidth != vw){
this.fitColumns(false, false);
this.lastViewWidth = vw;
}
}else {
this.autoExpand();
}
// adjust the number of visible rows and the height of the scroller.
this.adjustVisibleRows();
this.adjustBufferInset();
this.onLayout(vw, vh);
},
// {{{ ----------------------dom/mouse listeners--------------------------------
/**
* Called when a column width has been updated. Adjusts the scroller height
* and the number of visible rows wether the horizontal scrollbar is shown
* or not.
*/
onColumnWidthUpdated : function(col, w, tw)
{
this.adjustVisibleRows();
this.adjustBufferInset();
},
/**
* Called when the width of all columns has been updated. Adjusts the scroller
* height and the number of visible rows wether the horizontal scrollbar is shown
* or not.
*/
onAllColumnWidthsUpdated : function(ws, tw)
{
this.adjustVisibleRows();
this.adjustBufferInset();
},
/**
* Callback for selecting a row. The index of the row is the absolute index
* in the datamodel and gets translated to the index in the view.
* Overwrites the parent's implementation.
*/
// private
onRowSelect : function(row)
{
if (row < this.rowIndex || row > this.rowIndex+this.visibleRows) {
return;
}
var viewIndex = row-this.rowIndex;
this.addRowClass(viewIndex, "x-grid3-row-selected");
},
/**
* Callback for deselecting a row. The index of the row is the absolute index
* in the datamodel and gets translated to the index in the view.
* Overwrites the parent's implementation.
*/
// private
onRowDeselect : function(row)
{
if (row < this.rowIndex || row > this.rowIndex+this.visibleRows) {
return;
}
var viewIndex = row-this.rowIndex;
this.removeRowClass(viewIndex, "x-grid3-row-selected");
},
/**
* Callback for selecting a cell. The index of the row is the absolute index
* in the datamodel and gets translated to the index in the view.
* Overwrites the parent's implementation.
*/
// private
onCellSelect : function(row, col)
{
if (row < this.rowIndex || row > this.rowIndex+this.visibleRows) {
return;
}
var viewIndex = row-this.rowIndex;
var cell = this.getCell(viewIndex, col);
if(cell){
this.fly(cell).addClass("x-grid3-cell-selected");
}
},
/**
* Callback for deselecting a cell. The index of the row is the absolute index
* in the datamodel and gets translated to the index in the view.
* Overwrites the parent's implementation.
*/
// private
onCellDeselect : function(row, col)
{
if (row < this.rowIndex || row > this.rowIndex+this.visibleRows) {
return;
}
var viewIndex = row-this.rowIndex;
var cell = this.getCell(viewIndex, col);
if(cell){
this.fly(cell).removeClass("x-grid3-cell-selected");
}
},
/**
* Callback for onmouseover event of the grid's rows. The index of the row is
* the absolute index in the datamodel and gets translated to the index in the
* view.
* Overwrites the parent's implementation.
*/
// private
onRowOver : function(e, t)
{
var row;
if((row = this.findRowIndex(t)) !== false){
var viewIndex = row-this.rowIndex;
this.addRowClass(viewIndex, "x-grid3-row-over");
}
},
/**
* Callback for onmouseout event of the grid's rows. The index of the row is
* the absolute index in the datamodel and gets translated to the index in the
* view.
* Overwrites the parent's implementation.
*/
// private
onRowOut : function(e, t)
{
var row;
if((row = this.findRowIndex(t)) !== false && row !== this.findRowIndex(e.getRelatedTarget())){
var viewIndex = row-this.rowIndex;
this.removeRowClass(viewIndex, "x-grid3-row-over");
}
},
// {{{ ----------------------data listeners-------------------------------------
/**
* Called when the buffer gets cleared. Simply calls the updateLiveRows method
* with the adjusted index and should force the store to reload
*/
// private
onClear : function()
{
this.reset(false);//var newIndex = Math.max(this.bufferRange[0] - this.visibleRows, 0);
//this.updateLiveRows(newIndex, true, true);
},
/**
* Callback for the underlying store's remove method. The current
* implementation does only remove the selected row which record is in the
* current store.
*
*/
// private
onRemove : function(ds, record, index, isUpdate)
{
if (index == Number.MIN_VALUE || index == Number.MAX_VALUE) {
this.fireEvent("beforerowremoved", this, index, record);
this.fireEvent("rowremoved", this, index, record);
this.adjustBufferInset();
return;
}
var viewIndex = index + this.bufferRange[0];
if(isUpdate !== true){
this.fireEvent("beforerowremoved", this, viewIndex, record);
}
var domLength = this.getRows().length;
if (viewIndex < this.rowIndex) {
// if the according row is not displayed within the visible rect of
// the grid, just adjust the row index and the liveScroller
this.rowIndex--;
this.lastRowIndex = this.rowIndex;
this.adjustScrollerPos(-this.rowHeight, true);
this.fireEvent('cursormove', this, this.rowIndex,
Math.min(this.ds.totalLength, this.visibleRows),
this.ds.totalLength);
} else if (viewIndex >= this.rowIndex && viewIndex < this.rowIndex+domLength) {
var lastPossibleRIndex = this.rowIndex-this.bufferRange[0]+this.visibleRows;
var cInd = viewIndex-this.rowIndex;
var rec = this.ds.getAt(lastPossibleRIndex);
// did we reach the end of the buffer range?
if (rec == null) {
// are there more records we could use? send a buffer request
if (this.ds.totalLength > this.rowIndex+this.visibleRows) {
if(isUpdate !== true){
this.fireEvent("rowremoved", this, viewIndex, record);
}
this.updateLiveRows(this.rowIndex, true, true);
return;
} else {
// no more records, neither in the underlying data model
// nor in the data store
if (this.rowIndex == 0) {
// simply remove the row from the dom
this.removeRows(cInd, cInd);
} else {
// scroll a new row in the rect so the whole rect is filled
// with rows
this.rowIndex--;
if (this.rowIndex < this.bufferRange[0]) {
// buffer range is invalid! request new data
if(isUpdate !== true){
this.fireEvent("rowremoved", this, viewIndex, record);
}
this.updateLiveRows(this.rowIndex);
return;
} else {
// still records in the store, simply update the dom
this.replaceLiveRows(this.rowIndex);
}
}
}
} else {
// the record is right within the visible rect of the grid.
// remove the row that represents the record and append another
// record from the store
this.removeRows(cInd, cInd);
var html = this.renderRows(lastPossibleRIndex, lastPossibleRIndex);
Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html);
}
}
// a record within the bufferrange was removed, so adjust the buffer
// range
this.bufferRange[1]--;
this.adjustBufferInset();
if(isUpdate !== true){
this.fireEvent("rowremoved", this, viewIndex, record);
}
this.processRows(0, undefined, true);
},
/**
* The callback for the underlying data store when new data was added.
* If index equals to Number.MIN_VALUE or Number.MAX_VALUE, the
* method can't tell at which position in the underlying data model the
* records where added. However, if index equals to Number.MIN_VALUE,
* the rowIndex property will be adjusted to rowIndex+records.length,
* and the liveScroller's properties get adjusted so it matches the
* new total number of records of the underlying data model.
* The same will happen to any records that get added at the store index which
* is currently represented by the first visible row in the view.
* Any other value will cause the method to compute the number of rows that
* have to be (re-)painted and calling the insertRows method, if
* neccessary.
*
* This method triggers the beforerowsinserted and rowsinserted
* event, passing the indexes of the records as they may default to the
* positions in the underlying data model. However, due to the fact that
* any sort algorithm may have computed the indexes of the records, it is
* not guaranteed that the computed indexes equal to the indexes of the
* underlying data model.
*
* @param {Ext.ux.grid.BufferedStore} ds The datastore that buffers records
* from the underlying data model
* @param {Array} records An array containing the newly added
* {@link Ext.data.Record}s
* @param {Number} index The index of the position in the underlying
* {@link Ext.ux.grid.BufferedStore} where the rows
* were added.
*/
// private
onAdd : function(ds, records, index)
{
var recordLen = records.length;
// values of index which equal to Number.MIN_VALUE or Number.MAX_VALUE
// indicate that the records were not added to the store. The component
// does not know which index those records do have in the underlying
// data model
if (index == Number.MAX_VALUE || index == Number.MIN_VALUE) {
this.fireEvent("beforerowsinserted", this, index, index);
// if index equals to Number.MIN_VALUE, shift rows!
if (index == Number.MIN_VALUE) {
this.rowIndex = this.rowIndex + recordLen;
this.lastRowIndex = this.rowIndex;
this.bufferRange[0] += recordLen;
this.bufferRange[1] += recordLen;
this.adjustBufferInset();
this.adjustScrollerPos(this.rowHeight*recordLen, true);
this.fireEvent("rowsinserted", this, index, index);
this.processRows();
// the cursor did virtually move
this.fireEvent('cursormove', this, this.rowIndex,
Math.min(this.ds.totalLength, this.visibleRows),
this.ds.totalLength);
return;
}
this.adjustBufferInset();
this.fireEvent("rowsinserted", this, index, index);
return;
}
// only insert the rows which affect the current view.
var start = index+this.bufferRange[0];
var end = start + (recordLen-1);
var len = this.getRows().length;
var firstRow = 0;
var lastRow = 0;
// rows would be added at the end of the rows which are currently
// displayed, so fire the evnt and return
if (index >= (this.rowIndex-this.bufferRange[0])+len && len == this.visibleRows) {
this.fireEvent("beforerowsinserted", this, start, end);
this.fireEvent("rowsinserted", this, start, end);
this.adjustVisibleRows();
this.adjustBufferInset();
}
// rows get added before the first row in the view
else if (len == this.visibleRows && index <= this.rowIndex-this.bufferRange[0]) {
this.fireEvent("beforerowsinserted", this, start, end);
this.liveScroller.un('scroll', this.onLiveScroll, this);
this.rowIndex += recordLen;
this.lastRowIndex = this.rowIndex;
this.adjustVisibleRows();
this.adjustBufferInset();
this.adjustScrollerPos(this.rowHeight*recordLen, true);
this.fireEvent("rowsinserted", this, start, end);
this.processRows();
this.fireEvent('cursormove', this, this.rowIndex,
Math.min(this.ds.totalLength, this.visibleRows),
this.ds.totalLength);
}
// rows get added somewhere IN the current view
else if ((len < this.visibleRows ) || index > this.rowIndex-this.bufferRange[0]) {
firstRow = index;
lastRow = Math.min(end, this.rowIndex+this.visibleRows-1) - this.bufferRange[0];
this.insertRows(ds, firstRow, lastRow);
this.adjustVisibleRows();
this.adjustBufferInset();
}
},
// {{{ ----------------------store listeners------------------------------------
/**
* This callback for the store's "beforeload" event will adjust the start
* position and the limit of the data in the model to fetch. It is guaranteed
* that this method will only be called when the store initially loads,
* remeote-sorts or reloads.
* All other load events will be suspended when the view requests buffer data.
* See {updateLiveRows}.
*
* @param {Ext.data.Store} store The store the Grid Panel uses
* @param {Object} options The configuration object for the proxy that loads
* data from the server
*/
onBeforeLoad : function(store, options)
{
if (!options.params) {
options.params = {start : 0, limit : this.ds.bufferSize};
} else {
options.params.start = 0;
options.params.limit = this.ds.bufferSize;
}
options.scope = this;
options.callback = function(){this.reset(false);};
return true;
},
/**
* Method is used as a callback for the load-event of the attached data store.
* Adjusts the buffer inset based upon the totalCount property
* returned by the response.
* Overwrites the parent's implementation.
*/
onLoad : function(o1, o2, options)
{
this.adjustBufferInset();
},
/**
* This will be called when the data in the store has changed, i.e. a
* re-buffer has occured. If the table was not rendered yet, a call to
* refresh will initially render the table, which DOM elements will
* then be used to re-render the table upon scrolling.
*
*/
// private
onDataChange : function(store)
{
this.updateHeaderSortState();
},
/**
* A callback for the store when new data has been buffered successfully.
* If the current row index is not within the range of the newly created
* data buffer or another request to new data has been made while the store
* was loading, new data will be re-requested.
*
* Additionally, if there are any rows that have been selected which were not
* in the data store, the method will request the pending selections from
* the grid's selection model and add them to the selections if available.
* This is because the component assumes that a user who scrolls through the
* rows and updates the view's buffer during scrolling, can check the selected
* rows which come into the view for integrity. It is up to the user to
* deselect those rows not matchuing the selection.
* Additionally, if the version of the store changes during various requests
* and selections are still pending, the versionchange event of the store
* can delete the pending selections after a re-bufer happened and before this
* method was called.
*
*/
// private
liveBufferUpdate : function(o1, options, o2)
{
this.fireEvent('buffer', this, this.ds, this.rowIndex,
Math.max(this.visibleRows, this.getRows().length),
this.ds.getTotalCount());
this.isBuffering = false;
this.isPrebuffering = false;
this.showLoadMask(false);
// we have to stay in sync with rows that may have been skipped while
// the request was loading.
this.bufferRange = [
options.params.start,
options.params.start+options.params.limit
];
var pendingSelections = this.grid.selModel.getPendingSelections(false);
for (var i = 0, max_i = pendingSelections.length; i < max_i; i++) {
this.grid.selModel.clearPendingSelection(pendingSelections[i]);
}
if (this.isInRange(this.rowIndex)) {
this.replaceLiveRows(this.rowIndex);
} else {
this.updateLiveRows(this.rowIndex);
}
if (this.requestQueue >= 0) {
var offset = this.requestQueue;
this.requestQueue = -1;
this.updateLiveRows(offset);
}
},
// {{{ ----------------------scroll listeners------------------------------------
/**
* Handles mousewheel event on the table's body. This is neccessary since the
* liveScroller element is completely detached from the table's body.
*
* @param {Ext.EventObject} e The event object
*/
handleWheel : function(e)
{
if (this.rowHeight == -1) {
e.stopEvent();
return;
}
var d = e.getWheelDelta();
this.adjustScrollerPos(-(d*this.rowHeight));
e.stopEvent();
},
/**
* Handles scrolling through the grid. Since the grid is fixed and rows get
* removed/ added subsequently, the only way to determine the actual row in
* view is to measure the scrollTop property of the liveScroller's
* DOM element.
*
*/
onLiveScroll : function()
{
var scrollTop = this.liveScroller.dom.scrollTop;
var pixelsSkipped = scrollTop-this.lastScrollPos;
var rowsSkipped = Math.floor(pixelsSkipped/this.rowHeight);
// happens when no scrolling actually happened
if (pixelsSkipped == 0) {
return;
}
var cursor = Math.floor((scrollTop)/this.rowHeight);
this.rowIndex = cursor;
// the lastRowIndex will be set when refreshing the view finished
if (cursor == this.lastRowIndex) {
return;
}
this.updateLiveRows(cursor, rowsSkipped);
this.lastScrollPos = this.liveScroller.dom.scrollTop;
},
// {{{ --------------------------helpers----------------------------------------
// private
refreshRow : function(record)
{
var ds = this.ds, index;
if(typeof record == 'number'){
index = record;
record = ds.getAt(index);
}else{
index = ds.indexOf(record);
}
var viewIndex = index + this.bufferRange[0];
if (viewIndex < this.rowIndex || viewIndex >= this.rowIndex + this.visibleRows) {
this.fireEvent("rowupdated", this, viewIndex, record);
return;
}
this.insertRows(ds, index, index, true);
//this.getRow(index).rowIndex = index;
//this.onRemove(ds, record, index+1, true);
this.fireEvent("rowupdated", this, viewIndex, record);
},
/**
* Overwritten so the rowIndex can be changed to the absolute index.
*
* If the third parameter equals to true, the method will also
* repaint the selections.
*/
// private
processRows : function(startRow, skipStripe, paintSelections)
{
skipStripe = skipStripe || !this.grid.stripeRows;
// we will always process all rows in the view
startRow = 0;
var rows = this.getRows();
var cls = ' x-grid3-row-alt ';
var cursor = this.rowIndex;
var index = 0;
var selections = this.grid.selModel.selections;
var ds = this.ds;
for(var i = startRow, len = rows.length; i < len; i++){
index = i+cursor;
var row = rows[i];
// changed!
row.rowIndex = index;
if (paintSelections == true) {
if (this.grid.selModel.bufferedSelections[index] === true) {
this.addRowClass(i, "x-grid3-row-selected");
selections.add(ds.getAt(index-this.bufferRange[0]));
}
this.fly(row).removeClass("x-grid3-row-over");
}
if(!skipStripe){
var isAlt = ((i+1) % 2 == 0);
var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
if(isAlt == hasAlt){
continue;
}
if(isAlt){
row.className += " x-grid3-row-alt";
}else{
row.className = row.className.replace("x-grid3-row-alt", "");
}
}
}
},
/**
* API only, since the passed arguments are the indexes in the buffer store.
* However, the method will try to compute the indexes so they might match
* the indexes of the records in the underlying data model.
*
*/
// private
insertRows : function(dm, firstRow, lastRow, isUpdate)
{
var viewIndexFirst = firstRow + this.bufferRange[0];
var viewIndexLast = lastRow + this.bufferRange[0];
if (!isUpdate) {
this.fireEvent("beforerowsinserted", this, viewIndexFirst, viewIndexLast);
}
// first off, remove the rows at the bottom of the view to match the
// visibleRows value and to not cause any spill in the DOM
if (isUpdate !== true && this.getRows().length == this.visibleRows) {
this.removeRows((this.visibleRows-1)-(lastRow-firstRow), this.visibleRows-1);
}
if (isUpdate) {
this.removeRows(viewIndexFirst-this.rowIndex, viewIndexLast-this.rowIndex);
}
var html = this.renderRows(firstRow, lastRow);
var before = this.getRow(firstRow-(this.rowIndex-this.bufferRange[0]));
if (before) {
Ext.DomHelper.insertHtml('beforeBegin', before, html);
} else {
Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html);
}
if (isUpdate === true) {
var rows = this.getRows();
var cursor = this.rowIndex;
for (var i = 0, max_i = rows.length; i < max_i; i++) {
rows[i].rowIndex = cursor+i;
}
}
if (!isUpdate) {
this.fireEvent("rowsinserted", this, viewIndexFirst, viewIndexLast);
this.processRows(firstRow);
}
},
/**
* Focuses the specified cell.
* @param {Number} row The row index
* @param {Number} col The column index
*/
focusCell : function(row, col, hscroll)
{
var xy = this.ensureVisible(row, col, hscroll);
if (!xy) {
return;
}
this.focusEl.setXY(xy);
if(Ext.isGecko){
this.focusEl.focus();
}else{
this.focusEl.focus.defer(1, this.focusEl);
}
},
/**
* Makes sure that the requested /row/col is visible in the viewport.
* The method may invoke a request for new buffer data and triggers the
* scroll-event of the liveScroller element.
*
*/
// private
ensureVisible : function(row, col, hscroll)
{
if(typeof row != "number"){
row = row.rowIndex;
}
if(row < 0 || row >= this.ds.totalLength){
return;
}
col = (col !== undefined ? col : 0);
var rowInd = row-this.rowIndex;
if (row >= this.rowIndex+this.visibleRows) {
this.adjustScrollerPos(((row-(this.rowIndex+this.visibleRows))+1)*this.rowHeight);
} else if (row < this.rowIndex) {
this.adjustScrollerPos((rowInd)*this.rowHeight);
}
var rowInd = rowInd < 0 ? row : rowInd;
var rowEl = this.getRow(rowInd), cellEl;
if(!(hscroll === false && col === 0)){
while(this.cm.isHidden(col)){
col++;
}
cellEl = this.getCell(row-this.rowIndex, col);
}
if(!rowEl){
return;
}
var c = this.scroller.dom;
return cellEl ? Ext.fly(cellEl).getXY() : [c.scrollLeft, Ext.fly(rowEl).getY()];
},
/**
* Checks if the passed argument cursor lays within a renderable
* area. The area is renderable, if the sum of cursor and the visibleRows
* property does not exceed the current upper buffer limit.
*
* If this method returns true, it's basically save to re-render
* the view with cursor as the absolute position in the model
* as the first visible row.
*
* @param {Number} cursor The absolute position of the row in the data model.
*
* @return {Boolean} true, if the row can be rendered, otherwise
* false
*
*/
isInRange : function(rowIndex)
{
var lastRowIndex = Math.min(this.ds.totalLength-1,
rowIndex + this.visibleRows);
return (rowIndex >= this.bufferRange[0]) &&
(lastRowIndex <= this.bufferRange[1]);
},
/**
* Calculates the bufferRange start index for a buffer request
*
* @param {Boolean} inRange If the index is within the current buffer range
* @param {Number} index The index to use as a reference for the calculations
* @param {Boolean} down Wether the calculation was requested when the user scrolls down
*/
getPredictedBufferIndex : function(index, inRange, down)
{
if (!inRange) {
return Math.max(0, index-(2*this.nearLimit));
}
if (!down) {
return Math.max(0, (index-this.ds.bufferSize)+this.visibleRows);
}
if (down) {
return Math.max(0, Math.min(index, this.ds.totalLength-this.ds.bufferSize));
}
},
/**
* Updates the table view. Removes/appends rows as needed and fetches the
* cells content out of the available store. If the needed rows are not within
* the buffer, the method will advise the store to update it's contents.
*
* The method puts the requested cursor into the queue if a previously called
* buffering is in process.
*
* @param {Number} cursor The row's position, absolute to it's position in the
* data model
*
*/
updateLiveRows: function(index, forceRepaint, forceReload)
{
this.fireEvent('cursormove', this, index,
Math.min(this.ds.totalLength, this.visibleRows),
this.ds.totalLength);
var inRange = this.isInRange(index);
if (this.isBuffering && this.isPrebuffering) {
if (inRange) {
this.replaceLiveRows(index);
} else {
this.showLoadMask(true);
}
}
if (this.isBuffering) {
this.requestQueue = index;
return;
}
var lastIndex = this.lastIndex;
this.lastIndex = index;
var inRange = this.isInRange(index);
var down = false;
if (inRange && forceReload !== true) {
// repaint the table's view
this.replaceLiveRows(index, forceRepaint);
// lets decide if we can void this method or stay in here for
// requesting a buffer update
if (index > lastIndex) { // scrolling down
down = true;
var totalCount = this.ds.totalLength;
// while scrolling, we have not yet reached the row index
// that would trigger a re-buffer
if (index+this.visibleRows+this.nearLimit < this.bufferRange[1]) {
return;
}
// If we have already buffered the last range we can ever get
// by the queried data repository, we don't need to buffer again.
// This basically means that a re-buffer would only occur again
// if we are scrolling up.
if (this.bufferRange[1] >= totalCount) {
return;
}
} else if (index < lastIndex) { // scrolling up
down = false;
// We are scrolling up in the first buffer range we can ever get
// Re-buffering would only occur upon scrolling down.
if (this.bufferRange[0] <= 0) {
return;
}
// if we are scrolling up and we are moving in an acceptable
// buffer range, lets return.
if (index - this.nearLimit > this.bufferRange[0]) {
return;
}
} else {
return;
}
this.isPrebuffering = true;
}
// prepare for rebuffering
this.isBuffering = true
var bufferOffset = this.getPredictedBufferIndex(index, inRange, down);
var fetchSize = this.ds.bufferSize;
if (!inRange) {
this.showLoadMask(true);
}
this.fireEvent('beforebuffer', this, this.ds, index,
this.visibleRows, this.ds.totalLength);
this.ds.suspendEvents();
var sInfo = this.ds.sortInfo;
var params = {};
Ext.apply(params, this.ds.lastOptions);
params.start = bufferOffset;
params.limit = this.ds.bufferSize;
if (sInfo) {
params.dir = sInfo.direction;
params.sort = sInfo.field;
}
this.ds.load({
callback : this.liveBufferUpdate,
scope : this,
params : params
});
this.ds.resumeEvents();
},
/**
* Shows this' view own load mask to indicate that a large amount of buffer
* data was requested by the store.
* @param {Boolean} show true to show the load mask, otherwise
* false
*/
showLoadMask : function(show)
{
if (this.loadMask == null) {
if (show) {
this.loadMask = new Ext.LoadMask(this.mainBody.dom.parentNode.parentNode,
this.loadMaskConfig);
} else {
return;
}
}
if (show) {
this.loadMask.show();
} else {
this.loadMask.hide();
}
},
/**
* Renders the table body with the contents of the model. The method will
* prepend/ append rows after removing from either the end or the beginning
* of the table DOM to reduce expensive DOM calls.
* It will also take care of rendering the rows selected, taking the property
* bufferedSelections of the {@link BufferedRowSelectionModel} into
* account.
* Instead of calling this method directly, the updateLiveRows method
* should be called which takes care of rebuffering if needed, since this method
* will behave erroneous if data of the buffer is requested which may not be
* available.
*
* @param {Number} cursor The position of the data in the model to start
* rendering.
*
* @param {Boolean} forceReplace true for recomputing the DOM in the
* view, otherwise false.
*/
// private
replaceLiveRows : function(cursor, forceReplace)
{
var spill = cursor-this.lastRowIndex;
if (spill == 0 && forceReplace !== true) {
return;
}
// decide wether to prepend or append rows
// if spill is negative, we are scrolling up. Thus we have to prepend
// rows. If spill is positive, we have to append the buffers data.
var append = spill > 0;
// abs spill for simplyfiying append/prepend calculations
spill = Math.abs(spill);
// adjust cursor to the buffered model index
var cursorBuffer = cursor-this.bufferRange[0];
// we can skip checking for append or prepend if the spill is larger than
// visibleRows. We can paint the whole rows new then-
if (spill >= this.visibleRows || spill == 0) {
this.mainBody.update(this.renderRows(
cursorBuffer,
cursorBuffer+this.visibleRows-1
));
} else {
if (append) {
this.removeRows(0, spill-1);
var html = this.renderRows(cursorBuffer+this.visibleRows-spill,
cursorBuffer+this.visibleRows-1);
Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html);
} else {
this.removeRows(this.visibleRows-spill, this.visibleRows-1);
var html = this.renderRows(cursorBuffer, cursorBuffer+spill-1);
Ext.DomHelper.insertHtml('beforeBegin', this.mainBody.dom.firstChild, html);
}
}
this.processRows(0, undefined, true);
this.lastRowIndex = cursor;
},
/**
* Adjusts the scroller height to make sure each row in the dataset will be
* can be displayed, no matter which value the current height of the grid
* component equals to.
*/
// protected
adjustBufferInset : function()
{
var g = this.grid, ds = g.store;
var c = g.getGridEl();
var scrollbar = this.cm.getTotalWidth()+this.scrollOffset > c.getSize().width;
// adjust the height of the scrollbar
this.liveScroller.dom.style.height = this.liveScroller.dom.parentNode.offsetHeight +
(Ext.isGecko
? ((ds.totalLength > 0 && scrollbar)
? - this.horizontalScrollOffset
: 0)
: (((ds.totalLength > 0 && scrollbar)
? 0 : this.horizontalScrollOffset)))+"px";
if (this.rowHeight == -1) {
return;
}
if (ds.totalLength <= this.visibleRows) {
this.liveScrollerInset.style.height = "0px";
return;
}
var height = this.rowHeight*ds.totalLength;
height += (c.getSize().height-(this.visibleRows*this.rowHeight));
if (scrollbar) {
height -= this.horizontalScrollOffset;
}
this.liveScrollerInset.style.height = (height)+"px";
},
/**
* Recomputes the number of visible rows in the table based upon the height
* of the component. The method adjusts the rowIndex property as
* needed, if the sum of visible rows and the current row index exceeds the
* number of total data available.
*/
// protected
adjustVisibleRows : function()
{
if (this.rowHeight == -1) {
if (this.getRows()[0]) {
this.rowHeight = this.getRows()[0].offsetHeight;
} else {
return;
}
}
var g = this.grid, ds = g.store;
var c = g.getGridEl();
var cm = this.cm;
var size = c.getSize(true);
var vh = size.height;
var vw = size.width-this.scrollOffset;
// horizontal scrollbar shown?
if (cm.getTotalWidth() > vw) {
// yes!
vh -= this.horizontalScrollOffset;
}
vh -= this.mainHd.getHeight();
var visibleRows = Math.max(1, Math.floor(vh/this.rowHeight));
if (this.visibleRows == visibleRows) {
return;
}
this.visibleRows = visibleRows;
var totalLength = ds.totalLength;
if (this.rowIndex + visibleRows > totalLength) {
this.rowIndex = Math.max(0, ds.totalLength-this.visibleRows);
this.lastRowIndex = this.rowIndex;
this.updateLiveRows(this.rowIndex, true);
} else {
this.updateLiveRows(this.rowIndex, true);
}
},
adjustScrollerPos : function(pixels, suspendEvent)
{
var liveScroller = this.liveScroller;
if (suspendEvent === true) {
liveScroller.un('scroll', this.onLiveScroll, this);
}
liveScroller.dom.scrollTop += pixels;
if (suspendEvent === true) {
liveScroller.dom.scrollTop = liveScroller.dom.scrollTop;
liveScroller.on('scroll', this.onLiveScroll, this);
}
}
});
/*
* Ext.ux.data.BufferedJsonReader V0.1
* Copyright(c) 2007, http://www.siteartwork.de
*
* Licensed under the terms of the Open Source LGPL 3.0
* http://www.gnu.org/licenses/lgpl.html
*
* @author Thorsten Suckow-Homberg
*/
Ext.namespace('Ext.ux.data');
Ext.ux.data.BufferedJsonReader = function(meta, recordType){
Ext.ux.data.BufferedJsonReader.superclass.constructor.call(this, meta, recordType);
};
Ext.extend(Ext.ux.data.BufferedJsonReader, Ext.data.JsonReader, {
/**
* @cfg {String} versionProperty Name of the property from which to retrieve the
* version of the data repository this reader parses
* the reponse from
*/
/**
* Create a data block containing Ext.data.Records from a JSON object.
* @param {Object} o An object which contains an Array of row objects in the property specified
* in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
* which contains the total size of the dataset.
* @return {Object} data A data block which is used by an Ext.data.Store object as
* a cache of Ext.data.Records.
*/
readRecords : function(o)
{
var s = this.meta;
if(!this.ef && s.versionProperty) {
this.getVersion = this.getJsonAccessor(s.versionProperty);
}
// shorten for future calls
if (!this.__readRecords) {
this.__readRecords = Ext.ux.data.BufferedJsonReader.superclass.readRecords;
}
var intercept = this.__readRecords.call(this, o);
if (s.versionProperty) {
var v = this.getVersion(o);
intercept.version = (v === undefined || v === "") ? null : v;
}
return intercept;
}
});
/*
* Ext.ux.grid.BufferedRowSelectionModel V0.1
* Copyright(c) 2007, http://www.siteartwork.de
*
* Licensed under the terms of the Open Source LGPL 3.0
* http://www.gnu.org/licenses/lgpl.html
*
* @author Thorsten Suckow-Homberg
*/
Ext.namespace('Ext.ux.grid');
Ext.ux.grid.BufferedRowSelectionModel = function(config) {
this.addEvents({
/**
* The selection dirty event will be triggered in case records were
* inserted/ removed at view indexes that may affect the current
* selection ranges which are only represented by view indexes, but not
* current record-ids
*/
'selectiondirty' : true
});
Ext.apply(this, config);
this.bufferedSelections = {};
this.pendingSelections = {};
Ext.ux.grid.BufferedRowSelectionModel.superclass.constructor.call(this);
};
Ext.extend(Ext.ux.grid.BufferedRowSelectionModel, Ext.grid.RowSelectionModel, {
// private
initEvents : function()
{
Ext.ux.grid.BufferedRowSelectionModel.superclass.initEvents.call(this);
this.grid.store.on('add', this.onAdd, this);
this.grid.store.on('selectionsload', this.onSelectionsLoad, this);
},
// private
onRefresh : function()
{
//var ds = this.grid.store, index;
//var s = this.getSelections();
this.clearSelections(true);
/*for(var i = 0, len = s.length; i < len; i++){
var r = s[i];
if((index = ds.indexOfId(r.id)) != -1){
this.selectRow(index, true);
}
}
if(s.length != this.selections.getCount()){
this.fireEvent("selectionchange", this);
}*/
},
/**
* Callback is called when a row gets removed in the view. The process to
* invoke this method is as follows:
*
*
* - 1. store.remove(record);
* - 2. view.onRemove(store, record, indexInStore, isUpdate)
* [view triggers rowremoved event]
* - 3. this.onRemove(view, indexInStore, record)
*
*
* If r defaults to null and index is within the pending selections
* range, the selectionchange event will be called, too.
* Additionally, the method will shift all selections and trigger the
* selectiondirty event if any selections are pending.
*
*/
onRemove : function(v, index, r)
{
// if index equals to Number.MIN_VALUE or Number.MAX_VALUE, mark current
// pending selections as dirty
if ((index == Number.MIN_VALUE || index == Number.MAX_VALUE)) {
this.selections.remove(r);
this.fireEvent('selectiondirty', this, index, r);
return;
}
var viewIndex = index;
var fire = this.bufferedSelections[viewIndex] === true;
var ranges = this.getPendingSelections();
var rangesLength = ranges.length;
delete this.bufferedSelections[viewIndex];
delete this.pendingSelections[viewIndex];
if (r) {
this.selections.remove(r);
}
if (rangesLength == 0) {
this.shiftSelections(viewIndex, -1);
return;
}
var s = ranges[0];
var e = ranges[rangesLength-1];
if (viewIndex <= e || viewIndex <= s) {
if (this.fireEvent('selectiondirty', this, viewIndex, -1) !== false) {
this.shiftSelections(viewIndex, -1);
}
}
if (fire) {
this.fireEvent('selectionchange', this);
}
},
/**
* If records where added to the store, this method will work as a callback.
* The method gets usually called after the onAdd method of the according
* view was called.
* Selections will be shifted down if, and only if, the listeners for the
* selectiondirty event will return true.
*
*/
onAdd : function(store, records, index)
{
var ranges = this.getPendingSelections();
var rangesLength = ranges.length;
// if index equals to Number.MIN_VALUE or Number.MAX_VALUE, mark current
// pending selections as dirty
if ((index == Number.MIN_VALUE || index == Number.MAX_VALUE)) {
// we may shift selections if there are no pendning selections. Everything
// in the current buffer range will be shifted up!
if (rangesLength == 0 && index == Number.MIN_VALUE) {
this.shiftSelections(this.grid.view.bufferRange[0], records.length);
}
this.fireEvent('selectiondirty', this, index, records.length);
return;
}
if (rangesLength == 0) {
this.shiftSelections(this.grid.view.bufferRange[0]+index, records.length);
return;
}
// it is safe to say that the selection is dirty when the inserted index
// is less or equal to the first selection range index or less or equal
// to the last selection range index
var s = ranges[0];
var e = ranges[rangesLength-1];
var viewIndex = this.grid.view.bufferRange[0]+index;
if (viewIndex <= e || viewIndex <= s) {
if (this.fireEvent('selectiondirty', this, viewIndex, records.length) !== false) {
this.shiftSelections(viewIndex, records.length);
}
}
},
/**
* Shifts current/pending selections. This method can be used when rows where
* inserted/removed and the selection model has to synchronize itself.
*/
shiftSelections : function(startRow, length)
{
var index = 0;
var newSelections = {};
var newIndex = 0;
var newRequests = {};
var totalLength = this.grid.store.totalLength;
for (var i in this.bufferedSelections) {
index = parseInt(i);
newIndex = index+length;
if (newIndex >= totalLength) {
break;
}
if (index >= startRow) {
newSelections[newIndex] = true;
if (this.pendingSelections[i]) {
newRequests[newIndex] = true;
}
} else {
newSelections[i] = true;
if (this.pendingSelections[i]) {
newRequests[i] = true;
}
}
}
this.bufferedSelections = newSelections;
this.pendingSelections = newRequests;
},
/**
*
* @param {Array} records The records that have been loaded
* @param {Array} ranges An array representing the model index ranges the
* reords have been loaded for.
*/
onSelectionsLoad : function(store, records, ranges)
{
this.pendingSelections = {};
this.selections.addAll(records);
},
/**
* Returns true if there is a next record to select
* @return {Boolean}
*/
hasNext : function()
{
return this.last !== false && (this.last+1) < this.grid.store.getTotalCount();
},
/**
* Gets the number of selected rows.
* @return {Number}
*/
getCount : function()
{
var sels = this.bufferedSelections;
var c = 0;
for (var i in sels) {
c++;
}
return c;
},
/**
* Returns True if the specified row is selected.
* @param {Number/Record} record The record or index of the record to check
* @return {Boolean}
*/
isSelected : function(index)
{
if (typeof index == "number") {
return this.bufferedSelections[index] === true;
}
var r = index;
return (r && this.selections.key(r.id) ? true : false);
},
/**
* Deselects a row.
* @param {Number} row The index of the row to deselect
*/
deselectRow : function(index, preventViewNotify)
{
if(this.locked) return;
if(this.last == index){
this.last = false;
}
if(this.lastActive == index){
this.lastActive = false;
}
var r = this.grid.store.getAt(index-this.grid.getView().bufferRange[0]);
delete this.pendingSelections[index];
delete this.bufferedSelections[index];
if (r) {
this.selections.remove(r);
}
if(!preventViewNotify){
this.grid.getView().onRowDeselect(index);
}
this.fireEvent("rowdeselect", this, index, r);
this.fireEvent("selectionchange", this);
},
/**
* Selects a row.
* @param {Number} row The index of the row to select
* @param {Boolean} keepExisting (optional) True to keep existing selections
*/
selectRow : function(index, keepExisting, preventViewNotify){
// ignore store count, since this is our buffer and the rowIndex may indeed
// be greater than the count of records in the store
if(this.locked || index < 0) return;// || index >= this.grid.store.getCount())) return;
//var r = this.grid.store.getAt(index);
var r = this.grid.store.getAt(index-this.grid.getView().bufferRange[0]);
if(this.fireEvent("beforerowselect", this, index, keepExisting, r) !== false){
if(!keepExisting || this.singleSelect){
this.clearSelections();
}
if (r) {
this.selections.add(r);
delete this.pendingSelections[index];
} else {
this.pendingSelections[index] = true;
}
this.bufferedSelections[index] = true;
this.last = this.lastActive = index;
if(!preventViewNotify){
this.grid.getView().onRowSelect(index);
}
this.fireEvent("rowselect", this, index, r);
this.fireEvent("selectionchange", this);
}
},
clearPendingSelection : function(index)
{
var r = this.grid.store.getAt(index-this.grid.getView().bufferRange[0]);
if (!r) {
return;
}
this.selections.add(r);
delete this.pendingSelections[index];
},
getPendingSelections : function(asRange)
{
var index = 1;
var ranges = [];
var currentRange = 0;
var tmpArray = [];
for (var i in this.pendingSelections) {
tmpArray.push(parseInt(i));
}
tmpArray.sort(function(o1,o2){
if (o1 > o2) {
return 1;
} else if (o1 < o2) {
return -1;
} else {
return 0;
}
});
if (asRange === false) {
return tmpArray;
}
var max_i = tmpArray.length;
if (max_i == 0) {
return [];
}
ranges[currentRange] = [tmpArray[0], tmpArray[0]];
for (var i = 0, max_i = max_i-1; i < max_i; i++) {
if (tmpArray[i+1] - tmpArray[i] == 1) {
ranges[currentRange][1] = tmpArray[i+1];
} else {
currentRange++;
ranges[currentRange] = [tmpArray[i+1], tmpArray[i+1]];
}
}
return ranges;
},
/**
* Clears all selections.
*/
clearSelections : function(fast)
{
if(this.locked) return;
if(fast !== true){
//var ds = this.grid.store;
var s = this.selections;
/*s.each(function(r){
this.deselectRow(ds.indexOfId(r.id)+this.grid.getView().bufferRange[0]);
}, this);*/
s.clear();
for (var i in this.bufferedSelections) {
this.deselectRow(i);
}
}else{
this.selections.clear();
this.bufferedSelections = {};
this.pendingSelections = {};
}
this.last = false;
},
/**
* Selects a range of rows. All rows in between startRow and endRow are also
* selected.
*
* @param {Number} startRow The index of the first row in the range
* @param {Number} endRow The index of the last row in the range
* @param {Boolean} keepExisting (optional) True to retain existing selections
*/
selectRange : function(startRow, endRow, keepExisting)
{
if(this.locked) {
return;
}
if(!keepExisting) {
this.clearSelections();
}
if (startRow <= endRow) {
for(var i = startRow; i <= endRow; i++) {
this.selectRow(i, true);
}
} else {
for(var i = startRow; i >= endRow; i--) {
this.selectRow(i, true);
}
}
}
});
/*
* Ext.ux.grid.BufferedStore V0.9
* Copyright(c) 2007, http://www.siteartwork.de
*
* Licensed under the terms of the Open Source LGPL 3.0
* http://www.gnu.org/licenses/lgpl.html
*
* @author Thorsten Suckow-Homberg
*/
Ext.namespace('Ext.ux.grid');
/**
* @class Ext.ux.grid.BufferedStore
* @extends Ext.data.Store
*
* The BufferedGridSore is a special implementation of a Ext.data.Store. It is used
* for loading chunks of data from the underlying data repository as requested
* by the Ext.ux.BufferedGridView. It's size is limited to the config parameter
* bufferSize and is thereby guaranteed to never hold more than this amount
* of records in the store.
*
* Requesting selection ranges:
* ----------------------------
* This store implementation has 2 Http-proxies: A data proxy for requesting data
* from the server for displaying and another proxy to request pending selections:
* Pending selections are represented by row indexes which have been selected but
* which records have not yet been available in the store. The loadSelections method
* will initiate a request to the data repository (same url as specified in the
* url config parameter for the store) to fetch the pending selections. The additional
* parameter send to the server is the "ranges" parameter, which will hold a json
* encoded string representing ranges of row indexes to load from the data repository.
* As an example, pending selections with the indexes 1,2,3,4,5,9,10,11,16 would
* have to be translated to [1,5],[9,11],[16].
* Please note, that by indexes we do not understand (primary) keys of the data,
* but indexes as represented by the view. To get the ranges of pending selections,
* you can use the getPendingSelections method of the BufferedRowSelectionModel, which
* should be used as the default selection model of the grid.
*
* Version-property:
* -----------------
* This implementation does also introduce a new member called "version". The version
* property will help you in determining if any pending selections indexes are still
* valid or may have changed. This is needed to reduce the danger of data inconsitence
* when you are requesting data from the server: As an example, a range of indexes must
* be read from the server but may have been become invalid when the row represented
* by the index is no longer available in teh underlying data store, caused by a
* delete or insert operation. Thus, you have to take care of the version property
* by yourself (server side) and change this value whenever a row was deleted or
* inserted. You can specify the path to the version property in the BufferedJsonReader,
* which should be used as the default reader for this store. If the store recognizes
* a version change, it will fire the versionchange event. It is up to the user
* to remove all selections which are pending, or use them anyway.
*
* Inserting data:
* ---------------
* Another thing to notice is the way a user inserts records into the data store.
* A user should always provide a sortInfo for the grid, so the findInsertIndex
* method can return a value that comes close to the value as it would have been
* computed by the underlying store's sort algorithm. Whenever a record should be
* added to the store, the insert index should be calculated and the used as the
* parameter for the insert method. The findInsertIndex method will return a value
* that equals to Number.MIN_VALUE or Number.MAX_VALUE if the added record would not
* change the current state of the store. If that happens, this data is not available
* in the store, and may be requested later on when a new request for new data is made.
*
* Sorting:
* --------
* remoteSort will always be set to true, no matter what value the user provides
* using the config object.
*
* @constructor
* Creates a new Store.
* @param {Object} config A config object containing the objects needed for the Store to access data,
* and read the data into Records.
*/
Ext.ux.grid.BufferedStore = function(config) {
config = config || {};
// remoteSort will always be set to true.
config.remoteSort = true;
Ext.apply(this, config);
this.addEvents({
/**
* @event versionchange
* Fires when the version property has changed.
* @param {Ext.ux.BufferedGridStore} this
* @param {String} oldValue
* @param {String} newValue
*/
'versionchange' : true,
/**
* @event beforeselectionsload
* Fires before the store sends a request for ranges of records to
* the server.
* @param {Ext.ux.BufferedGridStore} this
* @param {Array} ranges
*/
'beforeselectionsload' : true,
/**
* @event selectionsload
* Fires when selections have been loaded.
* @param {Ext.ux.BufferedGridStore} this
* @param {Array} records An array containing the loaded records from
* the server.
* @param {Array} ranges An array containing the ranges of indexes this
* records may represent.
*/
'selectionsload' : true
});
Ext.ux.grid.BufferedStore.superclass.constructor.call(this, config);
if(this.url && !this.selectionsProxy){
this.selectionsProxy = new Ext.data.HttpProxy({url: this.url});
}
};
Ext.extend(Ext.ux.grid.BufferedStore, Ext.data.Store, {
/**
* The version of the data in the store. This value is represented by the
* versionProperty-property of the BufferedJsonReader.
* @property
*/
version : null,
/**
* Inserts a record at the position as specified in index.
* If the index equals to Number.MIN_VALUE or Number.MAX_VALUE, the record will
* not be added to the store, but still fire the add-event to indicate that
* the set of data in the underlying store has been changed.
* If the index equals to 0 and the length of data in the store equals to
* bufferSize, the add-event will be triggered with Number.MIN_VALUE to
* indicate that a record has been prepended. If the index equals to
* bufferSize, the method will assume that the record has been appended and
* trigger the add event with index set to Number.MAX_VALUE.
*
* Note:
* -----
* The index parameter is not a view index, but a value in the range of
* [0, this.bufferSize].
*
*/
insert : function(index, records)
{
records = [].concat(records);
var cRecords = [];
var cCount = this.bufferSize-1;
var pIndex = (index == Number.MIN_VALUE || index == Number.MAX_VALUE) ? 0 : index;
this.totalLength += records.length;
if (index == Number.MIN_VALUE || index == Number.MAX_VALUE || index == this.bufferSize
|| (index == 0 && this.getCount() == this.bufferSize)) {
var tIndex = (index == this.bufferSize)
? Number.MAX_VALUE
: ((index == Number.MIN_VALUE || index == 0) ? Number.MIN_VALUE : Number.MAX_VALUE);
this.fireEvent("add", this, records, tIndex);
return;
}
for (var i = 0, max_i = records.length; i < max_i; i++) {
if (i + pIndex > cCount) {
break;
}
cRecords.push(records[i]);
}
for(var i = 0, len = cRecords.length; i < len; i++){
// different from original impl, shift one up
this.data.insert(index+i, cRecords[i]);
cRecords[i].join(this);
}
while (this.getCount() > this.bufferSize) {
this.data.remove(this.data.last());
}
this.fireEvent("add", this, cRecords, index);
},
/**
* Remove a Record from the Store and fires the remove event.
*
* If the record is not within the store, the method will try to guess it's
* index by calling findInsertIndex.
*/
remove : function(record)
{
var index = this.data.indexOf(record);
if (index < 0) {
var ind = this.findInsertIndex(record);
this.totalLength -= 1;
if(this.pruneModifiedRecords){
this.modified.remove(record);
}
this.fireEvent("remove", this, record, ind);
return false;
}
this.data.removeAt(index);
if(this.pruneModifiedRecords){
this.modified.remove(record);
}
this.totalLength -= 1;
this.fireEvent("remove", this, record, index);
return true;
},
/**
* Remove all Records from the Store and fires the clear event.
* The method assumes that there will be no data available anymore in the
* underlying data store.
*/
removeAll : function()
{
this.totalLength = 0;
this.data.clear();
if(this.pruneModifiedRecords){
this.modified = [];
}
this.fireEvent("clear", this);
},
/**
* Requests a range of data from the underlying data store. Similiar to the
* start and limit parameter usually send to the server, the method needs
* an array of ranges of indexes.
* Example: To load all records at the positions 1,2,3,4,9,12,13,14, the supplied
* parameter should equal to [[1,4],[9],[12,14]].
* The request will only be done if the beforeselectionsloaded events return
* value does not equal to false.
*/
loadRanges : function(ranges)
{
var max_i = ranges.length;
if(max_i > 0 && !this.selectionsProxy.activeRequest
&& this.fireEvent("beforeselectionsload", this, ranges) !== false){
var lParams = this.lastOptions.params;
var params = {};
params.ranges = Ext.encode(ranges);
if (lParams) {
if (lParams.sort) {
params.sort = lParams.sort;
}
if (lParams.dir) {
params.dir = lParams.dir;
}
}
var options = {};
for (var i in this.lastOptions) {
options.i = this.lastOptions.i;
}
options.ranges = params.ranges;
this.selectionsProxy.load(params, this.reader,
this.selectionsLoaded, this,
options);
}
},
/**
* Alias for loadRanges.
*/
loadSelections : function(ranges)
{
this.loadRanges(ranges);
},
/**
* Called as a callback by the proxy which loads pending selections.
* Will fire the selectionsload event with the loaded records if, and only
* if the return value of the checkVersionChange event does not equal to
* false.
*/
selectionsLoaded : function(o, options, success)
{
if (this.checkVersionChange(o, options, success) !== false) {
this.fireEvent("selectionsload", this, o.records, Ext.decode(options.ranges));
} else {
this.fireEvent("selectionsload", this, [], Ext.decode(options.ranges));
}
},
/**
* Checks if the version supplied in o differs from the version
* property of the current instance of this object and fires the versionchange
* event if it does.
*/
// private
checkVersionChange : function(o, options, success)
{
if(o && success !== false){
if (o.version !== undefined) {
var old = this.version;
this.version = o.version;
if (this.version !== old) {
return this.fireEvent('versionchange', this, old, this.version);
}
}
}
},
/**
* Overwrites the parent implementation to pass the boolean bufferedSort
* parameter to {applySort}.
* The sort procedure tries to respect the current data in the buffer. If the
* found index would not be within the bufferRange, Number.MIN_VALUE is returned to
* indicate that the record would be sorted below the first record in the buffer
* range, while Number.MAX_VALUE would indicate that the record would be added after
* the last record in the buffer range.
*
* The method is not guaranteed to return the relative index of the record
* in the data model as returned by the underlying domain model.
*/
findInsertIndex : function(record)
{
this.suspendEvents();
// store original data
var data = this.data.clone();
// check if the record would be added to/inserted before the current
// buffer range
if (data.getCount() >= this.bufferSize) {
var first = this.data.first();
var last = this.data.last();
this.data.clear();
this.data.add(record);
this.data.add(first);
this.data.add(last);
this.applySort(true);
var index = this.data.indexOf(record);
if (index == 0 || index == 2) {
this.data = data;
this.resumeEvents();
return index == 0 ? Number.MIN_VALUE : Number.MAX_VALUE;
}
}
this.data = data.clone();
this.data.add(record);
this.applySort(true);
var index = this.data.indexOf(record);
this.data = data;
this.resumeEvents();
return index;
},
/**
* Removed snapshot check
*/
// private
sortData : function(f, direction)
{
direction = direction || 'ASC';
var st = this.fields.get(f).sortType;
var fn = function(r1, r2){
var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
};
this.data.sort(direction, fn);
},
/**
* Overwritten so the method can be used by findInsertIndex. Any call from
* loadRecords will do nothing, since bufferedSort argument won't equal to
* true.
*/
applySort : function(bufferedSort)
{
if(bufferedSort === true && this.sortInfo){
var s = this.sortInfo, f = s.field;
this.sortData(f, s.direction);
}
},
/**
* @cfg {Number} bufferSize The number of records that will at least always
* be available in the store for rendering. This value will be send to the
* server as the limit parameter and should not change during the
* lifetime of a grid component. Note: In a paging grid, this number would
* indicate the page size.
* The value should be set high enough to make a userfirendly scrolling
* possible and should be greater than the sum of {nearLimit} and
* {visibleRows}. Usually, a value in between 150 and 200 is good enough.
* A lesser value will more often make the store re-request new data, while
* a larger number will make loading times higher.
*/
// private
onMetaChange : function(meta, rtype, o)
{
this.version = null;
Ext.ux.grid.BufferedStore.superclass.onMetaChange.call(this, meta, rtype, o);
},
/**
* Will fire the versionchange event if the version of incoming data has changed.
*/
// private
loadRecords : function(o, options, success)
{
this.checkVersionChange(o, options, success);
Ext.ux.grid.BufferedStore.superclass.loadRecords.call(this, o, options, success);
},
//--------------------------------------EMPTY-----------------------------------
// no interface concept, so simply overwrite and leave them empty as for now
clearFilter : function(){},
isFiltered : function(){},
collect : function(){},
createFilterFn : function(){},
sum : function(){},
filter : function(){},
filterBy : function(){},
query : function(){},
queryBy : function(){},
find : function(){},
findBy : function(){}
});
/*
* @class Ext.ux.ManagedIFrame
* Version: RC1 (Release Candidate 1)
* Author: Doug Hendricks. doug[always-At]theactivegroup.com
* Copyright 2007-2008, Active Group, Inc. All rights reserved.
*
************************************************************************************
* This file is distributed on an AS IS BASIS WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE.
************************************************************************************
License: ux.ManagedIFrame and ux.ManagedIFramePanel are licensed under the terms of
the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
that the code/component(s) do NOT become part of another Open Source or Commercially
licensed development library or toolkit without explicit permission.
Donations are welcomed: http://donate.theactivegroup.com
License details: http://www.gnu.org/licenses/lgpl.html
* An Ext harness for iframe elements.
Adds Ext.UpdateManager(Updater) support and a compatible 'update' method for
writing content directly into an iFrames' document structure.
* Usage:
*
* // Harness it from an existing Iframe from markup
* var i = new Ext.ux.ManagedIFrame("myIframe");
* // Replace the iFrames document structure with the response from the requested URL.
* i.load("http://myserver.com/index.php", "param1=1¶m2=2");
* //Notes: this is not the same as setting the Iframes src property !
* // Content loaded in this fashion does not share the same document namespaces as it's parent --
* // meaning, there (by default) will be no Ext namespace defined in it since the document is
* // overwritten after each call to the update method, and no styleSheets.
*
*
* @cfg {Boolean/Object} autoCreate True to auto generate the IFRAME element, or a {@link Ext.DomHelper} config of the IFRAME to create
* @cfg {String} html Any markup to be applied to the IFRAME's document content when rendered.
* @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the iframe while using the update or setSrc methods (defaults to false).
* @cfg {Object} src The src attribute to be assigned to the Iframe after initialization (overrides the autoCreate config src attribute)
* @constructor
* @param {Mixed} el, Config object The iframe element or it's id to harness or a valid config object.
*/
Ext.ux.ManagedIFrame = function(){
var args=Array.prototype.slice.call(arguments, 0)
,el = Ext.get(args[0])
,config = args[0];
if(el && el.dom && el.dom.tagName == 'IFRAME'){
config = args[1] || {};
}else{
config = args[0] || args[1] || {};
el = config.autoCreate?
Ext.get(Ext.DomHelper.append(document.body, Ext.apply({tag:'iframe', src:(Ext.isIE&&Ext.isSecure)?Ext.SSL_SECURE_URL:''},config.autoCreate))):null;
}
if(!el || el.dom.tagName != 'IFRAME') return el;
!!el.dom.name.length || (el.dom.name = el.dom.id); //make sure there is a valid frame name
this.addEvents({
/**
* @event domready
* Fires when the iFrame's Document(DOM) has reach a state where the DOM may be manipulated
* @param {Ext.ux.ManagedIFrame} this
* Note: This event is only available when overwriting the iframe document using the update method.
*/
"domready" : true,
/**
* @event documentloaded
* Fires when the iFrame has reached a loaded/complete state.
* @param {Ext.ux.ManagedIFrame} this
*/
"documentloaded" : true
});
if(config.listeners){
this.listeners=config.listeners;
Ext.ux.ManagedIFrame.superclass.constructor.call(this);
}
Ext.apply(el,this); // apply this class interface ( pseudo Decorator )
el.addClass('x-managed-iframe');
el.loadMask = Ext.apply({msg:'Loading..',msgCls:'x-mask-loading',maskEl:null, enabled:!!config.loadMask},config.loadMask);
//Hook the Iframes loaded state handler
var h= Ext.isIE?'onreadystatechange':'onload';
el.dom[h] = el.dom[h]?
el.dom[h].createSequence(el.loadHandler,el):
el.loadHandler.createDelegate(el);
if(config.src){
el.setSrc(config.src);
}else{
el.src = el.dom.src||null;
var content = config.html || config.content || false;
if(content){
el.update(content);
}
}
return el;
};
Ext.extend(Ext.ux.ManagedIFrame , Ext.util.Observable,
{
/**
* Sets the embedded Iframe src property.
* @param {String/Function} url (Optional) A string or reference to a Function that returns a URI string when called
* @param {Boolean} discardUrl (Optional) If not passed as false the URL of this action becomes the default SRC attribute for
* this iframe, and will be subsequently used in future setSrc calls (emulates autoRefresh by calling setSrc without params).
* Note: invoke the function with no arguments to refresh the iframe based on the current defaultSrc value.
*/
setSrc : function(url, discardUrl){
var src = url || this.src || (Ext.isIE&&Ext.isSecure?Ext.SSL_SECURE_URL:'');
this.showMask();
this._windowContext = null;
(function(){
var s = typeof src == 'function'?src()||'':src;
if(Ext.isOpera)this.dom.src="";
this.dom.src = s;
}).defer(100,this);
if(discardUrl !== true){ this.src = src; }
},
//Private: script removal RegeXp
scriptRE : /(?:)((\n|\r|.)*?)(?:<\/script>)/gi
,
/*
Write(replacing) string content into the IFrames document structure
* @param {String} content The new content
* @param {Boolean} loadScripts (optional) true to also render and process embedded scripts
* @param {Function} callback (optional) Callback when update is complete.
*/
update : function(content,loadScripts,callback){
loadScripts = loadScripts || this.getUpdateManager().loadScripts || false;
this._windowContext = false;
content = Ext.DomHelper.markup(content||'');
var doc = this.getDocument();
if(doc){
this._inUpdate = true;
this.showMask();
doc.open();
doc.write(loadScripts===true ? content:content.replace(this.scriptRE , ""));
//create an 'eval'able context for the iframe and this.execScript
doc.write ('