treenode.js
Ext.onReady(function()?{
????????????Ext.QuickTips.init();
????????????Ext.BLANK_IMAGE_URL?=?"extjs/resources/images/default/s.gif";
????????????var?mytree?=?new?Ext.tree.TreePanel({
????????????????????????el?:?"container",
????????????????????????animate?:?true,
????????????????????????title?:?"简单Extjs动态树",
????????????????????????collapsible?:?true,
????????????????????????enableDD?:?true,
????????????????????????enableDrag?:?true,
????????????????????????rootVisible?:?true,
????????????????????????autoScroll?:?true,
????????????????????????autoHeight?:?true,
????????????????????????width?:?150,
????????????????????????lines?:?true
????????????????????});
????????????//?根节点
????????????var?root?=?new?Ext.tree.TreeNode({
????????????????????????id?:?"root",
????????????????????????text?:?"根节点",
????????????????????????checked?:?false
????????????????????});
????????????for?(var?j?=?1;?j?<?4;?++j)?{
????????????????var?node?=?root.appendChild(new?Ext.tree.TreeNode({
????????????????????????????text?:?'客户企业A'?+?j,
????????????????????????????allowDrag?:?false,
????????????????????????????checked?:?false
????????????????????????}));
????????????????for?(var?n?=?1;?n?<?4;?++n)?{
????????????????????node.appendChild(new?Ext.tree.TreeNode({
????????????????????????????????text?:?'栏目'?+?n,
????????????????????????????????allowDrag?:?false,
????????????????????????????????checked?:?false
????????????????????????????}));
????????????????}
????????????}
????????????mytree.setRootNode(root);
????????????mytree.render();
????????????mytree.on('checkchange',?function(node,?checked)?{
????????????????????????node.expand();
????????????????????????node.attributes.checked?=?checked;
????????????????????????node.eachChild(function(child)?{
????????????????????????????????????child.ui.toggleCheck(checked);
????????????????????????????????????child.attributes.checked?=?checked;
????????????????????????????????????child.fireEvent('checkchange',?child,
????????????????????????????????????????????checked);
????????????????????????????????});
????????????????????},?mytree);
????????????var?button?=?new?Ext.Button({
????????????????????????text?:?"选中id",
????????????????????????handler?:?function()?{
????????????????????????????var?b?=?mytree.getChecked();
????????????????????????????var?checkid?=?new?Array;//?存放选中id的数组
????????????????????????????for?(var?i?=?0;?i?<?b.length;?i++)?{
????????????????????????????????checkid.push(b[i].text);//?添加id到数组
????????????????????????????}
????????????????????????????alert(checkid.toString());
????????????????????????}
????????????????????}).render(document.body,?"btn");
????????});
treenode.html
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">
<html>
????<head>
????????<title>treenode复选框</title>
????????<meta?http-equiv="keywords"?content="keyword1,keyword2,keyword3">
????????<meta?http-equiv="description"?content="this?is?my?page">
????????<meta?http-equiv="content-type"?content="text/html;?charset=UTF-8">
????????<link?href="extjs/resources/css/ext-all.css"?rel="stylesheet"
????????????type="text/css"?/>
????????<script?src="extjs/adapter/ext/ext-base.js"?type="text/javascript"></script>
????????<script?src="extjs/ext-core.js"?type="text/javascript"></script>
????????<script?src="extjs/ext-all.js"?type="text/javascript"></script>
????????<script?type="text/javascript"?src="treenode.js"></script>?
????</head>
????<body>
????????<div?id="container">
????????</div>
????????<br?/>
????????<br?/>
????????<div?id="btn"></div>??
????</body>
</html>