hi to everyone,

I need to create a widget that edits certain attributes of a specific object. Each attribute consist generally of two elements: 1) Value 2) Unit of measure. The last one is only applicable to numerical values, so it is optional or not applicable at all in certain cases.
My idea is to create a form field that allows represent each attribute as:

Label text: [ 0.125] [ W (Watt) ]

or even:

Label text: [ 0.125 W] <-- in view mode,
Label text: [ 0.125] [ W (Watt) ] <-- in edit mode, when user clicks on the field

The user should be able to edit simple value and UoM separately, but as result of attributeField.getValue() I would like to get complex attribute object of my own model.
In addition, I would like to have an editable grid with the same editing capabilities.

As I understand I need to implement my custom AttributeField and AttributeCell classes and AttributePropertyEditor as well. I want to reuse existing sencha components maximally.The main question is how to implement composite Cell object that can be displayed on form and in a grid. Which base cell classes I should extend: ValueBaseFieldCell, FieldCell, AbstractEventInputCell, AbstractInputCell, AbstractEditableCell or AbstractCell... How to have to individual, independent cell in one my custom cell?
Does anybody have an example or could point my search in right direction?
Thanks in advance!