/*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.1.1
+ * Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
"click",
/**
* @event mouseenter
- * Fires when the mouse enters a template node. trackOver:true or an overCls must be set to enable this event.
+ * Fires when the mouse enters a template node. trackOver:true or an overClass must be set to enable this event.
* @param {Ext.DataView} this
* @param {Number} index The index of the target node
* @param {HTMLElement} node The target node
"mouseenter",
/**
* @event mouseleave
- * Fires when the mouse leaves a template node. trackOver:true or an overCls must be set to enable this event.
+ * Fires when the mouse leaves a template node. trackOver:true or an overClass must be set to enable this event.
* @param {Ext.DataView} this
* @param {Number} index The index of the target node
* @param {HTMLElement} node The target node
// private
onUpdate : function(ds, record){
var index = this.store.indexOf(record);
- var sel = this.isSelected(index);
- var original = this.all.elements[index];
- var node = this.bufferRender([record], index)[0];
+ if(index > -1){
+ var sel = this.isSelected(index);
+ var original = this.all.elements[index];
+ var node = this.bufferRender([record], index)[0];
- this.all.replaceElement(index, node, true);
- if(sel){
- this.selected.replaceElement(original, node);
- this.all.item(index).addClass(this.selectedClass);
+ this.all.replaceElement(index, node, true);
+ if(sel){
+ this.selected.replaceElement(original, node);
+ this.all.item(index).addClass(this.selectedClass);
+ }
+ this.updateIndexes(index, index);
}
- this.updateIndexes(index, index);
},
// private
*/
bindStore : function(store, initial){
if(!initial && this.store){
- this.store.un("beforeload", this.onBeforeLoad, this);
- this.store.un("datachanged", this.refresh, this);
- this.store.un("add", this.onAdd, this);
- this.store.un("remove", this.onRemove, this);
- this.store.un("update", this.onUpdate, this);
- this.store.un("clear", this.refresh, this);
if(store !== this.store && this.store.autoDestroy){
this.store.destroy();
+ }else{
+ this.store.un("beforeload", this.onBeforeLoad, this);
+ this.store.un("datachanged", this.refresh, this);
+ this.store.un("add", this.onAdd, this);
+ this.store.un("remove", this.onRemove, this);
+ this.store.un("update", this.onUpdate, this);
+ this.store.un("clear", this.refresh, this);
+ }
+ if(!store){
+ this.store = null;
}
}
if(store){
},
onDestroy : function(){
+ this.all.clear();
+ this.selected.clear();
Ext.DataView.superclass.onDestroy.call(this);
this.bindStore(null);
}
*/
Ext.DataView.prototype.setStore = Ext.DataView.prototype.bindStore;
-Ext.reg('dataview', Ext.DataView);/**\r
- * @class Ext.ListView\r
+Ext.reg('dataview', Ext.DataView);
+/**\r
+ * @class Ext.list.ListView\r
* @extends Ext.DataView\r
- * <p>Ext.ListView is a fast and light-weight implentation of a\r
+ * <p>Ext.list.ListView is a fast and light-weight implentation of a\r
* {@link Ext.grid.GridPanel Grid} like view with the following characteristics:</p>\r
* <div class="mdetail-params"><ul>\r
* <li>resizable columns</li>\r
});\r
store.load();\r
\r
-var listView = new Ext.ListView({\r
+var listView = new Ext.list.ListView({\r
store: store,\r
multiSelect: true,\r
emptyText: 'No images to display',\r
* @param {Object} config\r
* @xtype listview\r
*/\r
-Ext.ListView = Ext.extend(Ext.DataView, {\r
+Ext.list.ListView = Ext.extend(Ext.DataView, {\r
/**\r
* Set this property to <tt>true</tt> to disable the header click handler disabling sort\r
* (defaults to <tt>false</tt>).\r
*/\r
/**\r
* @cfg {Number} scrollOffset The amount of space to reserve for the scrollbar (defaults to\r
- * <tt>19</tt> pixels)\r
+ * <tt>undefined</tt>). If an explicit value isn't specified, this will be automatically\r
+ * calculated.\r
*/\r
- scrollOffset : 19,\r
+ scrollOffset : undefined,\r
/**\r
* @cfg {Boolean/Object} columnResize\r
- * Specify <tt>true</tt> or specify a configuration object for {@link Ext.ListView.ColumnResizer}\r
+ * Specify <tt>true</tt> or specify a configuration object for {@link Ext.list.ListView.ColumnResizer}\r
* to enable the columns to be resizable (defaults to <tt>true</tt>).\r
*/\r
columnResize: true,\r
*/\r
/**\r
* @cfg {Boolean/Object} columnSort\r
- * Specify <tt>true</tt> or specify a configuration object for {@link Ext.ListView.Sorter}\r
+ * Specify <tt>true</tt> or specify a configuration object for {@link Ext.list.ListView.Sorter}\r
* to enable the columns to be sortable (defaults to <tt>true</tt>).\r
*/\r
columnSort: true,\r
* The template to be used for the header row. See {@link #tpl} for more details.\r
*/\r
\r
+ /*\r
+ * IE has issues when setting percentage based widths to 100%. Default to 99.\r
+ */\r
+ maxWidth: Ext.isIE ? 99 : 100,\r
+ \r
initComponent : function(){\r
if(this.columnResize){\r
- this.colResizer = new Ext.ListView.ColumnResizer(this.colResizer);\r
+ this.colResizer = new Ext.list.ColumnResizer(this.colResizer);\r
this.colResizer.init(this);\r
}\r
if(this.columnSort){\r
- this.colSorter = new Ext.ListView.Sorter(this.columnSort);\r
+ this.colSorter = new Ext.list.Sorter(this.columnSort);\r
this.colSorter.init(this);\r
}\r
if(!this.internalTpl){\r
this.internalTpl = new Ext.XTemplate(\r
'<div class="x-list-header"><div class="x-list-header-inner">',\r
'<tpl for="columns">',\r
- '<div style="width:{width}%;text-align:{align};"><em unselectable="on" id="',this.id, '-xlhd-{#}">',\r
+ '<div style="width:{[values.width*100]}%;text-align:{align};"><em unselectable="on" id="',this.id, '-xlhd-{#}">',\r
'{header}',\r
'</em></div>',\r
'</tpl>',\r
'<tpl for="rows">',\r
'<dl>',\r
'<tpl for="parent.columns">',\r
- '<dt style="width:{width}%;text-align:{align};"><em unselectable="on">',\r
+ '<dt style="width:{[values.width*100]}%;text-align:{align};">',\r
+ '<em unselectable="on"<tpl if="cls"> class="{cls}</tpl>">',\r
'{[values.tpl.apply(parent)]}',\r
'</em></dt>',\r
'</tpl>',\r
'</tpl>'\r
);\r
};\r
- var cs = this.columns, allocatedWidth = 0, colsWithWidth = 0, len = cs.length;\r
+ \r
+ var cs = this.columns, \r
+ allocatedWidth = 0, \r
+ colsWithWidth = 0, \r
+ len = cs.length, \r
+ columns = [];\r
+ \r
for(var i = 0; i < len; i++){\r
var c = cs[i];\r
- if(!c.tpl){\r
- c.tpl = new Ext.XTemplate('{' + c.dataIndex + '}');\r
- }else if(Ext.isString(c.tpl)){\r
- c.tpl = new Ext.XTemplate(c.tpl);\r
+ if(!c.isColumn) {\r
+ c.xtype = c.xtype ? (/^lv/.test(c.xtype) ? c.xtype : 'lv' + c.xtype) : 'lvcolumn';\r
+ c = Ext.create(c);\r
}\r
- c.align = c.align || 'left';\r
- if(Ext.isNumber(c.width)){\r
- c.width *= 100;\r
- allocatedWidth += c.width;\r
+ if(c.width) {\r
+ allocatedWidth += c.width*100;\r
colsWithWidth++;\r
}\r
+ columns.push(c);\r
}\r
+ \r
+ cs = this.columns = columns;\r
+ \r
// auto calculate missing column widths\r
if(colsWithWidth < len){\r
var remaining = len - colsWithWidth;\r
- if(allocatedWidth < 100){\r
- var perCol = ((100-allocatedWidth) / remaining);\r
+ if(allocatedWidth < this.maxWidth){\r
+ var perCol = ((this.maxWidth-allocatedWidth) / remaining)/100;\r
for(var j = 0; j < len; j++){\r
var c = cs[j];\r
- if(!Ext.isNumber(c.width)){\r
+ if(!c.width){\r
c.width = perCol;\r
}\r
}\r
}\r
}\r
- Ext.ListView.superclass.initComponent.call(this);\r
+ Ext.list.ListView.superclass.initComponent.call(this);\r
},\r
\r
onRender : function(){\r
- Ext.ListView.superclass.onRender.apply(this, arguments);\r
+ this.autoEl = {\r
+ cls: 'x-list-wrap' \r
+ };\r
+ Ext.list.ListView.superclass.onRender.apply(this, arguments);\r
\r
this.internalTpl.overwrite(this.el, {columns: this.columns});\r
\r
* XTemplate as described above.\r
*/\r
collectData : function(){\r
- var rs = Ext.ListView.superclass.collectData.apply(this, arguments);\r
+ var rs = Ext.list.ListView.superclass.collectData.apply(this, arguments);\r
return {\r
columns: this.columns,\r
rows: rs\r
}\r
var bdp = bd.parentNode;\r
if(Ext.isNumber(w)){\r
- var sw = w - this.scrollOffset;\r
+ var sw = w - Ext.num(this.scrollOffset, Ext.getScrollBarWidth());\r
if(this.reserveScrollOffset || ((bdp.offsetWidth - bdp.clientWidth) > 10)){\r
bd.style.width = sw + 'px';\r
hd.style.width = sw + 'px';\r
}, 10);\r
}\r
}\r
- if(Ext.isNumber(h == 'number')){\r
+ if(Ext.isNumber(h)){\r
bdp.style.height = (h - hd.parentNode.offsetHeight) + 'px';\r
}\r
},\r
\r
updateIndexes : function(){\r
- Ext.ListView.superclass.updateIndexes.apply(this, arguments);\r
+ Ext.list.ListView.superclass.updateIndexes.apply(this, arguments);\r
this.verifyInternalSize();\r
},\r
\r
setHdWidths : function(){\r
var els = this.innerHd.dom.getElementsByTagName('div');\r
for(var i = 0, cs = this.columns, len = cs.length; i < len; i++){\r
- els[i].style.width = cs[i].width + '%';\r
+ els[i].style.width = (cs[i].width*100) + '%';\r
}\r
}\r
});\r
\r
-Ext.reg('listview', Ext.ListView);/**\r
- * @class Ext.ListView.ColumnResizer\r
+Ext.reg('listview', Ext.list.ListView);\r
+\r
+// Backwards compatibility alias\r
+Ext.ListView = Ext.list.ListView;/**
+ * @class Ext.list.Column
+ * <p>This class encapsulates column configuration data to be used in the initialization of a
+ * {@link Ext.list.ListView ListView}.</p>
+ * <p>While subclasses are provided to render data in different ways, this class renders a passed
+ * data field unchanged and is usually used for textual columns.</p>
+ */
+Ext.list.Column = Ext.extend(Object, {
+ /**
+ * @private
+ * @cfg {Boolean} isColumn
+ * Used by ListView constructor method to avoid reprocessing a Column
+ * if <code>isColumn</code> is not set ListView will recreate a new Ext.list.Column
+ * Defaults to true.
+ */
+ isColumn: true,
+
+ /**
+ * @cfg {String} align
+ * Set the CSS text-align property of the column. Defaults to <tt>'left'</tt>.
+ */
+ align: 'left',
+ /**
+ * @cfg {String} header Optional. The header text to be used as innerHTML
+ * (html tags are accepted) to display in the ListView. <b>Note</b>: to
+ * have a clickable header with no text displayed use <tt>' '</tt>.
+ */
+ header: '',
+
+ /**
+ * @cfg {Number} width Optional. Percentage of the container width
+ * this column should be allocated. Columns that have no width specified will be
+ * allocated with an equal percentage to fill 100% of the container width. To easily take
+ * advantage of the full container width, leave the width of at least one column undefined.
+ * Note that if you do not want to take up the full width of the container, the width of
+ * every column needs to be explicitly defined.
+ */
+ width: null,
+
+ /**
+ * @cfg {String} cls Optional. This option can be used to add a CSS class to the cell of each
+ * row for this column.
+ */
+ cls: '',
+
+ /**
+ * @cfg {String} tpl Optional. Specify a string to pass as the
+ * configuration string for {@link Ext.XTemplate}. By default an {@link Ext.XTemplate}
+ * will be implicitly created using the <tt>dataIndex</tt>.
+ */
+
+ /**
+ * @cfg {String} dataIndex <p><b>Required</b>. The name of the field in the
+ * ListViews's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from
+ * which to draw the column's value.</p>
+ */
+
+ constructor : function(c){
+ if(!c.tpl){
+ c.tpl = new Ext.XTemplate('{' + c.dataIndex + '}');
+ }
+ else if(Ext.isString(c.tpl)){
+ c.tpl = new Ext.XTemplate(c.tpl);
+ }
+
+ Ext.apply(this, c);
+ }
+});
+
+Ext.reg('lvcolumn', Ext.list.Column);
+
+/**
+ * @class Ext.list.NumberColumn
+ * @extends Ext.list.Column
+ * <p>A Column definition class which renders a numeric data field according to a {@link #format} string. See the
+ * {@link Ext.list.Column#xtype xtype} config option of {@link Ext.list.Column} for more details.</p>
+ */
+Ext.list.NumberColumn = Ext.extend(Ext.list.Column, {
+ /**
+ * @cfg {String} format
+ * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column
+ * (defaults to <tt>'0,000.00'</tt>).
+ */
+ format: '0,000.00',
+
+ constructor : function(c) {
+ c.tpl = c.tpl || new Ext.XTemplate('{' + c.dataIndex + ':number("' + (c.format || this.format) + '")}');
+ Ext.list.NumberColumn.superclass.constructor.call(this, c);
+ }
+});
+
+Ext.reg('lvnumbercolumn', Ext.list.NumberColumn);
+
+/**
+ * @class Ext.list.DateColumn
+ * @extends Ext.list.Column
+ * <p>A Column definition class which renders a passed date according to the default locale, or a configured
+ * {@link #format}. See the {@link Ext.list.Column#xtype xtype} config option of {@link Ext.list.Column}
+ * for more details.</p>
+ */
+Ext.list.DateColumn = Ext.extend(Ext.list.Column, {
+ format: 'm/d/Y',
+ constructor : function(c) {
+ c.tpl = c.tpl || new Ext.XTemplate('{' + c.dataIndex + ':date("' + (c.format || this.format) + '")}');
+ Ext.list.DateColumn.superclass.constructor.call(this, c);
+ }
+});
+Ext.reg('lvdatecolumn', Ext.list.DateColumn);
+
+/**
+ * @class Ext.list.BooleanColumn
+ * @extends Ext.list.Column
+ * <p>A Column definition class which renders boolean data fields. See the {@link Ext.list.Column#xtype xtype}
+ * config option of {@link Ext.list.Column} for more details.</p>
+ */
+Ext.list.BooleanColumn = Ext.extend(Ext.list.Column, {
+ /**
+ * @cfg {String} trueText
+ * The string returned by the renderer when the column value is not falsey (defaults to <tt>'true'</tt>).
+ */
+ trueText: 'true',
+ /**
+ * @cfg {String} falseText
+ * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to
+ * <tt>'false'</tt>).
+ */
+ falseText: 'false',
+ /**
+ * @cfg {String} undefinedText
+ * The string returned by the renderer when the column value is undefined (defaults to <tt>' '</tt>).
+ */
+ undefinedText: ' ',
+
+ constructor : function(c) {
+ c.tpl = c.tpl || new Ext.XTemplate('{' + c.dataIndex + ':this.format}');
+
+ var t = this.trueText, f = this.falseText, u = this.undefinedText;
+ c.tpl.format = function(v){
+ if(v === undefined){
+ return u;
+ }
+ if(!v || v === 'false'){
+ return f;
+ }
+ return t;
+ };
+
+ Ext.list.DateColumn.superclass.constructor.call(this, c);
+ }
+});
+
+Ext.reg('lvbooleancolumn', Ext.list.BooleanColumn);/**\r
+ * @class Ext.list.ColumnResizer\r
* @extends Ext.util.Observable\r
- * <p>Supporting Class for Ext.ListView.</p>\r
+ * <p>Supporting Class for Ext.list.ListView</p>\r
* @constructor\r
* @param {Object} config\r
*/\r
-Ext.ListView.ColumnResizer = Ext.extend(Ext.util.Observable, {\r
+Ext.list.ColumnResizer = Ext.extend(Ext.util.Observable, {\r
/**\r
* @cfg {Number} minPct The minimum percentage to allot for any column (defaults to <tt>.05</tt>)\r
*/\r
\r
constructor: function(config){\r
Ext.apply(this, config);\r
- Ext.ListView.ColumnResizer.superclass.constructor.call(this);\r
+ Ext.list.ColumnResizer.superclass.constructor.call(this);\r
},\r
init : function(listView){\r
this.view = listView;\r
},\r
\r
handleHdMove : function(e, t){\r
- var hw = 5;\r
- var x = e.getPageX();\r
- var hd = e.getTarget('em', 3, true);\r
+ var hw = 5,\r
+ x = e.getPageX(),\r
+ hd = e.getTarget('em', 3, true);\r
if(hd){\r
- var r = hd.getRegion();\r
- var ss = hd.dom.style;\r
- var pn = hd.dom.parentNode;\r
+ var r = hd.getRegion(),\r
+ ss = hd.dom.style,\r
+ pn = hd.dom.parentNode;\r
\r
if(x - r.left <= hw && pn != pn.parentNode.firstChild){\r
this.activeHd = Ext.get(pn.previousSibling.firstChild);\r
- ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';\r
+ ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';\r
} else if(r.right - x <= hw && pn != pn.parentNode.lastChild.previousSibling){\r
this.activeHd = hd;\r
- ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';\r
+ ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';\r
} else{\r
delete this.activeHd;\r
ss.cursor = '';\r
this.proxy = this.view.el.createChild({cls:'x-list-resizer'});\r
this.proxy.setHeight(this.view.el.getHeight());\r
\r
- var x = this.tracker.getXY()[0];\r
- var w = this.view.innerHd.getWidth();\r
+ var x = this.tracker.getXY()[0],\r
+ w = this.view.innerHd.getWidth();\r
\r
this.hdX = this.dragHd.getX();\r
this.hdIndex = this.view.findHeaderIndex(this.dragHd);\r
},\r
\r
onEnd: function(e){\r
+ /* calculate desired width by measuring proxy and then remove it */\r
var nw = this.proxy.getWidth();\r
this.proxy.remove();\r
\r
- var index = this.hdIndex;\r
- var vw = this.view, cs = vw.columns, len = cs.length;\r
- var w = this.view.innerHd.getWidth(), minPct = this.minPct * 100;\r
-\r
- var pct = Math.ceil((nw*100) / w);\r
- var diff = cs[index].width - pct;\r
- var each = Math.floor(diff / (len-1-index));\r
- var mod = diff - (each * (len-1-index));\r
+ var index = this.hdIndex,\r
+ vw = this.view,\r
+ cs = vw.columns,\r
+ len = cs.length,\r
+ w = this.view.innerHd.getWidth(),\r
+ minPct = this.minPct * 100,\r
+ pct = Math.ceil((nw * vw.maxWidth) / w),\r
+ diff = (cs[index].width * 100) - pct,\r
+ each = Math.floor(diff / (len-1-index)),\r
+ mod = diff - (each * (len-1-index));\r
\r
for(var i = index+1; i < len; i++){\r
- var cw = cs[i].width + each;\r
- var ncw = Math.max(minPct, cw);\r
+ var cw = (cs[i].width * 100) + each,\r
+ ncw = Math.max(minPct, cw);\r
if(cw != ncw){\r
mod += cw - ncw;\r
}\r
- cs[i].width = ncw;\r
+ cs[i].width = ncw / 100;\r
}\r
- cs[index].width = pct;\r
- cs[index+1].width += mod;\r
+ cs[index].width = pct / 100;\r
+ cs[index+1].width += (mod / 100);\r
delete this.dragHd;\r
- this.view.setHdWidths();\r
- this.view.refresh();\r
+ vw.setHdWidths();\r
+ vw.refresh();\r
setTimeout(function(){\r
vw.disableHeaders = false;\r
}, 100);\r
}\r
-});/**\r
- * @class Ext.ListView.Sorter\r
+});\r
+\r
+// Backwards compatibility alias\r
+Ext.ListView.ColumnResizer = Ext.list.ColumnResizer;/**\r
+ * @class Ext.list.Sorter\r
* @extends Ext.util.Observable\r
- * <p>Supporting Class for Ext.ListView.</p>\r
+ * <p>Supporting Class for Ext.list.ListView</p>\r
* @constructor\r
* @param {Object} config\r
*/\r
-Ext.ListView.Sorter = Ext.extend(Ext.util.Observable, {\r
+Ext.list.Sorter = Ext.extend(Ext.util.Observable, {\r
/**\r
* @cfg {Array} sortClasses\r
* The CSS classes applied to a header when it is sorted. (defaults to <tt>["sort-asc", "sort-desc"]</tt>)\r
\r
constructor: function(config){\r
Ext.apply(this, config);\r
- Ext.ListView.Sorter.superclass.constructor.call(this);\r
+ Ext.list.Sorter.superclass.constructor.call(this);\r
},\r
\r
init : function(listView){\r
this.view.store.sort(this.view.columns[index].dataIndex);\r
}\r
}\r
-});
\ No newline at end of file
+});\r
+\r
+// Backwards compatibility alias\r
+Ext.ListView.Sorter = Ext.list.Sorter;
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff