树:

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

删除后找到其父节点,修改其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中,界面中就会显示新加的记录。

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