Question

This may be obvious but I can’t figure out how to bind a static json object to to a FormPanel in extjs. I am new to ExtJs so I’m still learning. I have a TreePanel with various additional attributes contained on the node.attributes object. When a node is clicked id like to display the data in a form. Below is what I have. The data does not get bound to the fields.

All the examples for extjs cover loading data from a store or a url.

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

        });

Also is it best practise to create a new FormPanel each time or to rebind the existing formPanel?

Thanks,

Ian

Answer 1

The best practice is to have the form rendered once and change the values according to the nodes selected.

As already mentioned, data isn’t the field to use. To assign values in a bulk manner, you should use Ext.form.BasicForm.setValues( Array/Object values ) method. You are getting BasicForm object using FormPanel’s getForm() method.

Summarizing,

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

Pay attention, that form fields’ names and attributes’ names should correspond.