I am new to EXTJS and through scouring docs, forum and the web I have managed to setup a WCF REST service, and interact with that using EXTJS and GET/POST/PUT.
I am following the EXTJS MVC patterns.

I would like to create a reusable data-aware widget extending Ext.panel.Panel that I can include in the "Items" of any container (e.g. Viewport, Panel, etc.).
The extension must allow the parent container to specify the primary key value (e.g. personBMFactorHeaderID), retrieve a single record from the REST service, and display fields from that record in numberfield widgets contained in several views.

The extension must also contain the ability to save the updated entries from the widgets via the REST service (POST/PUT).

How do I:

1. Allow the parent container to specify the primary key value on the reusable widget (e.g. in C#, I would create a public int property on a user control)?

2. Invoke a call to the REST service passing this primary key value to GET the record associated with this primary key value?

3. Cause field values from this one record to display in designated "numberfield" widgets contained in multiple views (see VIEW1, VIEW2 and VIEW3 below)?

4. Invoke a call to the REST service for to save entries from these number fields back-end database?

I have attached a portion of my code to help you get a picture of what I have done, to advise as to where to go from here.

VIEW1 CODE:
Code:
Ext.define('FC.view.personbmfactor.BMBloodPressure', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.bmbloodpressure',
 
    width : 190,
    height: 80,
    layout: 'absolute',
 
    defaultType: 'numberfield',
 
    items:  [{
        x: 25,
        y: 28,
        xtype:'label',
        text: 'Systolic:'
    },{
        x: 95,
        y: 25,
        name: 'ValueBPSyst'
    },{
        x: 25,
        y: 53,
        xtype:'label',
        text: 'Diastolic:'
    },{
        x: 95,
        y: 50,
        name: 'ValueBPDiast'
    }],
    initComponent: function() {
        this.callParent(arguments);
    }
});
VIEW2 CODE:
Code:
Ext.define('FC.view.personbmfactor.BMCholesterol', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.bmcholesterol',
 
    width : 190,
    height: 80,
    layout: 'absolute',
 
    defaultType: 'numberfield',
 
    items:  [{
        x: 25,
        y: 28,
        xtype:'label',
        text: 'HDL:'
    },{
        x: 95,
        y: 25,
        name: 'ValueCholHDL'
    },{
        x: 25,
        y: 53,
        xtype:'label',
        text: 'LDL:'
    },{
        x: 95,
        y: 50,
        name: 'ValueCholLDL'
    }],
    initComponent: function() {
        this.callParent(arguments);
    }
});
VIEW3 CODE:
Code:
Ext.define('FC.view.personbmfactor.PersonBMFactorEdit', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.personbmfactoredit',
 
    width : 200,
    height: 385,
    layout: 'vbox',
 
    frame: true,
    items:  [{
       xtype: 'bmbloodpressure'
    },{
       xtype: 'bmcholesterol'
    },],
 
    initComponent: function() {
        this.callParent(arguments);
    }
});
CONTROLLER CODE:
Code:
Ext.define('FC.controller.PersonBMFactorController', {
    extend: 'Ext.app.Controller',
    views: [
       'personbmfactor.BMBloodPressure',
       'personbmfactor.BMCholesterol'
    ]}
});
MODEL CODE:
Code:
Ext.define('FC.model.PersonBMFactor', {
    extend: 'Ext.data.Model',
 
    fields: [
     { name: 'PersonBMFactorHeaderID',  mapping: 'PersonBMFactorHeaderID',  type: 'int' },
     { name: 'ValueBPSyst',     mapping: 'ValueBPSyst',    type: 'float' },
     { name: 'ValueBPDiast',    mapping: 'ValueBPDiast',    type: 'float' },
     { name: 'ValueCholHDL',    mapping: 'ValueCholHDL',    type: 'float' },
     { name: 'ValueCholLDL',    mapping: 'ValueCholLDL',    type: 'float' }
 ],
 
 idProperty: 'PersonBMFactorHeaderID'
});
STORE CODE:
Code:
Ext.define('FC.store.PersonBMFactors', {
    extend: 'Ext.data.Store',
    model: 'FC.model.PersonBMFactor',
    autoLoad: true,
    proxy: {
        type: 'rest',
 
       api: {
         read: '../server/fcrestsvr/svcbio/Get/{personBMFactorHeaderID}',
         create: '../server/fcrestsvr/svcbio/Save',
         update: '../server/fcrestsvr/svcbio/Save',
         destroy: '../server/fcrestsvr/svcbio/Delete'
       },
 
       reader: {
            type: 'json',
            root: 'personbmfactor',
            successProperty: 'success',
            messageProperty: 'message'
       }
    }
});
APP CODE:
Code:
Ext.Loader.setConfig({enabled:true});
 
Ext.application({
    name: 'FC',
 
    appFolder: 'app',
 
    launch: function() {
 
       Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [{
                xtype: 'personbmfactoredit'
            }]
       });
    },
 
    controllers: [
       'PersonBMFactorController'
    ]
});