extjs6 树节点的添加与删除及表格中按钮状态变更

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wyljz/article/details/80774340

树：

  var tree = Ext.create('Ext.tree.Panel', {
        rootVisible: false,
        store: Ext.create('departStore'),
        columnLines: true,
        rowLines: true,
        tbar: {
            cls: 'toolbar',
            defaults: {
                cls: 'nobg',
                border: false
            },
            items: [
                   {
                       text: '新建根部门',
                       iconCls: 'fa fa-plus',
                       handler: function () {
                           show('新建根部门');
                       }
                   }
            ]
        },
        columns: [
            {
                xtype: 'treecolumn',
                text: '名称',
                dataIndex: 'Name',
                width: 200
            },
            {
                text: '代码',
                dataIndex: 'Code',
                align: 'center'
            },
            {
                text: '部门性质',
                dataIndex: 'PropName',
                align: 'center'
            },
            {
                text: '排序',
                dataIndex: 'OrderNumber',
                align: 'center'
            },
            {
                text: '备注',
                dataIndex: 'Remark'
            },
            {
                xtype: 'actioncolumn',
                menuDisabled: true,
                width: 30,
                align: 'center',
                iconCls: 'icon-add',
                tooltip: '新建子部门',
                handler: function (grid, rowIndex, colIndex, actionItem, event, record, row) {
                    show('新建子部门', null, record);
                }
            }, {
                xtype: 'actioncolumn',
                menuDisabled: true,
                width: 30,
                align: 'center',
                iconCls: 'icon-edit',
                tooltip: '编辑',
                handler: function (grid, rowIndex, colIndex, actionItem, event, record, row) {
                    show('修改部门', record);
                }
            }, {
                xtype: 'actioncolumn',
                menuDisabled: true,
                width: 30,
                align: 'center',
                iconCls: 'icon-edit-remove',
                tooltip: '删除',
                handler: function (grid, rowIndex, colIndex, actionItem, event, record, row) {
                    myConfirm('确定删除？', function () {
                        post('/depart/deldepart', { id: record.get('Id') }, function (data) {
                            var fid = record.get('FartherId');
                            if (fid) {
                                var store = tree.getStore();
                                var fnode = store.getNodeById(fid);
                                if (!fnode.get('leaf')) {
                                    var childCount = fnode.get('childCount');
                                    if (childCount > 0) {
                                        fnode.set('childCount', childCount--);
                                    }
                                    if (childCount == 0) {
                                        fnode.set('leaf', true);
                                    }
                                }
                            }
                            record.remove();
                        });
                    })
                },
                isDisabled: function (view, rowIdx, colIdx, item, record) {
                    return !record.data.leaf;
                }
            }
        ]
    });

删除后找到其父节点，修改其leaf属性，可变更actioncolumn中isDisabled状态
表单：

var form = Ext.create('formNormal', {
            url: url,
            items: [
                { xtype: 'hidden', name: 'Id' },
                { xtype: 'hidden', name: 'FartherId' },
                { xtype: 'textfield', name: 'Name', fieldLabel: '名称', allowBlank: false },
                { xtype: 'textfield', name: 'Code', fieldLabel: '代码', allowBlank: false },
                {
                    xtype: 'combo', name: 'PropCode', fieldLabel: '部门性质',
                    editable: false,
                    emptyText: '--请选择--',
                    queryMode: 'remote',
                    store: Ext.create('departPropStore', {
                        listeners: {
                            load: function () {
                                var cmb = form.getForm().findField('PropCode');
                                if (record) {
                                    cmb.setValue(record.get('PropCode'));
                                }
                                if (farther) {
                                    cmb.setValue(farther.get('PropCode'));
                                    cmb.setReadOnly(true);
                                }
                            }
                        }
                    }),
                    displayField: 'Name',
                    valueField: 'Code',
                    forceSelection: true,
                    triggerAction: 'all',
                    allowBlank: false
                },
                { xtype: 'numberfield', name: 'OrderNumber', fieldLabel: '排序', value: 0 },
                { xtype: 'textfield', name: 'Remark', fieldLabel: '备注' }
            ],
            listeners: {
                onSubmitClick: function () {
                    formSubmit(form, function (data) {
                        var r = form.getRecord();
                        var v = form.getValues();

                        var store = tree.getStore();
                        var target = store.getRootNode();
                        if (v.FartherId && v.FartherId != '') {
                            target = store.getNodeById(v.FartherId);
                        }

                        if (record) {
                            r.set(v);
                            var t = r;
                            r.remove();
                            target.appendChild(t);
                        } else {
                            r = Ext.create('departModel');
                            v.leaf = true;
                            r.set(v);
                            r.setId(data);
                            r.set('PropName', form.getForm().findField('PropCode').getStore().getById(v.PropCode).get('Name'));

                            target.appendChild(r);

                            if (!target.isExpanded()) {
                                target.expand(false);
                            }
                        }
                        win.close();
                    });
                }
            }
        });

添加记录后，找到其父节点，使用appendChild将新建的model加入store中，界面中就会显示新加的记录。