how to get a textfield value with scriptProperties in extJS

,tbar: [{
            xtype: 'textfield'
            ,name: 'context_key'
            ,id: 'context_key1'
            ,emptyText: ('enter context key')
            ,listeners: {
               // 'change': {fn:this.search,scope:this}
            }
        },{
             xtype: 'button',
             text: 'Generate Codes'
            ,handler: this.generateCodes
            ,scope: this
        }]

$x1= $scriptProperties['context_key'];
//OR
$x2 = $modx->getOption('context_key',$scriptProperties, false);
//OR
$x3= $scriptProperties['context_key1'];

$contextKey= $modx->context->get('key');

var value = Ext.getCmp('context_key1').getValue();

mycmp.panel.GenerateCode = function(config) {
    config = config || {};
    Ext.apply(config,{
        id: 'test'
        ,url: mycmp.config.connector_url
        ,title: 'Create'
        ,autoHeight: true
        
       ,tbar: [{
            xtype: 'textfield'
            ,name: 'contextkey'
            ,id: 'contextkey1'
            ,emptyText: ('enter context key')
            ,listeners: {
               // 'change': {fn:this.search,scope:this}
              }
        },{
             xtype: 'button',
             text: 'Generate Code'
            ,handler: function(){this.generateCodefunction();}
            ,scope: this
        }]
    });
    mycmp.panel.GenerateCode.superclass.constructor.call(this,config);
};
Ext.extend(mycmp.panel.GenerateCode,MODx.Panel,{
    generateCodefunction: function(tf,nv,ov) {
        
       var searchbox = Ext.getCmp('contextkey1');
       this.getStore().setBaseParam('contextkey',searchbox.getValue());
       var answer = confirm ("Are you sure to continue");
       if (answer) {
          MODx.Ajax.request({
            url: this.config.url
            ,params: {
                action: 'mgr/resource/generatecode'

            }
            ,listeners: {
                'success': {fn:function(r) {
                    MODx.msg.alert('DONE success');
                    this.refresh();
                },scope:this}
            }
        });
        
       } //if (answer)
       else {alert('Not choosen');}
     
    }

});
Ext.reg('mycmp-panel-generatecode',mycmp.panel.GenerateCode);

var searchbox = Ext.getCmp('contextkey1');
this.getStore().setBaseParam('contextkey',searchbox.getValue()); 

    ,generateCodefunction: function(tf,nv,ov) {
        MODx.msg.confirm({
            title: 'Continue?'
            ,text: 'Are you sure you want to continue?'
            ,params: {
                action: 'mgr/resource/generatecode'
                ,contextkey: Ext.getCmp('contextkey1').getValue()
            }
            ,listeners: {
                'success': {fn:function(r) {
                    MODx.msg.alert('Success','DONE success!');
                },scope:this}
                ,'cancel': {fn:function(r) {
                    MODx.msg.alert('Error','Not chosen.');
                },scope:this}
            }
        });
    }

tbar: [{
            xtype: 'textfield'
            ,name: 'contextkey'
            ,id: 'contextkey1'
            ,emptyText: 'enter context key'
        },{
             xtype: 'button',
             text: 'Generate Code'
            ,handler: this.generateCodefunction
            ,scope: this
        }]