使用表单添加和更新数据，这在extjs4中怎么可能？

Question

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

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

so basically use the same form for adding and updating

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

我向我的树添加了一个模型，我使用了 loadRecord(rec)，但我不知道如何将我的树数据与表单字段绑定！ 尝试从我的树模型中添加同名的显示字段！

我的树模型和商店：

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
                                                  }) }
}) }]

谢谢

Answer 1

如果您的 TreePanel 使用 TreeStore，而 TreeStore 又具有 Ext.data.Model，那么当您右键单击节点（例如 nodeA）时，您应该能够执行 form.loadRecord(nodeA) ，loadRecord在这里

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

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

首先，我们创建要在其中显示内容的表单，请注意，renderTo 属性绑定到 HTML 内的 div，因此您可能需要更改它。另请注意，textarea 和 textfield 的 name 属性，它们是 loadRecord 工作的关键，它们必须与稍后在模型中定义的 fields 相匹配.

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
        }]
    }
});

然后创建树来显示数据在商店里。 （请注意，节点将显示为“未定义”，因为我们没有使用节点的默认“文本”属性）

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);
        }
    }
});

现在，您应该看到一棵树，其中两个节点在页面上均显示为“未定义”，并且带有文本区域和文本字段的表单。如果单击树内的节点，表单将显示所选节点的名称和年龄。