<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css"
href="/ajax/ext-4.0.2a/resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<!-- ENDLIBS -->
<script type="text/javascript" src="/ajax/ext-4.0.2a/bootstrap.js">
</script>
<script type="text/javascript">
Ext.require([ 'Ext.tree.*', 'Ext.data.*', 'Ext.window.MessageBox' ]);
/**
*select all sub child of Ext.tree.Panel
**/
function selectAllSubChild(node,checked){
//console.info(node);
//console.info(checked);
node.set('checked',checked);
if(node.hasChildNodes()){
node.eachChild(function(sub){selectAllSubChild(sub,checked);})
}
}
Ext.define('Ext.ux.treePanel',{
extend:'Ext.tree.Panel',
listeners : {
checkchange : function(node, checked, options) {
selectAllSubChild(node,checked);
}
}
});
Ext.onReady(function() {
var store = Ext.create('Ext.data.TreeStore', {
proxy : {
type : 'ajax',
url : '/ajax/ext-4.0.2a/examples/tree/check-nodes.json'
},
sorters : [ {
property : 'leaf',
direction : 'ASC'
}, {
property : 'text',
direction : 'ASC'
} ]
});
var tree = Ext.create('Ext.ux.treePanel', {
id : 'tree1',
store : store,
rootVisible : false,
useArrows : true,
frame : true,
title : 'Check Tree',
renderTo : 'tree-div',
width : 200,
height : 250,
dockedItems : [ {
xtype : 'toolbar',
items : {
text : 'Get checked nodes',
handler : function() {
var records = tree.getView().getChecked(), names = [];
Ext.Array.each(records, function(rec) {
names.push(rec.get('text'));
});
Ext.MessageBox.show({
title : 'Selected Nodes',
msg : names.join('<br />'),
icon : Ext.MessageBox.INFO
});
}
}
} ]
});
});
</script>
</head>
<body>
<div id="tree-div"></div>
<form id="adminForm"></form>
</body>
</html>當我寫完之後，才發現早就有人實現了，杯具呀。
http://lipengcheng0116.iteye.com/blog/1113851