Forms 使用表单添加和更新数据，这在extjs4中是如何实现的？

我有一个窗体面板和一个树面板 表单用于添加新用户，树用于显示用户列表

我想要的是右键单击我的树中的一个节点，单击编辑（已经可以这样做了），然后我在添加表单面板中有了我的数据，可以在那里修改并更新我的用户

so basically use the same form for adding and updating

这就是我想知道的 但它根本不起作用

我在我的树中添加了一个模型，我使用了loadRecord（rec），但我不知道如何将我的树数据和表单字段绑定在一起！ 尝试从我的树模型中添加同名的displayfield

我的树模型和存储：

Ext.define('TreeModel', {
extend: 'Ext.data.Model',
fields: [
        { name: 'text' },
        { name: 'id' }
    ]
});

window.ATreeStore = Ext.create('Ext.data.TreeStore', {
model: 'TreeModel',
root: Ext.decode(objt.TreeToJson()),
proxy: {
    type: 'ajax'
},
sorters: [{
    property: 'leaf',
    direction: 'ASC'
}, {
    property: 'text',
    direction: 'ASC'
}]
});

我的树菜单：

var myContextMenu = new Ext.menu.Menu({
items: [{
    text: 'Edit',
    handler: function () {

        Ext.getCmp('addaform').getForm().loadRecord(rec);

    }
}
}]

我的表格：

Ext.define("Ext.app.Adduser", {
extend: "Ext.form.Panel",

title: 'Add user',
id : 'addform',
closable: true,
collapsible: true,
animCollapse: true,
draggable: true,
resizable: true,
margin: '5 5 5 5',
height: 400,
frame: true,
fieldDefaults: {
    labelAlign: 'top',
    msgTarget: 'side'
},
defaults: {
    anchor: '100%'
},
items: [{
    layout: 'column',
    border: false,
    items: [{
        padding: '5',
        columnWidth: .5,
        border: false,
        layout: 'anchor',
        defaultType: 'textfield',
        items: [{
            fieldLabel: ' Name',
            name: 'name',
            allowBlank: false,
            displayfield:'id',//
            anchor: '95%'
        }]
    }, {
        padding: '5',
        columnWidth: .5,
        border: false,
        layout: 'anchor',
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'First name',
            name: 'fname',
            allowBlank: false,
            anchor: '95%'
        }, {
            xtype: 'textarea',
            fieldLabel: 'Profile',
            name: 'prof',
            anchor: '95%'
        }]
    }],

buttons: [{
    text: 'Save',
    handler: function () {
        this.up('form').getForm().submit
                        ({
                            url: 'AddData.ashx',
                            params: { action: 'add' },
                            success: function (form, action) 
                            {
                                Ext.MessageBox.show({ title: 'Success !',
                                                      msg: 'User added successfully<br />',
                                                      icon: Ext.MessageBox.INFO,
                                                      buttons: Ext.MessageBox.OK
                                                  }) }
}) }]

Ext.define（“Ext.app.Adduser”{
扩展：“Ext.form.Panel”，
标题：“添加用户”，
id:“addform”，
closable:是的，
可折叠的：是的，
对,，
真的，
可调整大小：正确，
边距：'5'，
身高：400，
框架：对，
字段默认值：{
labelAlign:“顶部”，
msgTarget:“侧边”
},
默认值：{
主持人：“100%”
},
项目：[{
布局：“列”，
边界：错，
项目：[{
填充：“5”，
列宽：.5，
边界：错，
布局：“锚定”，
defaultType:'textfield'，
项目：[{
fieldLabel:'名称'，
姓名：'姓名'，
allowBlank:false，
显示字段：'id'//
主持人：“95%”
}]
}, {
填充：“5”，
列宽：.5，
边界：错，
布局：“锚定”，
defaultType:'textfield'，
项目：[{
fieldLabel:“名字”，
名称：“fname”，
allowBlank:false，
主持人：“95%”
}, {
xtype:'textarea'，
fieldLabel:“配置文件”，
姓名：'教授'，
主持人：“95%”
}]
}],
按钮：[{
文本：“保存”，
处理程序：函数（）{
this.up（'form'）.getForm（）.submit
({
url:'AddData.ashx'，
参数：{action:'add'}，
成功：功能（形式、行动）
{
show（{title:'Success！'，
msg:“用户已成功添加
”，
图标：Ext.MessageBox.INFO，
按钮：Ext.MessageBox.OK
}) }
}) }]

---

谢谢

如果您的TreePanel使用了一个TreeStore，而TreeStore又有一个Ext.data.Model，那么当您右键单击一个节点（比如nodeA）时，您应该能够执行

如果还不清楚的话，我想可能会有所帮助，它讨论了将网格记录加载到表单中。我知道这不是ExtJS4，但关键函数是相同的

好的，让我用一个超级简单的例子来说明这一点，希望它能有所帮助

首先，我们创建要在其中显示内容的表单，请注意，

renderTo

属性绑定到我的HTML中的一个div，因此您可能需要更改它。还要注意，textarea和textfield的

name

属性是loadRecord工作的关键，它们必须匹配

字段稍后在模型中定义。

var form = Ext.create('Ext.form.Panel',{
    renderTo : 'form-div',
    items : [{
        xtype : 'textarea',
        fieldLabel : 'label 1',
        name : 'name'           
    },{
        xtype : 'textfield',
        fieldLabel : 'label 2',
        name : 'age'
    }]
});

接下来，我们创建树来显示数据，我们首先创建一个简单的模型：

Ext.define('Person',{
    extend : 'Ext.data.Model',
    fields : [{
        name : 'name', 
        type : 'string'
    },{
        name : 'age',
        type : 'int'
    }]
});

然后，我们创建一个使用该模型的TreeStore，并使用一些内联数据对其进行初始化：

var store = Ext.create('Ext.data.TreeStore',{
    model : 'Person',
    root : {
        expanded : true,
        children : [{
            name : 'John',
            age : 10,
            leaf : true
        },{
            name : 'Joe',
            age : 100,
            leaf : true
        }]
    }
});

然后我们创建树以显示存储中的数据。（注意，节点将显示为“未定义”，因为我们没有使用节点的默认“text”属性）

现在，您应该看到一棵树，其中两个节点都显示为“未定义”在您的页面上，还有一个带有文本区域和文本字段的表单。如果您单击树中的节点，该表单将显示所选节点的名称和年龄。
谢谢，我在阅读链接后尝试了您的建议，但仍然不太清楚！我更新了我的问题，说明了我现在的位置
var tree = Ext.create('Ext.tree.Panel',{
    height : 300,
    width : 300,
    store : store,
    rootVisible : false,
    renderTo : 'tree-div',
    listeners : {
        itemclick : function(view, record){
            form.loadRecord(record);
        }
    }
});