JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-4.1.0-gpl/ext-all-debug.js"></script>
JavaScript
// New PropertyGridEditor with functionality to render the selected value correctely to the grid
Ext.define('PropertyGridComboBoxEditor', {
extend: 'Ext.form.ComboBox',
// set some default values
queryMode: 'local',
displayField: 'type',
valueField: 'value',
editable: false,
nameField:'dadadasd',
// constructor
constructor: function(config) {
var me = this;
this.initConfig(config);
// apply the data-object to the store if it was given with the config
if (config.data && config.data[0]) {
this.store = Ext.create('Ext.data.Store', {
fields: ['type', 'value'],
data: config.data
});
}
// Generic custom renderer function
this.renderer = function(value, meta, record, rowIdx, colIdx, store, view) {
var idx = me.store.find('value', value);
return (idx >= 0) ? (me.store.getAt(idx).get('type')) : value;
};
return this.callParent(arguments);
}
});
Ext.onReady(function() {
var customEditors = [],
customRenderers = [];
// create custom editor & renderer for property "Visibility"
customEditors['Visibility'] = Ext.create('PropertyGridComboBoxEditor', {
data: [
{ 'type': 'Show', 'value': '0' },
{ 'type': 'Hide', 'value': '1' },
{ 'type': 'Readonly', 'value': '2' },
{ 'type': 'Pluged out', 'value': '3' }
]
});
customRenderers['Visibility'] = customEditors['Visibility'].renderer;
// create custom editor & renderer for property "Alignment"
customEditors['Alignment'] = Ext.create('PropertyGridComboBoxEditor', {
data: [
{ 'type': 'Left', 'value': '0' },
{ 'type': 'Right', 'value': '1' },
{ 'type': 'Top', 'value': '2' },
{ 'type': 'Bottom', 'value':...