在同一页面，两次调用同一个控件变量只显示一个的解决办法

  刚接触web前端的编程，由于对js编程不太熟悉，在使用过程中遇到一些问题，在此记录下来。

 

  问题简述：由于在项目中需要多次用到一个EXT的查询控件，所以自然而然的想到将这部分代码封装起来，单独保存在一个js文件中，其它需要用到该控件的js文件再调用此控件。于是我将该控件定义如下：

 

var dateForm=	new Ext.FormPanel({
		 collapsible:true,
		 collapsed:false,
		frame : true,
		width : '100%',
		labelAlign : 'right',
		labelWidth : 40,
		layout : 'form',
		items : [ {
			layout : 'column',
			items : [ {
				columnWidth : 0.3,
				layout : 'form',
				items : [ new Ext.form.DateField({
		fieldLabel : '开始',
		format : 'Y-m',
		emptyText : '请选日期',
		name : 'startDate '
	}) ]
			}, {
				columnWidth : 0.3,
				layout : 'form',
				items : [new Ext.form.DateField({
			fieldLabel : '结束',
			format : 'Y-m',
			// maxValue:new Date(),
			emptyText : '请选日期',
			name : 'endDate'
		})]
			}, {
				columnWidth : 0.3,
				layout : 'form',
				items : [ new Ext.Button({
					text : '查询',
					id : 'query',
					handler : function() {
					}
				}) ]
			} ]
		} ]
	});

 

  然后在两个tab页面中分别调用dateForm在tabPanel中加载该控件，只调用一次的时候，控件显示正常，但是调用两次之后，原本预期在两个tabPanel出现的dateForm，只出现一次。而且FF没有报任何错误。

 

  解决方法：在网上找了一阵子原因，发觉两个tabPanel由同一个html调用之后，两个写tabPanel的js页面被编译在一个html页面中，dateForm控件只被渲染了一次。将代码改成如下形式：

function createDateForm(){
	 startDate = new Ext.form.DateField({
		fieldLabel : '开始',
		format : 'Y-m',
		emptyText : '请选日期',
		name : 'startDate '
	});
	 endDate = new Ext.form.DateField({
			fieldLabel : '结束',
			format : 'Y-m',
			// maxValue:new Date(),
			emptyText : '请选日期',
			name : 'endDate'
		}) ;
	return dateQueryForm=	new Ext.FormPanel({
		 collapsible:true,
		 collapsed:false,
		frame : true,
		width : '100%',
		labelAlign : 'right',
		labelWidth : 40,
		layout : 'form',
		items : [ {
			layout : 'column',
			items : [ {
				columnWidth : 0.2,
				layout : 'form',
				items : [ startDate ]
			}, {
				columnWidth : 0.2,
				layout : 'form',
				items : [endDate]
			}, {
				columnWidth : 0.2,
				layout : 'form',
				items : [ new Ext.Button({
					text : '查询',
					id : 'query',
					handler : function() {
					}
				}) ]
			} ]
		} ]
	});

}

    这样在原本需要调用dateForm的地方调用createDateForm方法，就可以多次使用该控件了