PDA

View Full Version : add button to column in tree



sanjay_1985
25 Jun 2009, 9:41 PM
·I have used ColumnTree to implement the functionality(Please see the attached image). I was able to implement the first column - Categories but couldn’t able to implement the rest 2 columns – Add Plan & Delete Plan.
·Is it possible to add the buttons or images to each and every row using extJs functionality
Your help is appreciated

Here is the code



var tree = new Ext.tree.ColumnTree({
width: 700,
height: 300,
rootVisible:false,
autoScroll:true,
title: 'Business Units',
renderTo: Ext.getBody(),

columns:[{
header:'Categories',
width:500,
dataIndex:'category'
},{
header:'Add Plan',
width:100,
dataIndex:'add Plan'
},{
header:'Delete Plan',
width:100,
dataIndex:'deletePlan'
}],

loader: new Ext.tree.TreeLoader({
dataUrl:'column-data.json',
uiProviders:{
'col': Ext.tree.ColumnNodeUI
}
}),

root: new Ext.tree.AsyncTreeNode({
draggable:false,
id:'source',
children: json
})
});

var tree = new Ext.tree.ColumnTree({
width: 700,
height: 300,
rootVisible:false,
autoScroll:true,
title: 'Division',
renderTo: Ext.getBody(),

columns:[{
header:'Categories',
width:500,
dataIndex:'category'
},{
header:'Add Plan',
width:100,
dataIndex:'addPlan'
},{
header:'Delete Plan',
width:100,
dataIndex:'deletePlan'
}],

loader: new Ext.tree.TreeLoader({
dataUrl:'column-data.json',
uiProviders:{
'col': Ext.tree.ColumnNodeUI
}
}),

root: new Ext.tree.AsyncTreeNode({
draggable:false,
id:'source',
children: jsonDiv
})
});

});

// This method populates the values of the Responsibility Levels 1 and 2
// into the corresponding text fields on the Injured Party Information page,
// when the user clicks on a particular level of the Responsibility Levels tree.
function populateRespVals(node){
levels = node.text.split(' - ');
}

Also PFB the columnNodeUI.js code which is needed to implement his functionality


/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/

Ext.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
lines:false,
borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
cls:'x-column-tree',

onRender : function(){
Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
this.headers = this.body.createChild(
{cls:'x-tree-headers'},this.innerCt.dom);

var cols = this.columns, c;
var totalWidth = 0;

for(var i = 0, len = cols.length; i < len; i++){
c = cols[i];
totalWidth += c.width;
this.headers.createChild({
cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
cn: {
cls:'x-tree-hd-text',
html: c.header
},
style:'width:'+(c.width-this.borderWidth)+'px;'
});
}
this.headers.createChild({cls:'x-clear'});
// prevent floats from wrapping when clipped
this.headers.setWidth(totalWidth);
this.innerCt.setWidth(totalWidth);
}
});

Ext.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
focus: Ext.emptyFn, // prevent odd scrolling behavior

renderElements : function(n, a, targetNode, bulkRender){
this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

var t = n.getOwnerTree();
var cols = t.columns;
var bw = t.borderWidth;
var c = cols[0];

var buf = [
'<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
'<div class="x-tree-col" style="width:',c.width-bw,'px;">',
'<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
'<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',
'<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',
'<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
'<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
"</div>"];
for(var i = 1, len = cols.length; i < len; i++){
c = cols[i];

buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
'<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
"</div>");
}
buf.push(
'<div class="x-clear"></div></div>',
'<ul class="x-tree-node-ct" style="display:none;"></ul>',
"</li>");

if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
n.nextSibling.ui.getEl(), buf.join(""));
}else{
this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
}

this.elNode = this.wrap.childNodes[0];
this.ctNode = this.wrap.childNodes[1];
var cs = this.elNode.firstChild.childNodes;
this.indentNode = cs[0];
this.ecNode = cs[1];
this.iconNode = cs[2];
this.anchor = cs[3];
this.textNode = cs[3].firstChild;
}
});

