PDA

View Full Version : How to update custom components?



MichaelEr
17 Feb 2012, 11:48 AM
Hi together,

I'm just writing my first custom component to render some data. The renderData given in the constructor (see the snippet below) is a record from a treestore. Rendering the element works fine, but how to rerender resp. update the content of the component, if the renderData record value is changed (see the click listener at the end of the snippet)?

Another question is, how to realize inline editing, so that clicking the element changes the simple text description to a form which is submitted when pressing enter and the new text is displayed? Any ideas?

BTW: Is the following snippet OK or are there better ways to create custom components? I couldn't find any best practices or something like that. I heard that the initiation of the template should be done in the onRender function but when doing so I always get an exception that the el is null.if I use the code from the initComponent in the onRender function.
el is null
if (el.insertAdjacentHTML)


Ext.define('MyApp.ux.Description', {
alias : 'widget.description',
extend : 'Ext.Component',
id : 'description',

constructor : function(config) {
this.renderData = config.renderData;
this.callParent(arguments);
},

initComponent : function() {
var description = this.renderData.get('description');
this.renderTpl = new Ext.XTemplate(
'<div>{[this.getDescription()]}</div>',
{
getDescription : function() {
if (description) {
return description;
} else {
return 'No description defined...';
}
}
});
this.callParent();
},

listeners : {
afterrender : function(comp) {
var component = Ext.get(this.id);
component.on('click', function(e) {
e.stopEvent();
alert('div ' + this.renderData.get('id') + ' clicked');
this.renderData.set('description','foo');
},this);
}
}
});

Kind regards
Michael

mitchellsimoens
17 Feb 2012, 12:13 PM
To update the renderData, you have to first update the renderData object and then apply it to the XTemplate and update the component's element with that HTML.

You can view the simple-widgets example for inline editing. If you double-click on the title or a field's label, it will turn editable.

MichaelEr
17 Feb 2012, 2:06 PM
Hi,

thanks for the help. I almost got it. I could edit and update the text. The only problem is the positioning of the editor. I tried it with different allignment, offset configurations and also calling the allignTo method. Nothing works. How to render the editor on top of the text :-/

Thats my current implementation:

afterrender : function(comp) {
var component = Ext.get(this.id);
var height = component.getHeight();
component.on('click', function(e) {
e.stopEvent();
var editor = new Ext.Editor({
updateEl : true,
shadow : false,
completeOnEnter : true,
cancelOnEsc : true,
ignoreNoChange : true,
width : 400,
height : height,
field : {
xtype : 'textfield'
},
listeners : {
complete : function(editor, newValue) {
var myWidget = Ext
.getCmp('description');
myWidget.renderData.set('description',
newValue);
}
}
});
editor.startEdit(component);
}, this);
}

Kind regards
Michael

MichaelEr
18 Feb 2012, 4:26 AM
I just had to play a little bit with the properties, especially 'floating'. I also had to wrap it into a container component and to remove the <div> from the template, otherwise it would be in the editor text field. I don't get the delegating argument working with a given class. But now it works!

Thank you!

Kind regards
Michael