Extjs将TreePanel的静态数据绑定到FormPanel

Question

这可能是显而易见的,但我无法弄清楚如何将静态json对象绑定到extjs中的FormPanel.我是ExtJs的新手,所以我还在学习.我有一个TreePanel,其中包含node.attributes对象中包含的各种附加属性.单击节点时,id表示要在表单中显示数据.以下是我所拥有的.数据不会绑定到字段.

extjs的所有示例都涵盖从商店或网址加载数据.

tree.on('click', function (n) {

            var detailEl = details.body;

            if (n.attributes.iconCls == 'page') {

                detailEl.hide();
                var form = new Ext.FormPanel({
                    frame: true,
                    renderTo: detailEl,
                    title: 'Page Details',
                    bodyStyle: 'padding:5px 5px 0',
                    width: 350,
                    defaults: { width: 230 },
                    defaultType: 'textfield',
                    data: n.attributes,
                    items: [{
                        fieldLabel: 'Title',
                        name: 'title',
                        allowBlank: false
                    }, {
                        fieldLabel: 'Url',
                        name: 'url',
                        allowBlank: false
                    }, {
                        fieldLabel: 'Live',
                        name: 'islive',
                        xtype: 'checkbox'
                    }
                ],
                    buttons: [{
                        text: 'Save'
                    }]
                });


                detailEl.slideIn('l', { stopFx: true, duration: .2 });
            }

        });

最佳做法是每次创建一个新的FormPanel还是重新绑定现有的formPanel？

谢谢,

伊恩

Answer 1

最佳做法是将表单呈现一次,并根据所选节点更改值.

如前所述,data不是要使用的领域.要以批量方式分配值,您应该使用Ext.form.BasicForm.setValues( Array/Object values )方法.您正在BasicForm使用FormPanel的getForm()方法获取对象.

总之,

var form = new Ext.FormPanel({/*...*/});
tree.on('click', function (node){
    form.getForm().setValues(node.attributes);
});

注意,表单字段的名称和属性名称应该对应.