sanjay_1985
28 Jun 2009, 9:39 PM
Someone pls help :s

Maxrunner
6 May 2010, 10:47 AM
Did you manage to find this?

issameddine
7 May 2010, 12:00 AM
Hello
add the renderer property



{
header:'Add Plan',
width:100,
dataIndex:'addPlan',
renderer : renderIco
}


renderIco = function (value, metadata, record)
{
return String.format ('<div class="info-icon" style="width:16px; height:16px" id="{0}" ' +
' onclick="urFunction.call (this, true)" ' + ' alt="description"></div>', record.data.ID);
}


css

.app-info-icon
{
background-image : url('ur image path') !important;}

Maxrunner
7 May 2010, 2:43 AM
hi thanks for the help, the function parameters are not recognized....

issameddine
7 May 2010, 2:48 AM
send ur code plz

Maxrunner
7 May 2010, 5:32 AM
var rootNodes= new Ext.tree.AsyncTreeNode({

children: [
<c:forEach items="${elements}" var="elemento" varStatus="i">
{ text :"<span onmouseover=this.style.textDecoration='underline'; onmouseout=this.style.textDecoration='none'; >${elemento.designacao}</span>",
id : ${elemento.id},
// icon : "${pageContext.request.contextPath}/images/tree/dhtmlgoodies_folder.gif" ,
expanded: false
//se for para escolher multiplos
<c:if test="${not empty multiple}">

, checkbox : {
xtype :'checkbox',
checked : false,
name : "org",
value : "${elemento.designacao}",
id : "check_" + ${elemento.id}
},
uiProvider :'col'//escolher novo user interface
</c:if>

}
<c:if test="${!i.last}">,</c:if>
</c:forEach>
]
});

/////////END OF NÓS INICIAIS////


//////////////LOADER DA TREE//////////////////////

treeLoader= new Ext.tree.TreeLoader({url: '${pageContext.request.contextPath}/ajaxListOrganicaNode.do2'
<c:if test="${not empty multiple}">
//associar conteudo ao interface alternativo
, uiProviders :{
'col' : Ext.tree.ColumnNodeUI},
baseParams :{'multiple':true}
</c:if>
});

/////////////END OF LOADER DA TREE////////////////


///////////////TREE PANEL///////////////

