35671436 #2

Fiddle #2 for http://stackoverflow.com/questions/35671436/how-to-display-a-property-in-a-combobox-within-a-grid-with-cellediting-plugin-an

by Antonio Paternina

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">

JavaScript

/*** FUNCTION TO MOCK AJAX CALLS ***/
function sim(proxy, data, delay) {
  if (typeof data !== 'string') {
    data = Ext.JSON.encode(data);
  }

  proxy.url = '/echo/json/';
  proxy.actionMethods.read = "POST";
  proxy.actionMethods.update = "POST";
  proxy.extraParams.json = data;
  proxy.extraParams.delay = typeof delay == 'undefined' ? 0 : delay;
}

/*** TEST DATA ***/
var testData = {
  success: true,
  items: [{
    'id': 1,
    "firstName": "Lisa",
    "state": {
      "id": 1,
      "name": "Alabama"
    }
  }, {
    'id': 2,
    "firstName": "Bart",
    "state": {
      "id": 2,
      "name": "Alaska"
    }
  }, {
    'id': 3,
    "firstName": "Homer",
    "state": {
      "id": 3,
      "name": "Arizona"
    }
  }, {
    'id': 4,
    "firstName": "Marge",
    "state": {
      "id": 1,
      "name": "Alabama"
    }
  }]
};
testData = Ext.JSON.encode(testData)

/*** MODELS ***/
Ext.define('NS.model.State', {
  extend: 'Ext.data.Model',
  fields: [{
    name: 'id',
    type: 'int'
  }, {
    name: 'name',
    type: 'string'
  }]
});
Ext.define('NS.model.Person', {
  extend: 'Ext.data.Model',
  fields: [{
    name: 'id',
    type: 'int'
  }, {
    name: 'firstName',
    type: 'string'
  }, {
    name: 'state',
    type: 'NS.model.State'
  }]
});

/*** STORES ***/
// state store has hardcoded local data
Ext.define('NS.store.State', {
  extend: 'Ext.data.Store',
  model: 'NS.model.State',
  data: [{
    "id": 1,
    "name": "Alabama"
  }, {
    "id": 2,
    "name": "Alaska"
  }, {
    "id": 3,
    "name": "Arizona"
  }]
});
// person store has a proxy
Ext.define('NS.store.Grid', {
  extend: 'Ext.data.Store',
  model: 'NS.model.Person',
  autoload: true,
  proxy: {
    type: 'ajax',
    url: '/echo/json/',
    reader: {
      type: 'json',
      root: 'items' // <- same as in the JSON response
    },
    actionMethods: {
      read: 'POST',
      create: 'POST',
      destroy: 'POST',
      update: 'POST'
    },
    extraParams: {
      json: testData,
     ...