PDA

View Full Version : Using a Convert function in the Model Configuration ?



DracisFL
21 Feb 2012, 9:22 AM
Hello,

http://edspencer.net/2012/02/building-a-data-driven-image-carousel-with-sencha-touch-2.html

I'm trying to build in designer for practice, this demo that Ed Spencer wrote for Sencha Touch 2 (see link). Problem is that the image is buried within the content that I'm trying to display in a carousel. Ed wrote a function in the model to get around that. So my Question, is how can I do this using designer, or can I ?



Ext.define('apod.model.Picture', {

extend: 'Ext.data.Model',



config: {

fields: [

'id', 'title', 'link', 'author', 'content',

{
name: 'image',
type: 'string',
convert: function(value, record) {
var content = record.get('content'),
regex = /img src=\"([a-zA-Z0-9\_\.\/\:]*)\"/,
match = content.match(regex),
src = match[1];


if (src != "" && !src.match(/\.gif$/)) {

src = "http://src.sencha.io/screen.width/" + src;

}



return src;

}

}

]

}

});



Any guidance appreciated.. thx..

DracisFL
21 Feb 2012, 10:00 AM
lol.. I'm sure this is not the correct answer, but it works.. I pasted the whole section below in the component config field and clicked "add".. then again, maybe that is the way it is suppose to work.



convert: function(value, record) { var content = record.get('content'), regex = /img src=\"([a-zA-Z0-9\_\.\/\:]*)\"/, match = content.match(regex), src = match[1]; if (src != "" && !src.match(/\.gif$/)) { src = "http://src.sencha.io/screen.width/" + src; } return src; }

aconran
21 Feb 2012, 10:08 AM
Thats currently the way to do it.

In the near future you will be able to add basic functions to child items. You would add the basic function to the field, name it convert and add the proper arguments.

DracisFL
21 Feb 2012, 10:48 AM
Thats currently the way to do it.

In the near future you will be able to add basic functions to child items. You would add the basic function to the field, name it convert and add the proper arguments.

Excellent.. thanks for the Feedback, much appreciated..

tyladurdan
15 Jan 2013, 9:56 AM
I'm not having much luck either trying to build this. When I try it for some reason I get this error in the console:


Uncaught ReferenceError: record is not defined


...which is weird because it seems fine when compared to the normal version.

When you say you added it in the component config, where abouts exactly did you add it? I can't find in the inspector where you added that.

Thanks

DracisFL
16 Jan 2013, 8:54 AM
Hi tyladurdan, I've attached the app folder (the whole project with libraries and css was too large to attach) which should shed some light on the matter.

Also there is a screenshot showing the convert function which is what my issue was. This is for the image field in the model.

Since this was almost a year ago I don't remember exact specifics, but I did just test it on my server and it is pulling in nasa images..

Hope this helps


I'm not having much luck either trying to build this. When I try it for some reason I get this error in the console:


Uncaught ReferenceError: record is not defined


...which is weird because it seems fine when compared to the normal version.

When you say you added it in the component config, where abouts exactly did you add it? I can't find in the inspector where you added that.

Thanks

tyladurdan
21 Feb 2013, 6:43 AM
I forgot to say thanks, I managed to get it to work using your model as a ref. For some reason when I tried a similar thing it didn't work but I just copied your model and it works!


:-)