<c:if test="${empty multiple}">
var tree = new Ext.tree.TreePanel({
</c:if>
<c:if test="${not empty multiple}">
var tree = new Ext.tree.ColumnTree({
</c:if>
id : 'treeP',
header : true,
width : 510,
height : 350,
autoScroll : true,
animate : true,
loader : treeLoader,
rootVisible : false,
border : false,
layout : 'fit',
<c:if test="${not empty multiple}">
columns : [{
header : 'Titulo',
width : 485
},{
header : 'Seleccionar',
width : 65 ,
dataIndex : 'Seleccionar',
resizable : false ,
renderer : function (value, metadata, record)
{
alert(this);
return String.format ('<div class="info-icon" style="width:16px; height:16px;" id="metadata.id" ' +
' onclick="alert('+'record'+')" ' + ' alt="description"></div>');
}
}],
</c:if>
bbar : [
'->'
<c:if test="${not empty multiple}">
,submeter
</c:if>,
fechar,
limpar
],
root : rootNodes
});

Maxrunner
7 May 2010, 5:33 AM
send ur code plz


var rootNodes= new Ext.tree.AsyncTreeNode({

children: [
<c:forEach items="${elements}" var="elemento" varStatus="i">
{ text :"<span onmouseover=this.style.textDecoration='underline'; onmouseout=this.style.textDecoration='none'; >${elemento.designacao}</span>",
id : ${elemento.id},
// icon : "${pageContext.request.contextPath}/images/tree/dhtmlgoodies_folder.gif" ,
expanded: false
//se for para escolher multiplos
<c:if test="${not empty multiple}">

, checkbox : {
xtype :'checkbox',
checked : false,
name : "org",
value : "${elemento.designacao}",
id : "check_" + ${elemento.id}
},
uiProvider :'col'//escolher novo user interface
</c:if>

}
<c:if test="${!i.last}">,</c:if>
</c:forEach>
]
});

/////////END OF NÓS INICIAIS////


//////////////LOADER DA TREE//////////////////////

treeLoader= new Ext.tree.TreeLoader({url: '${pageContext.request.contextPath}/ajaxListOrganicaNode.do2'
<c:if test="${not empty multiple}">
//associar conteudo ao interface alternativo
, uiProviders :{
'col' : Ext.tree.ColumnNodeUI},
baseParams :{'multiple':true}
</c:if>
});

/////////////END OF LOADER DA TREE////////////////


///////////////TREE PANEL///////////////

<c:if test="${empty multiple}">
var tree = new Ext.tree.TreePanel({
</c:if>
<c:if test="${not empty multiple}">
var tree = new Ext.tree.ColumnTree({
</c:if>
id : 'treeP',
header : true,
width : 510,
height : 350,
autoScroll : true,
animate : true,
loader : treeLoader,
rootVisible : false,
border : false,
layout : 'fit',
<c:if test="${not empty multiple}">
columns : [{
header : 'Titulo',
width : 485
},{
header : 'Seleccionar',
width : 65 ,
dataIndex : 'Seleccionar',
resizable : false ,
renderer : function (value, metadata, record)
{
alert(this);
return String.format ('<div class="info-icon" style="width:16px; height:16px;" id="metadata.id" ' +
' onclick="alert('+'record'+')" ' + ' alt="description"></div>');
}
}],
</c:if>
bbar : [
'->'
<c:if test="${not empty multiple}">
,submeter
</c:if>,
fechar,
limpar
],
root : rootNodes
});

Maxrunner
7 May 2010, 7:12 AM
send ur code plz

seems sometimes this needs the admin aproval?but ive already submit some of the code, this is, i wanted an icon that when clicked it would expand the child nodes and select the checkbox, but im not using the checked property.

Edit: might work now:


///////////NÓS INICIAIS//////////

var rootNodes= new Ext.tree.AsyncTreeNode({

children: [
<c:forEach items="${elements}" var="elemento" varStatus="i">
{ text :"<span onmouseover=this.style.textDecoration='underline'; onmouseout=this.style.textDecoration='none'; >${elemento.designacao}</span>",
id : ${elemento.id},
// icon : "${pageContext.request.contextPath}/images/tree/dhtmlgoodies_folder.gif" ,
expanded: false
//se for para escolher multiplos
<c:if test="${not empty multiple}">

, checkbox : {
xtype :'checkbox',
checked : false,
name : "org",
value : "${elemento.designacao}",
id : "check_" + ${elemento.id}
},
uiProvider :'col'//escolher novo user interface
</c:if>

}
<c:if test="${!i.last}">,</c:if>
</c:forEach>
]
});

/////////END OF NÓS INICIAIS////


//////////////LOADER DA TREE//////////////////////

treeLoader= new Ext.tree.TreeLoader({url: '${pageContext.request.contextPath}/ajaxListOrganicaNode.do2'
<c:if test="${not empty multiple}">
//associar conteudo ao interface alternativo
, uiProviders :{
'col' : Ext.tree.ColumnNodeUI},
baseParams :{'multiple':true}
</c:if>
});

/////////////END OF LOADER DA TREE////////////////


///////////////TREE PANEL///////////////

<c:if test="${empty multiple}">
var tree = new Ext.tree.TreePanel({
</c:if>
<c:if test="${not empty multiple}">
var tree = new Ext.tree.ColumnTree({
</c:if>
id : 'treeP',
header : true,
width : 510,
height : 350,
autoScroll : true,
animate : true,
loader : treeLoader,
rootVisible : false,
border : false,
layout : 'fit',
<c:if test="${not empty multiple}">
columns : [{
header : 'Titulo',
width : 485
},{
header : 'Seleccionar',
width : 65 ,
dataIndex : 'Seleccionar',
resizable : false ,
renderer : function (value, metadata, record)
{
alert(this);
return String.format ('<div class="col-move-top" style="width:16px; height:16px;top:auto;visibility:visible" id="metadata.id" ' +
' onclick="expandChilds.call(this)" ' + ' alt="description"></div>',record.id);
}
}],
</c:if>
bbar : [
'->'
<c:if test="${not empty multiple}">
,submeter
</c:if>,
fechar,
limpar
],
root : rootNodes
});

Maxrunner
7 May 2010, 7:17 AM
send ur code plz

Apparentey the parameters work but not inside the div tag:


return String.format ('<div class="col-move-top" style="width:16px; height:16px;top:auto;visibility:visible" id="metadata.id" ' +
' onclick="expandChilds.call(this)" ' + ' alt="description"></div>',record.id);

Might this be because the tree is called in an ajax request?

issameddine
7 May 2010, 7:58 AM
u have an error


return String.format ('<div class="col-move-top" style="width:16px; height:16px;top:auto;visibility:visible" id="{0}" ' +
' onclick="expandChilds.call(this)" ' + ' alt="description"></div>',record.data.id);

Maxrunner
7 May 2010, 8:09 AM
Nevermindi already fixed it, but i cant seem to pass the node in the onclick method, or is it possible

Also record.data.id doesnt work it seems, only record.id

issameddine
7 May 2010, 8:40 AM
record.data.id daesn't work because u havn't an "id" attribute in ur dataReader.

Maxrunner
7 May 2010, 8:54 AM
u have an error


return String.format ('<div class="col-move-top" style="width:16px; height:16px;top:auto;visibility:visible" id="{0}" ' +
' onclick="expandChilds.call(this)" ' + ' alt="description"></div>',record.data.id);



This gives me an error on the metadata variable when attempting to show it on an alert window called in the div onclick, but it will print it before the tag.


renderer : function (value, metadata, record)
{
alert(metadata);
return String.format ('<div class="col-move-top" style="width:16px; height:16px;top:auto;visibility:visible" id="{1}" ' +
' onclick="alert({0})" ' + ' alt="description"></div>',metadata,record.id);
}
}],

Maxrunner
7 May 2010, 8:57 AM
record.data.id daesn't work because u havn't an "id" attribute in ur dataReader.

What do you mean??in the rootNodes or in the columns properties?

edit: this doesnt work it seems:



renderer : function (value, metadata, record)
{
alert(metadata);
return String.format ('<div class="col-move-top" style="width:16px; height:16px;top:auto;visibility:visible" id="{1}" ' +
' onclick="alert({0})" ' + ' alt="description"></div>',metadata,record.id);
}
}],


EDIT:the div alert gives an error: " missing ] after element list" - alert([Node 1])

issameddine
9 May 2010, 11:51 PM
Hello
give me the fields in your record

Maxrunner
10 May 2010, 1:54 AM
Hello
give me the fields in your record

This is the full file containing the tree:


<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


(function(){

toggleCheck= function(node,isCheck){
if(node)
{
var args=[isCheck];
node.cascade(function(){
c=args[0];
this.ui.toggleCheck(c);
this.attributes.checkbox.checked=c;
},null,args);
}
}

expandChildren= function(id){

var node = tree.getNodeById(id);
node.expand(true,true,function(node){node.attributes.checkbox.checked=true});

}
/////////////// BOTOES ///////////////////

var expandir = newButton('Expandir nós',function(){expandeTodos(tree);});

var colapsar = newButton('Colapsar nós',function(){colapseTodos(tree);});

var fechar = newButton('Fechar',function(){fecharWin(${param.window});});

var limpar = newButton('Limpar',function(){alteraParent('','',winchoose,'${param.valuePlaceOlder}','${param.descPlaceOlder}');});

var submeter = newButton('Submeter',function(){alteraParentMultiple(winchoose,'${param.valuePlaceOlder}','${param.descPlaceOlder}');});

var remover = newButton('Remover todos',function(){CheckBoxState(false)});

var seleccionar = newButton('Seleccionar todos',function(){CheckBoxState(true)});

/////////////////END OF BOTOES//////////////////////


///////////NÓS INICIAIS//////////

var rootNodes= new Ext.tree.AsyncTreeNode({

children: [
<c:forEach items="${elements}" var="elemento" varStatus="i">
{ text :"<span onmouseover=this.style.textDecoration='underline'; onmouseout=this.style.textDecoration='none'; >${elemento.designacao}</span>",
id : ${elemento.id},
// icon : "${pageContext.request.contextPath}/images/tree/dhtmlgoodies_folder.gif" ,
expanded: false
//se for para escolher multiplos
<c:if test="${not empty multiple}">

, checkbox : {
xtype :'checkbox',
checked : false,
name : "org",
value : "${elemento.designacao}",
id : "check_" + ${elemento.id}
},
uiProvider :'col'//escolher novo user interface
</c:if>

}
<c:if test="${!i.last}">,</c:if>
</c:forEach>
]
});

/////////END OF NÓS INICIAIS////


//////////////LOADER DA TREE//////////////////////

treeLoader= new Ext.tree.TreeLoader({url: '${pageContext.request.contextPath}/ajaxListOrganicaNode.do2'
<c:if test="${not empty multiple}">
//associar conteudo ao interface alternativo
, uiProviders :{
'col' : Ext.tree.ColumnNodeUI},
baseParams :{'multiple':true}
</c:if>
});

/////////////END OF LOADER DA TREE////////////////


///////////////TREE PANEL///////////////

<c:if test="${empty multiple}">
var tree = new Ext.tree.TreePanel({
</c:if>
<c:if test="${not empty multiple}">
var tree = new Ext.tree.ColumnTree({
</c:if>
id : 'treeP',
header : true,
width : 510,
height : 350,
autoScroll : true,
animate : true,
loader : treeLoader,
rootVisible : false,
border : false,
layout : 'fit',
<c:if test="${not empty multiple}">
columns : [{
header : 'Titulo',
width : 485
},{
header : 'Seleccionar',
width : 65 ,
resizable : false ,
renderer : function (value, metadata, record)
{
return String.format ('<div class="col-move-top" style="width:16px; height:16px;top:auto;visibility:visible" id="{1}" ' +
' onclick="expandChildren({1})" alt="description"></div>', record, record.id);
}
}],
</c:if>
bbar : [
'->'
<c:if test="${not empty multiple}">
,submeter
</c:if>,
fechar,
limpar
],
root : rootNodes
});

/////////////END OF TREE PANEL/////////////


////////////EVENTOS DA TREEPANEL////////////////

//se for para escolher apenas um node
<c:if test="${empty multiple}">
tree.on('click', function(node,el){
affectParent(node.id,node.text,winchoose,'${param.valuePlaceOlder}','${param.descPlaceOlder}');
});
</c:if>
//se for para escolher multiplos nodes
<c:if test="${not empty multiple}">
tree.on('click',function(node,el){
if($("check_"+node.id).checked)
$("check_"+node.id).checked=false;
else
$("check_"+node.id).checked=true;
});
</c:if>

//////////END OF EVENTOS DA TREEPANEL/////////////


//////////PANEL QUE RECEBE O TREEPANEL////////////

fpanel = new Ext.Panel({
border:false,
id : 'fpan',
layout:'fit',
tbar :[expandir,
colapsar,
'->'
<c:if test="${not empty multiple}">
,seleccionar,
remover
</c:if>]});
fpanel.add(tree);

/////////END OF PANEL QUE RECEBE O TREEPANEL////////


////////EVENTO PANEL-AUMENTAR COLUNA TITULO QDO WINDOW É REDIMENSIONADA////////

<c:if test="${not empty multiple}">
resizeTreePanelHeader(tree);
</c:if>
///////////END OF AUMENTAR COLUNA TITULO///////////////////////////////


return fpanel;

})();





i managed to get the node by passing the id. but seems the expand method works but not the expandallChildren method.

Maxrunner
10 May 2010, 2:19 AM
Hello
give me the fields in your record

Seems i can get to expand the childNodes but i cant seem to check the checkboxes.....let me try to submit the full code page.