* @cfg {String|Roo.Template} tpl The template used by this View
*/
tpl : false,
-
+ /**
+ * @cfg {String} dataName the named area of the template to use as the data area
+ * Works with domtemplates roo-name="name"
+ */
+ dataName: false,
/**
* @cfg {String} selectedClass The css class to add to selected nodes
*/
/**
* @cfg {Boolean} multiSelect Allow multiple selection
*/
-
multiSelect : false,
/**
* @cfg {Boolean} singleSelect Allow single selection
*/
singleSelect: false,
+ /**
+ * @cfg {Boolean} toggleSelect - selecting
+ */
+ toggleSelect : false,
+
/**
* Returns the element this view is bound to.
* @return {Roo.Element}
*/
refresh : function(){
var t = this.tpl;
+
+ // if we are using something like 'domtemplate', then
+ // the what gets used is:
+ // t.applySubtemplate(NAME, data, wrapping data..)
+ // the outer template then get' applied with
+ // the store 'extra data'
+ // and the body get's added to the
+ // roo-name="data" node?
+ // <span class='roo-tpl-{name}'></span> ?????
+
+
+
this.clearSelections();
this.el.update("");
var html = [];
var records = this.store.getRange();
- if(records.length < 1){
+ if(records.length < 1) {
+
+ // is this valid?? = should it render a template??
+
this.el.update(this.emptyText);
return;
}
+ var el = this.el;
+ if (this.dataName) {
+ this.el.update(t.apply(this.store.meta)); //????
+ el = this.el.child('.roo-tpl-' + this.dataName);
+ }
+
for(var i = 0, len = records.length; i < len; i++){
var data = this.prepareData(records[i].data, i, records[i]);
this.fireEvent("preparedata", this, data, i, records[i]);
- html[html.length] = t.apply(data);
+ html[html.length] = Roo.util.Format.trim(
+ this.dataName ?
+ t.applySubtemplate(this.dataName, data, this.store.meta) :
+ t.apply(data)
+ );
}
- this.el.update(html.join(""));
- this.nodes = this.el.dom.childNodes;
+
+
+
+ el.update(html.join(""));
+ this.nodes = el.dom.childNodes;
this.updateIndexes(0);
},
/**
* Function to override to reformat the data that is sent to
* the template for each node.
+ * DEPRICATED - use the preparedata event handler.
* @param {Array/Object} data The raw data (array of colData for a data model bound view or
* a JSON object for an UpdateManager bound view).
*/
- prepareData : function(data){
+ prepareData : function(data, index, record)
+ {
+ this.fireEvent("preparedata", this, data, index, record);
return data;
},
this.clearSelections();
var index = this.store.indexOf(record);
var n = this.nodes[index];
- this.tpl.insertBefore(n, this.prepareData(record.data));
+ this.tpl.insertBefore(n, this.prepareData(record.data, index, record));
n.parentNode.removeChild(n);
this.updateIndexes(index, index);
},
- onAdd : function(ds, records, index){
+
+
+// --------- FIXME
+ onAdd : function(ds, records, index)
+ {
this.clearSelections();
if(this.nodes.length == 0){
this.refresh();
}
var n = this.nodes[index];
for(var i = 0, len = records.length; i < len; i++){
- var d = this.prepareData(records[i].data);
+ var d = this.prepareData(records[i].data, i, records[i]);
if(n){
this.tpl.insertBefore(n, d);
}else{
+
this.tpl.append(this.el, d);
}
}
onRemove : function(ds, record, index){
this.clearSelections();
- this.el.dom.removeChild(this.nodes[index]);
+ var el = this.dataName ?
+ this.el.child('.roo-tpl-' + this.dataName) :
+ this.el;
+ el.dom.removeChild(this.nodes[index]);
this.updateIndexes(index);
},
* @return {HTMLElement} The template node
*/
findItemFromChild : function(node){
- var el = this.el.dom;
+ var el = this.dataName ?
+ this.el.child('.roo-tpl-' + this.dataName,true) :
+ this.el.dom;
+
if(!node || node.parentNode == el){
return node;
}
}
},
- onItemClick : function(item, index, e){
+ onItemClick : function(item, index, e)
+ {
if(this.fireEvent("beforeclick", this, index, item, e) === false){
return false;
}
+ if (this.toggleSelect) {
+ var m = this.isSelected(item) ? 'unselect' : 'select';
+ Roo.log(m);
+ var _t = this;
+ _t[m](item, true, false);
+ return true;
+ }
if(this.multiSelect || this.singleSelect){
if(this.multiSelect && e.shiftKey && this.lastSelection){
this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
/**
* Unselects nodes.
* @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
+ * @param {Boolean} keepExisting (optional) true IGNORED (for campatibility with select)
* @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
*/
- unselect : function(nodeInfo, suppressEvent)
+ unselect : function(nodeInfo, keepExisting, suppressEvent)
{
if(nodeInfo instanceof Array){
Roo.each(this.selections, function(s) {
}
var node = this.getNode(nodeInfo);
if(!node || !this.isSelected(node)){
+ Roo.log("not selected");
return; // not selected.
}
// fireevent???
var ns = [];
Roo.each(this.selections, function(s) {
- if (s === node ) {
+ if (s == node ) {
+ Roo.fly(node).removeClass(this.selectedClass);
+
return;
}
ns.push(s);
- });
+ },this);
this.selections= ns;
this.fireEvent("selectionchange", this, this.selections);
- }
+ },
/**
* Gets a template node.
projects / roojs1 / blobdiff