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

[葫芦八娃]

ExtJS3.0+我可以这么定义我的组件(v3.js),因为这样做，我可以很轻松的将参数传递给组件的构造器(比如参数storeReference)。
v3.js

myCmp = 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.js

Ext.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.设置外层函数包裹组件.

[人中赤兔马中吕布]

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就可以

[NANU-NANA]

你定义了一个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里定义

[人中赤兔马中吕布]

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里面的某部分暂时不写，由接下来其他操作来决定都可以

[人中赤兔马中吕布]

好吧，我去死了

[葫芦八娃]

引用 7 楼 xxo1986cxm 的回复:

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就可以

嘿嘿，是的，我写错了，这么写就可以正确获取到了。

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就已经很慢，很慢了。 我想知道，你在项目开发的时候有没有碰到这种类似的秦广，有通过其他途径去创建过自定义组件的吗？

[人中赤兔马中吕布]

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

[葫芦八娃]

引用 12 楼 xxo1986cxm 的回复:

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

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

[Go 旅城通票]

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

[人中赤兔马中吕布]

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

你为啥一定要这么传入参数？

[葫芦八娃]

引用 1 楼 xxo1986cxm 的回复:

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

你为啥一定要这么传入参数？

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

[人中赤兔马中吕布]

用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 来使用的

[葫芦八娃]

引用 3 楼 xxo1986cxm 的回复:

用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 来使用的

非常感谢啊，我先去做下测试。

[人中赤兔马中吕布]

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

[葫芦八娃]

引用 5 楼 xxo1986cxm 的回复:

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

你是说，如果我通过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)]
	})

[葫芦八娃]

靠，忘记结贴了。