PDA

View Full Version : custom component



oana0211
20 Aug 2013, 7:30 AM
Hello everybody,

I want to develop a custom component that take some code like parameter and then create a help control. I want to change in initComponent after loading a store a property but it doesn't work. Here's my code. If I change the property without loading a store it function but if I change the property inside store load it doesn't work. I think the loading store take more time and the control in render first.
How can I fix this.

Thank you



Ext.define(
'aaaBanking.view.DynamicForms.HelpControl', {
extend: 'Ext.container.Container',
alias: 'widget.helpControl',

requires: ['aaa.store.DynamicForms.HelpStore'],

html: ' <img id="leftCallout" src="resources/images/default/help_icon.png" width="16" height="16"/>' +
'<div style="display:none;">' +
'<div id="content-tip">' +
'test'+
'<div class="x-clear"></div>' +
'</div>' +
'</div>',

listeners: {
render: function (comp) {
new Ext.ToolTip({
name: 'content-anchor-tip',
target: 'leftCallout',
anchor: 'left',
html: null,
maxWidth: 800,
maxHeight: 250,
autoScroll: true,
autoHide: false,
closable: true,
contentEl: 'content-tip',
// load content from the page
listeners: {
'render': function () {
this.header
.on('click',function (e) {
e.stopEvent();
Ext.Msg.alert(
'Link',
'Link to something interesting.');
Ext.ComponentQuery('name=content-anchor-tip')[0].hide();
},
this, {
delegate: 'a'
});
}
}
});
}
},





initComponent: function () {
var me = this;
var store = Ext.create("aaa.store.DynamicForms.HelpStore");
store.load(function(records,operation,success){
if (success){
var content = records[0].data.content;
me.html = content;
}
});
me.callParent(arguments);

}


});

tobiu
20 Aug 2013, 8:30 AM
changing a property like this:


if (success){
var content = records[0].data.content;
me.html = content;
}


has no influence to the view unless you update the layout (e.g. doLayout()).

the better way to go is this:


if (success){
var content = records[0].data.content;
me.update(content);
}


more details here:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.container.Container-method-update

if you do not only want a working version, but also like to follow our best practises, take a look at the configs:

tpl
data

you can replace the html with the tpl config and update() also works and supports to parse the template in a super fast way.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.container.Container-cfg-tpl
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.XTemplate

oana0211
21 Aug 2013, 12:25 AM
Thank you . It works.