PDA

View Full Version : View icons & twistie icons - update



captainm1uk
15 Oct 2007, 2:54 AM
If i use view icons in a view and i catagorize them, the icons do not show - is there a way round this ?

Also how can i change the twistie icons

Thanks

Zakaroonikov
15 Oct 2007, 1:57 PM
If i use view icons in a view and i catagorize them, the icons do not show - is there a way round this ?

Also how can i change the twistie icons

Thanks

Are you using GavinL's extension to ext.nd for categorised views? If so I did the following to get +/- instead of the standard twisties:



dominoRenderer: function(val, cell, row, rowIdx, colIdx, ds) {
...
output += (row.node.getAttribute("children")) ?
"<img id='" + Ext.id() + "' class='ext-nd-ed-twistie' src='" + extPath + "/ext/resources/images/default/tree/elbow-plus-nl.gif' />" :
"<img class='ext-nd-ed-blank' ssrc='" + extPath + "/ext/resources/images/default/tree/elbow-plus-nl.gif' />";
...

Where extPath = the location of your ext libraries

and I replaced expand/collapse string replacements with plus/minus in (ie expand -> plus, collapse -> minus) retrieveChildNodes



retrieveChildNodes : function(row, elementId, unid, position, children) {

var oTwistie = Ext.getDom(elementId);
var view = this.grid.getView();
var selModel = this.grid.selModel;
var rowIdx = this.ds.indexOf(row);
var parentRowId = row.id;
var currentRowId = null;
var q = Ext.DomQuery;
var tr = null;

if (oTwistie) {
var bIsCollapsed = (oTwistie.src.indexOf("plus") >= 0) ? true : false;
if (bIsCollapsed) {
oTwistie.src = oTwistie.src.replace(/plus/g, "minus");

if (!row.childRowsLoaded) {
var childNodeData = new Ext.data.Connection();

var sRestrictUrl = (this.showSingleCategory) ? "&RestrictToCategory=" + this.showSingleCategory : "";
var gridEl = this.grid.getGridEl();
gridEl.mask('Loading...','x-mask-loading');

childNodeData.request({
url: this.dbPath + this.viewName + "?ReadViewEntries&Start=" + position + ".1&Count=" + children + "&Collapse=" + position + sRestrictUrl + "&nocache=" + encodeURIComponent(new Date()),
method: "GET",
callback: this.renderChildNodeData,
scope: this
});
} else {
//Display existing child rows
this.grid.selModel.selectNext();
row = selModel.getSelected();
while(row) {
currentRowId = row.id;

//Ensure we only act on child rows
if(this.getNodeDepth(currentRowId) <= this.getNodeDepth(parentRowId)) { break; }

//Make sure we only act on immediate descendants
if(this.getNodeDepth(currentRowId) == parseInt(this.getNodeDepth(parentRowId) + 1)) {
tr = view.getRow(this.ds.indexOf(row));
if (tr) {

tr.style.display = "";

//Now find the twistie, and reset its state to collapsed
oTwistie = q.selectNode("IMG[class='ext-nd-ed-twistie']", tr);
if (oTwistie) {
oTwistie.src = oTwistie.src.replace(/minus/g, "plus");
}
}
}

selModel.selectNext();
row = selModel.getSelected();
if (row.id == currentRowId) { row = null };
}

selModel.selectRow(rowIdx, false);
}

} else {
oTwistie.src = oTwistie.src.replace(/minus/g, "plus");

//Hide child rows
this.grid.selModel.selectNext();
row = selModel.getSelected();
while(row) {
currentRowId = row.id;

if(this.getNodeDepth(currentRowId) <= this.getNodeDepth(parentRowId)) { break; }
tr = view.getRow(this.ds.indexOf(row));
if (tr) {
tr.style.display = "none";
}

selModel.selectNext();
row = selModel.getSelected();
if (row.id == currentRowId) { row = null };
}

selModel.selectRow(rowIdx, false);

}
}

},


I also added a new style to align the +/i image with the row data:


/* ------------------------------------------------------- */
/* Grid Style override for modded twistie (plus/minus) */
/* ------------------------------------------------------- */
.ext-nd-ed-twistie, .ext-nd-ed-blank {
vertical-align:middle;
}

captainm1uk
16 Oct 2007, 5:25 AM
Brilliant - works a treat

Thanks