Ext JS tree中的节点添图标
日期：2014-05-16 浏览次数：20365 次
Ext JS tree中的节点加图标
? ? 由于项目需要，在panel中的tree节点需要加上图标，作了一番尝试，终于成功，在此mark。
? ? 首先，描述下需求上下文。一个remote的tree，需要在load数据完毕，在节点上，根据各自不同的数据，加上相应的图标。
? ? 其次，描述下我们的实现方式。
? ? 之前查资料的时候，知道树中的节点的值，在我们这种应用场景下，是直接从direct call的结果中取得的。所以，如果你要定义不同的节点，需要在传给树的json对象中，就已经标明此节点的iconCls属性，即控制树节点的图标属性。
? ?由于我们的树是direct call得来的，可能需要在某些时候刷新我们的树，需要定义root的id属性。在需要刷新tree的时候，调用tree的refresh事件。
? 这是我们一种基本实现过程。现在上代码：
? ?首先，如上所述，tree在取得的json对象中必须包含指明了包含css的iconCls属性。在此，我们定义如下对象，用作浏览器与server间的数据传递：
??写道
public class NodeForTreeView {
private String oid;
private String text;
private boolean leaf;
private String type;
private String iconCls;
public String getIconCls() {
return iconCls;
}
public void setIconCls(String icon) {
this.iconCls = icon;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
private List<NodeForTreeView> children;
public List<NodeForTreeView> getChildren() {
if (children == null)
children = new ArrayList<NodeForTreeView>();
return children;
}
public void setChildren(List<NodeForTreeView> children) {
this.children = children;
}
public String getOid() {
return oid;
}
public void setOid(String oid) {
this.oid = oid;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public boolean isLeaf() {
return leaf;
}
public void setLeaf(boolean leaf) {
this.leaf = leaf;
}
}
private String oid;
private String text;
private boolean leaf;
private String type;
private String iconCls;
public String getIconCls() {
return iconCls;
}
public void setIconCls(String icon) {
this.iconCls = icon;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
private List<NodeForTreeView> children;
public List<NodeForTreeView> getChildren() {
if (children == null)
children = new ArrayList<NodeForTreeView>();
return children;
}
public void setChildren(List<NodeForTreeView> children) {
this.children = children;
}
public String getOid() {
return oid;
}
public void setOid(String oid) {
this.oid = oid;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public boolean isLeaf() {
return leaf;
}
public void setLeaf(boolean leaf) {
this.leaf = leaf;
}
}
?定义了传递的数据结构，那么我们就可以继续定义界面元素与事件了。
?首先，是我们的界面元素，tree：
buildEquipTree : function() {
var supplierListID = this.getId() + 'SupplierTreeID';
var loader = new com.oocl.ir4.sps.framework.web.js.commonUI.tree.TreeLoader({
directFn : SrController.readEquips,
clientWindowId : this.clientWindowId
});
var supplierTree = {
id : supplierListID,
xtype : 'com.oocl.ir4.sps.framework.web.js.commonUI.tree.TreePanel',
userArrows : true,
collapsed : false,
autoScroll : true,
id : supplierListID,
border : false,
containerScroll : true,
rootVisible : false,
loader : loader,
root : {
// nodetype : 'async',
expanded : true,
text : 'Supplier',
id : {
oid : this.transMode,
orderViewType : this.orderViewType,
orderType : this.orderType
}
}
};
this.buildEquipTree = function() {
return this.findById(supplierListID);
}
return supplierTree;
}
?
其次，我们刷新tree的代码：
refreshTree : function() {
this.buildEquipTree().root.id = {
oid : this.transMode,
orderViewType : this.orderViewType,
orderType : this.orderType
};
this.buildEquipTree().root.reload();
this.buildEquipTree().expandAll();
},
?
上面就是我们对tree 节点加图标的简单实现。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
