How to make an extjs grid a form field?

Question

I have a requirement to create a custom form field that is basically an extjs grid. The user should be able to click a result in the grid. This clicked result should then become the fields value. Also, this field needs to extend Ext.form.field. Here's what I got:

Ext.define('MyApp.field.Grid', {
    alias: 'widget.GriedField',
    extend: 'Ext.form.field.Base',

I'm a lot of confused on how to add a grid to form field base. Looks like form field base's template expects HTML. How do I get it accept a component?

Jamie Sutherland Jamie Sutherland · Accepted Answer · 2012-10-23T01:58:07

If you just need to select a value from a list of items. Why not use a combobox?

If you need to select multiple items. There is an example of how to use the MultiSelect ux component in the documentation examples.

http://docs.sencha.com/ext-js/4-1/#!/example/multiselect/multiselect-demo.html

If you really must use a grid. Then I wouldn't bother with trying to create a field type and cause yourself grief.

Add a listener to your grids selectionchange event and update a hidden field in your form with the value you want from the grid. Job done.

How to make an extjs grid a form field?

2 Answers