Ext.define prevents from getting parent later?

[Morfi]

Hi.

I have following code. Problem is:
Webclip.current.hasParent() equals `false.
Also Webclip.current.up('-id-') will always return undefined. Why..?

Ext.define('IconInput', {    extend: 'Ext.field.Field',
    alias: 'widget.iconinput',


    config: {
        label: 'Icon',
        cls: 'icon-input',


        component:
        {
            xtype: 'iconselector'
        }
    }
});


Ext.define('IconSelector', {
    extend: 'Ext.Button',
    alias: 'widget.iconselector',


    config: {
        width: 57,
        height: 57,
        iconCls: 'add1',
        iconMask: true,


        handler: function() {
            Ext.getCmp('images-gallery').show();
            Webclip.current = this;
            //console.log(this);
        }
    }
});

[mitchellsimoens]

You code does not have any up or hasParent call so I'm not understanding where and with what you are trying to do this.

[Morfi]

Hi.

Actually this issue is somehow connected to this one which I've posted recently
http://www.sencha.com/forum/showthre...454#post906454

The problem is following.


I am dynamically creating fieldsets using this function:

function addWebClip(type) {

    var webClip = Ext.create('Ext.form.FieldSet', {
            
            cls: 'webclip-title',

            items: [
                {
                    xtype: 'titlebar',
                    title: type + ' webclip',

                    items: [
                        {
                            text: 'remove',
                            ui: 'decline',
                            align: 'right',

                            handler: function () {
                                Ext.getCmp('main-panel').remove(this.up('fieldset'));
                            }
                        }
                    ]
                },
                {
                    xtype: 'textfield',
                    name: 'webClipLabel[]',
                    label: 'Label'
                },
                {
                    xtype: 'urlfield',
                    name: 'webClipUrl[]',
                    label: 'URL'
                },
                {
                    xtype: 'togglefield',
                    name: 'IsRemovable[]',
                    label: 'Removeable',
                },
                {
                    xtype: 'togglefield',
                    name: 'Precomposed[]',
                    label: 'Glossy icon',
                },
                {
                    xtype: 'togglefield',
                    name: 'FullScreen[]',
                    label: 'Fullscreen',
                },
                {
                       xtype: 'iconinput'
                },
                {
                    //xtype: 'hiddenfield',
                    xtype: 'textfield',
                    name: 'webClipImage[]'
                },
                {
                    xtype: 'hiddenfield',
                    name: 'webClipType[]',
                    value: type
                }
            ],

            listeners: {
                setHiddenIcon: function(imgurl) {
                    //this.setText(imgurl);
                    alert(imgurl);
                }
            }
    });

    Ext.getCmp('main-panel').add(webClip);
}

Let's say I have created 3 webClips.
Now the difficulty lies in `xtype: iconinput`

Ext.define('IconInput', {
    extend: 'Ext.field.Field',
    alias: 'widget.iconinput',

    config: {
        label: 'Icon',
        cls: 'icon-input',

        component:
        {
            xtype: 'iconselector'
        }
    }
});

Ext.define('IconSelector', {
    extend: 'Ext.Button',
    alias: 'widget.iconselector',

    config: {
        width: 57,
        height: 57,
        iconCls: 'add1',
        iconMask: true,

        handler: function() {
            Webclip.current = this;
            console.log(this.hasParent());
            Ext.getCmp('images-gallery').show();
        }
    }
});

There is only one gallery of images which appears after you click on `xtype: iconselector`.
It opens gallery with images where you should select an icon. Code below is code for each icon

var imageButton = Ext.create('Ext.Button', {
                        width: 57,
                        height: 57,
                        icon: responseObject[x],
                        cls: 'gallery-button',

                        handler: function () {
                            Webclip.current
                                .setStyle('background: url("' + this.getIcon() + '");')
                                .setIcon('')
                                .addCls('x-button-icon-selected');

                            Ext.getCmp('images-gallery').hide();
                        }
                    });

This imageButton's image shoud apply as a background to iconselector which initiated gallery AND(!) it's value (url to icon) should appear in webClipImage[] field.

My problem is how should I tell the code to insert it into proper webClipImage[] if I have many of them (as they are being created dynamically). I wanted to do this using someting like (here comes example in jQuery syntax). $(this).parent().closest('input name=[webClipImage]');


ALSO this refers to the topic I mentioned above (http://www.sencha.com/forum/showthre...454#post906454)

How could I replace code in imageButton's creation without using `Webclip` namespace (as I used Webclip.current = this) to pass object and use it later to apply background for it (from imageButton's icon url).

Hope I made myself clear this time


Mike

[mitchellsimoens]

A big difference between jQuery and Sencha Touch (and Ext JS) is you don't have to deal with the DOM elements as much. We add/remove components from other components and the framework handles the DOM for us.

[Morfi]

I understand that, that's why I tried to avoid things i did in this topic
http://www.sencha.com/forum/showthre...lowing-example

I used .up() which is pretty much similar thing.

I'd like to use Ext.cmpGet() to retrieve the component but as long as it's dynamically created I cannot search it by ID. Therefore I asked for a tip what is common method to solve such kind of things..

[mitchellsimoens]

You can use ComponentQuery...

component.up('container')

will walk up the component structure you have in your app until it finds a match for that component selector

[Morfi]

Hi.

Yes that's what I was trying to do but as you already said, it has no parents therefore .up() will never find it.

The reason for that is that they are `dynamically allocated` (if I can use such expression) meanwhile script is running.
(here: -inside iconselector handler- I cannot use this.up('iconinput') - even that iconselector is being called inside iconinput, still iconinput wont be it's parent nor findable via .up())

[mitchellsimoens]

Did you add the component instance to another component?

[Morfi]

Perhaps I haven't, all the code I used is visible above. Any tip on method/event?