ExtJS4.0+ 组件构造器参数传递问题

Question

ExtJS3.0+我可以这么定义我的组件(v3.js),因为这样做，我可以很轻松的将参数传递给组件的构造器(比如参数storeReference)。
v3.jsmyCmp = function(storeReference){  //storeReference接收需要传递的参数
  this.grid = new Ext.grid.GridPnel({
      cm:..,
      store: storeReference  //应用参数storeReference
  })
  myCmp.superclass.constuctor.call(this,{
     items:[this.grid]
  })
}
Ext.extend(myCmp,Ext.Panel,{
  //Method:
   getGridStore:function(){
     return this.grid.getStore();
   }
});
Ext.onReady(function(){
    Ext.Viewport({
       layout:'fit',
       items:[new myCmp(storeReference)]//传递参数入口(必须从这里传入) storeReference
    });
})
但是一改版，问题来了，v4.0后,组件继承方式改变了(v4.js)
v4.jsExt.define('My.app.Panel', {
     extend: 'Ext.panel.Panel',
     requires: [
         'Ext.panel.Panel']
     initComponent: function () {
         Ext.apply(this,{             //主要是把参数传递给这个函数使用
             width:200,
             height:200
         })
         this.callParent(arguments);  
     },
     onRender:function(){
         this.callParent();
     }  
 });
Ext.onReady(function(){
     new My.app.Panel(reference);  //比如我要传递这个参数(reference)给4.0的构造器（必须从这里将参数传入，如果有其他方法，请先说明原理），我就无法在我定义的组件里接收参数。
})请问，在extj4.0+如何将参数通过 v4.js里描述的那样传递给我自定义的组件，被构造函数所使用(写法不限，但是一定要考虑到性能，灰常希望能有高手不吝赐教)，先谢谢啦.
注意:请不要尝试用这2种方案.
1.设置全局变量.
2.设置外层函数包裹组件.

Answer 1

