Ext JS4百强应用: 做可编辑的,可checked的treegrid--第11强

本文链接：https://blog.csdn.net/haor2756/article/details/9224361

做一个可编辑的,可checked的treegrid，代码相当简洁：

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>