1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    22
    Vote Rating
    0
    Morfi is on a distinguished road

      0  

    Default Unanswered: Ext.define prevents from getting parent later?

    Unanswered: Ext.define prevents from getting parent later?


    Hi.

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


    Code:
    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);
            }
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    22
    Vote Rating
    0
    Morfi is on a distinguished road

      0  

    Default


    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:
    Code:
    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`

    Code:
    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

    Code:
    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

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    22
    Vote Rating
    0
    Morfi is on a distinguished road

      0  

    Default


    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..

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Oct 2012
    Posts
    22
    Vote Rating
    0
    Morfi is on a distinguished road

      0  

    Default


    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())

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Did you add the component instance to another component?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #9
    Sencha User
    Join Date
    Oct 2012
    Posts
    22
    Vote Rating
    0
    Morfi is on a distinguished road

      0  

    Default


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

Thread Participants: 1

Tags for this Thread