Ext.onReady(function(){
     new My.app.Panel(reference);  //比如我要传递这个参数(reference)给4.0的构造器（必须从这里将参数传入，如果有其他方法，请先说明原理），我就无法在我定义的组件里接收参数。
}你为啥一定要这么传入参数？

Answer 2

嘿嘿，这个也是我老大从一开始教我的方法，不过我看到官网例子也有很多类似的写法，所以也没去考究这种通过new的方式传递参数的性能问题了。
不过如果你有更好的方法，非常感谢你能不吝赐教。

Answer 3

用extjs时间不是很长，平时写可能性能考虑的不是很多
Ext.define('My.app.Panel', {
     extend: 'Ext.panel.Panel',
     config:{
        reference:undefined 
     }
}var config={
reference:xxxxxx
};  
我都是new My.app.Panel(config);
initComponent的时候，
var me=this;
这个时候再通过reference 来使用的

Answer 4

其实就是将reference当成My.app.Panel的一个"属性"，那么在My.app.Panel的很多地方就都可以使用了包括构造函数 constructor: function (config) 等

Answer 5

你是说，如果我通过new calssPath(config),这个config参数可以被constructor:function(config){
}
接收到？
刚才我测试了，传不进，代码在下面,难道我理解错了.Ext.define('Ext.app.MyPanel',{
extend:'Ext.panel.Panel',
width:200,
height:200,
title:'my panel',
config:ref,
initComponent:function(){
alert(this.config);  //config is not defined
Ext.apply(this,{
title:'his panel'
});
this.callParent();
},
onRender:function(){
this.callParent();
}
})Ext.onReady(function() {
var config = {
ref:{
name:'ckk',
id:1
}
} Ext.create('Ext.Viewport',{
layout:'fit',
items:[new Ext.app.MyPanel(config)]
})

Answer 6

Ext.define('Ext.app.MyPanel',{
    extend:'Ext.panel.Panel',
    width:200,
    height:200,
    title:'my panel',
    config:{
      customTest:undefined
    },
    customTest111111:undefined,
    initComponent:function(){
        var me=this;
        alert(me.getCustomTest());  //ckk
        alert(me.customTest111111); //aaaaa
        Ext.apply(this,{
            title:'his panel'
        });
        this.callParent();          
    },
    onRender:function(){
        this.callParent();
        var me=this;
        alert(me.getCustomTest());  //ckk
        alert(me.customTest111111); //aaaaa
    }
})
 
Ext.onReady(function() {
    var config = {
        customTest:'ckk',
        customTest111111:'aaaaa'
    } ;
    Ext.create('Ext.Viewport',{
        layout:'fit',
        items:[new Ext.app.MyPanel(config)]
    })
})
define声明的“类”，“属性”可以放在config 里面(customTest)，也可以放外面(customTest111111)
放在config里面的好处是ext自动给你生成了getter和setter方法customTest的话就是getCustomTest和setCustomTest 第一个字母大写config:ref,这种写法是不对的
 Ext.create('Ext.Viewport',{
        layout:'fit',
        items:[new Ext.app.MyPanel(config)]
    }
以这个为例的话
layoutL'fit'
items:[new Ext.app.MyPanel(config)]
都是Ext.Viewport的config
不过我们自己写的话，因为那些都是父类的，所以不需要在意，只需要管理自己声明的config就可以

Answer 7

你定义了一个panel
Ext.define('My.app.Panel', {
extend: 'Ext.panel.Panel',
        store: 'myStore',
        ......
});接下来，你可以用create构建一个新的
var newPanel = Ext.create('My.app.Panel', { // 大括号里，你可以添加想要的属性。
    height: '300px',
    ....... // store不变， 还是 “myStore”
});或者，你定义panel的时候，可以不定义store，而在newPanel里定义

Answer 8

Ext.define('Ext.app.MyPanel',{
    extend:'Ext.panel.Panel',
    width:200,
    height:200,
    title:'my panel',
    config:{
      customTest:undefined
    },
    customTest111111:undefined,
    initComponent:function(){
        var me=this;
        alert(me.getCustomTest());  //ckk
        alert(me.customTest111111); //aaaaa
        Ext.apply(this,{
            title:'his panel'
        });
        this.callParent();          
    },
    onRender:function(){
        this.callParent();
        var me=this;
        alert(me.getCustomTest());  //ckk
        alert(me.customTest111111); //aaaaa
    }
})
  
Ext.onReady(function() {
   [code=javascript] var config = {
        customTest:'ckk',
        customTest111111:'aaaaa'
    } ;
    Ext.create('Ext.Viewport',{
        layout:'fit',
        items:[new Ext.app.MyPanel(config)]
    })
})
[/code]这两个Config 没有直接关系，只是为了易懂才这么写的Ext.onReady(function() {
   var _config = { 
        customTest:'ckk',
        customTest111111:'aaaaa'
    } ;
    Ext.create('Ext.Viewport',{
        layout:'fit',
        items:[new Ext.app.MyPanel(_config)]
    })
})
这样应该懂了吧，你可以自己添加任意的属性方便你自己的业务逻辑
或者你可以将config里面的某部分暂时不写，由接下来其他操作来决定都可以

Answer 9

嘿嘿，是的，我写错了，这么写就可以正确获取到了。config:{
ref:undefined
},
initComponent:function(){
alert(this.getRef().name); 先谢了啊，不过假如我要在某一个mainFrame里大量引用这个自定义的panel,
假如是这种情况（类似跟贴框）:
for(var i=0;i<50;i++){
  mainFrme.items.add(new Ext.app.MyPanel());//创建50次，也是去new 50个吗？
}
我之所以提出这个问题是因为，我在3.0的时候就这么干过，不过，通过new的方式让页面一次显示3个自定义panel就已经很慢，很慢了。
我想知道，你在项目开发的时候有没有碰到这种类似的秦广，有通过其他途径去创建过自定义组件的吗？

Answer 10

这个还真没有
不过你可以考虑先create出来，不显示，然后一个一个的render出来应该会好很多

Answer 11

嗯，我待会去做测试，
先create,然后render？这个能讲下原因吗？

Answer 12

4.0+ 创建对象时传递的参数就是this吧直接传递initComponent中用this获取到了