How to keep a reference to the parent container from a view item ?

[tmarly]

Hi,

I defined a view, with a class attribute 'comment', and I want to open a dialog (prompt) containing this attribute, and save the entered value in the attribute.

Here is the code:

Ext.define('org.MyComponent', {
  extend: 'Ext.Panel',
  xtype: 'mycomponent',

  config: {

    comment: '',

     items: [
       {
          xtype: 'button',
           text: 'edit',
           handler: function() {
             Ext.Msg.prompt(
               'Comment', 
               null, 
               function(btn, text){
                 if(btn == 'ok'){
                   // #comment1 - do not work
                   this.parent.config.comment = text;
                 }
               },
               null, 
               true, 
               // #comment2 - 'this.parent' not very nice
               this.parent.config.comment, 
               null
             );
           } 
         },
       ]
     },

});

(then, when I create this component, I'm giving 'comment' in the constructor).

As you can see, there are 2 "this.parent.config.comment". One of them is not working ('#comment1'), and I think the other ('#comment2') is not really elegant.

My main concern being that 'this' do not refer to MyComponent instance.

So I'm wondering what is the best conception / pattern to achieve this.

For the occurence '#comment2', would it be better to initalize the value, in the constructor for example, using add([...]) ? Any example ?

For the occurence '#comment1', would it be better to use listeners ? If yes, how ?

Any other suggestion ?

Tristan

[haduki]

Ext.define('org.MyComponent', {
    extend: 'Ext.Panel',
    xtype: 'mycomponent',
    config: {
        comment: '',
        items: [{
            xtype: 'button',
            text: 'edit',
            handler: function() {
                var mycomponent = this.up('panel');
                Ext.Msg.prompt('Comment', null,
                function(btn, text) {
                    if (btn == 'ok') { 
                        mycomponent.setComment(text);
                    }
                },
                null, true,
                mycomponent.getComment(), null);
            }
        },
        ]
    },
});