PDA

View Full Version : Custom Component Workflow?



andystalick
16 Jan 2012, 1:52 PM
I've been having trouble figuring out what the best practices are about creating custom components, especially ones that might be termed "composite components".

I'd like to extend something basic, like Ext.Component or Ext.Container, add a couple of string properties, and see them render out as a couple of Labels and an TextField.

Seems simple, but I'm spinning my wheels here...

dobie_
16 Jan 2012, 2:59 PM
Have you read this document?

http://docs.sencha.com/touch/2-0/#!/guide/class_system

andystalick
16 Jan 2012, 3:07 PM
Thanks, dobie -- Yes, I've read everything I could Google on the topic.

Over the course of the day I've had some limited success with this:


Ext.define('Astalick.components.LabelValue', {
extend: 'Ext.Container',
xtype: 'labelValue',
config: {
label: 'label',
layout: 'hbox',
value: 'value',
editable: true,
editing: false,

items: [
{
xtype: 'label',
html: 'debuglabel',
itemId: 'myLabel',
flex: 1
},
{
xtype: 'label',
html: 'debugvalue',
itemId: 'myValue',
flex: 2
},
{
xtype: 'textfield',
value: 'debugfield',
hidden: true,
itemId: 'myField',
flex: 2
}

]

},

updateLabel: function(newLabel, oldLabel) {
if(newLabel) {
this.getComponent('myLabel').show();
this.getComponent('myLabel').setHtml( newLabel );
} else {
this.getComponent('myLabel').hide();
}
},
updateValue: function(newValue, oldValue) {
if(newValue) {
this.getComponent('myValue').show();
this.getComponent('myValue').setHtml( newValue );
} else {
this.getComponent('myValue').hide();
}
},
updateEditable: function(newMode, oldMode) {

},
updateEditing: function(newMode, oldMode) {
if( newMode != null && this.getEditable() ) {
this.getComponent('myField').show();
this.getComponent('myValue').hide();
} else {
this.getComponent('myValue').show();
this.getComponent('myField').hide();
}
}

andystalick
17 Jan 2012, 9:58 AM
Performance turns out to be a real problem with the above code. The page I'm working on can take upwards of 10 seconds to render.

Replacing this component with a simple Label reduces the time dramatically.

What I'd like to do is use Templates to place my string values, but those seem only to work with subclasses of DataView.

What's the story?

rdougan
17 Jan 2012, 11:32 PM
Using the class system to do this can be flexible, but of course it comes with the downside of reduced performance.

If you want the best performance, you need will need to create the dom structure yourself and then update the dom using element methods.

You can either do this by using the Component#tpl and Component#data configurations, or by overriding Component#getTemplate and creating your own template.