ExtJs 4.2 - Property Grid with form fields?

Question

I'm trying to create a property grid, with form fields in the value column. By default when I click on the value, it turns to a text input. But I want it to be always visible as a text field or a combobox or a datepicker etc. I tried using sourceConfig, but no luck. How to do it?

Here's some of my code:

Ext.create('Ext.grid.property.Grid', {
    title: 'Details',
    id: 'settings-details',
    source: {
        "Username": "Username", //Need a text input
        "Email": "Email",
        "State": "State"        //Need a combo
    },
    sourceConfig: {
        "Username": {
            editor: Ext.create('Ext.form.field.Text', { allowBlank: true }),
            displayName: 'Whatever'
        }
    }
}),

Maybe you should try the example from here: docs.sencha.com/extjs/4.2.2/#!/api/… Haven't used Property grid before, but from what I can see you should use deafault keys in the source object as stated in the example. — Vlad
check this also: docs.sencha.com/extjs/4.2.2/extjs-build/examples/build/… — Vlad
I have referred the same example, but the problem is that the field is revealed only when I click the row item. I want it to be visible always, as in a form. Should I use something other than a Grid, that looks like a grid? — Rutwick Gangurde
Ext.property.Grid extends Ext.grid.Panel so there must be some trick. :) I don't know, maybe try to search answer in Ext.selection.Model — Vlad

Guilherme Lopes Guilherme Lopes · Accepted Answer · 2014-06-23T04:44:36

You need to define your combo inside the sourceConfig or using a variable like this:

var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
        // More states here....
    ]
});

Ext.create('Ext.grid.property.Grid', {
   title: 'Details',
   id: 'settings-details',
   width: 300,
   renderTo: Ext.getBody(),
   source: {
       Username: "Username", //Need a text input
       Email: "[email protected]",
       state: "State"        //Need a combo
   },
   sourceConfig: {
       state: {
           editor: Ext.create('Ext.form.ComboBox', {
              fieldLabel: 'Choose State',
              store: states,
              queryMode: 'local',
              displayField: 'name',
              valueField: 'abbr'
           }),
           displayName: 'State'
        }
    }
});

This should set a combo as your state editor...

ExtJs 4.2 - Property Grid with form fields?

1 Answers