Extjs- 创建自定义类时，自定义类中的组件没有访问自定义类变量答案

【问题标题】：Extjs- while creating a custom class, the components inside the custom class are not accessing custom class variableExtjs- 创建自定义类时，自定义类中的组件没有访问自定义类变量
【发布时间】：2013-05-03 04:39:02
【问题描述】：

我创建了一个自定义组件，因为它的 keyup 事件上有一个文本字段，我需要过滤存储，但在事件生成时我没有得到任何变量，但在创建对象时我得到了对象。下面是代码-：

WildCardWindow = Ext.extend(Ext.Window, {
                      width  : 300,
                      height : 265,
                      resizable:true,
                      closeAction:'hide',
                      title:'WildCard Selection Window',
                      autoScroll:true,
                      iconCls:'icon-wildcard',
                      bodyStyle:'background-color:#FFFFFF',
                      //@cfg{Array} data-The array of fields/items to show in the window
                      data: null,
                      store:null,
                      /**
                       * @property
                       * @type String
                       * The message displayed when mouse over on an uncommitted field
                       */
                      uncommittMsg : '<b>Warning!</b> This field has been newly added in               
                                      the form designer. ' + 'It <i>can</i> be used now,  
                                      but you should be sure to save the uncommitted 
                                      changes ' + 'in the open form designer window.',
                      defaultIconCls : '',
                      initComponent : function(){
                                     this.createStore(this.data);
                                     this.items = this.createDataView();
                                     WildCardWindow.superclass.initComponent.call(this);
                      },
                      createDataView: function(){
                                     this.dataView = new Ext.DataView({
                                                  store: this.store,
                                                  autoWidth:true,
                                                  tpl: this.createTpl(),
                                                  autoHeight:true,
                                                  singleSelect : true,
                                                  overClass:'icon-view-over',
                                                  selectedClass:'icon-view-selected',
                                                  itemSelector:'.icon-dataview-item',
                                                  style:'cursor:pointer'
                                      });
                                      this.textField = new Ext.form.TextField({
                                          fieldLabel: 'To',
                                          tabTip:'Start typing to filter by field name', 
                                          name: 'f_to',
                                          enableKeyEvents :true,
                                          listeners: {
                                              keyup: function () {                                    
                        this.store.filter('name',this.textField.getValue(),true,false);
                        //Here I am not getting this.store and this.textField ??? 
                                          }}
                                      });
                                      return [this.dataView,this.textField]
                        },
                        createStore: function(data){
                                 this.store = new Ext.data.JsonStore({
                                             data:data,
                                             autoDestroy:true,
                                             fields:[
                                                 {name: 'id'},
                                                 {name: 'name'},
                                                 {name: 'fieldclass'},
                                                 {name: 'type'},
                                                 {name: 'options'},
                                                 {name: 'isMultiMember',type:'boolean'},
                                                 {name: 'isUnCommitted',type:'boolean'}
                                             ]
                                  });
                                  return this.store;
                          },
                          listeners:{
                                close: function(){
                                         this.store.filter('name','',true,false);
                                }
                          }
})

在 textfield 的 keyup 中，我没有得到 this.store 和 this.textfield ?? 任何建议或我错的地方。请尽快回复

【问题讨论】：

请使用缩进格式化您的代码，使其更具可读性。

标签： events extjs components

【解决方案1】：

因为调用该函数时您会失去作用域。

你可以做两件事：

使用绑定函数复制作用域：

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.Function-method-bind

我认为这也有效，并且是一个更优雅的解决方案：

var me = this;
this.textField = new Ext.form.TextField({
  fieldLabel: 'To',
  tabTip:'Start typing to filter by field name', 
  name: 'f_to',
  enableKeyEvents :true,
  listeners: {
    keyup: function () {                                    
      me.store.filter('name',this.getValue(),true,false);
    }}
});

【讨论】：