做一个可编辑的,可checked的treegrid，代码相当简洁：
请看代码：
<!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>ZCH</title>
<!-- extjs 样式 -->
<link rel="stylesheet" type="text/css" href="../ext4_2_0/resources/css/ext-all.css"/>
<!-- extjs 引入文件 -->
<script type="text/javascript" src="../ext4_2_0/ext-all.js"></script>
<script type="text/javascript" src="../ext4_2_0/locale/ext-lang-zh_CN.js"></script>
<script>
Ext.define('treeGridModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'title',
type: 'string'
}, {
name: 'min',
type: 'int'
}, {
name: 'max',
type: 'int'
}]
});
Ext.define('checkTreeGrid', {
extend: 'Ext.tree.Panel',
requires: [
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*',
'Ext.ux.CheckColumn'
],
xtype: 'tree-grid',
title: 'checkedTreeEditGrid',
useArrows: true,
rootVisible: false,
multiSelect: true,
//singleExpand: true,
initComponent: function() {
this.width = 600;
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
var me = this;
Ext.apply(this, {
store: new Ext.data.TreeStore({
model: treeGridModel,
proxy: {
type: 'ajax',
url: './checktreegrid.json'
},
folderSort: true
}),
plugins: [me.cellEditing],
selType: 'cellmodel', //设置为单元格选择模式
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: '可用资源',
flex: 2,
sortable: true,
dataIndex: 'title'
},{
text: '最小值',
flex: 1,
dataIndex: 'min',
sortable: true,
field:{
xtype: 'textfield'
}
},{
text: '最大值',
flex: 1,
dataIndex: 'max',
sortable: true,
field:{
xtype: 'textfield'
}
}],
listeners:{
checkchange : function(node, checked) {
if (checked == true) {
node.checked = checked;
// console.dir(node.parentNode);
//alert(node.get("leaf"));
//获得父节点
pNode = node.parentNode;
//当checked == true通过循环将所有父节点选中
for (; pNode != null; pNode = pNode.parentNode) {
pNode.set("checked", true);
}
}
//当该节点有子节点时，将所有子节点选中删除
if (!node.get("leaf") && !checked){
node.cascadeBy(function(node){
node.set('checked', false);
});
}
}
}
});
this.callParent();
}
});
Ext.onReady(function(){
var tree = Ext.create('checkTreeGrid', {
renderTo:'example-grid'
});
});
</script>
</head>
<body>
<div id="example-grid"></div>
</body>
</html>