PDA

View Full Version : ExtJs Property Grid Custom Editor



Sparky_74
7 Mar 2014, 3:28 AM
Hi,

I am attempting to create a custom property grid editor that will show a popup dialog and allow the user to select a value from a simple dropdown (once this is working this dialog will become more complicated). Once the user clicks the save button then the dialog should disappear and the property grid cell should update to show the new value.

I have it all working apart from the saving of the new value. When I debug I can see the fields value being changed, but this is not being shown in the actual property grid? Is this a scope issue or copy by value issue?

Any help would really be appreciated.


Ext.onReady(function() {

var myObject = {
number: 'One'
};

// custom editor
Ext.define('Ext.form.DialogEditorField', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.dialogEditorField',
editable: true,
onTriggerClick: function() {
var me = this;
if(!me.dialog) {
alert('Dialog property not set');
return;
}
if(me.disabled) return;
if(me.dialog.loadValue) me.dialog.loadValue(this);
me.dialog.on('hide', function() {
me.setValue('Five');
});
me.dialog.show();
}
});

// dialog to show
var myDialog = Ext.create('Ext.window.Window', {
title: 'Example Dialog',
height: 200,
width: 300,
modal: true,
resizable: false,
closable: true,
closeAction: 'hide',
bbar: [
'->',
{
xtype: 'button',
text: 'Save',
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
scope: this,
fn: function() {
var combo = Ext.getCmp('numberCombo');
myDialog.saveValue(combo.getValue());
myDialog.hide();
}
}
}
},
{
xtype: 'button',
text: 'Cancel',
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function() {
myDialog.hide();
}
}
}
}
],
items: [
Ext.create('Ext.form.ComboBox', {
id: 'numberCombo',
editable: false,
fieldLabel: 'Number',
store: [ 'One', 'Two', 'Three', 'Four', 'Five'],
queryMode: 'local'
})
],
loadValue: function(field) {
this.fieldId = field.id;
var combo = Ext.getCmp('numberCombo');
combo.setValue(field.getValue());
},
saveValue: function(value) {
var field = Ext.getCmp(this.fieldId);
field.setValue(value);
}
});

// propert grid
var grid = Ext.create('Ext.grid.property.Grid', {
title: 'Properties Grid',
width: 300,
renderTo: Ext.getBody(),
source: myObject,
sourceConfig: {
number: {
displayName: 'Number',
editor: Ext.create('widget.dialogEditorField', {
dialog: myDialog
})
}
}
});

});

chramer
8 Mar 2014, 11:25 AM
saveValue: function (value) {
field = Ext.getCmp(this.fieldId);
grid.getSelectionModel().getSelection()[0].set('value', value);
}